{% extends "::base.html.twig" %}

{% block header_title %}{{ user.login }} @ Point Tools{% endblock %}

{% block content %}
    <h1 class="user-login">
        <img src="{{ avatar_url }}">
        <a href="//{{ user.login }}.point.im/blog/" target="_blank">{{ user.login }}</a>
    </h1>

    <div class="user-subscribers">
        {% if subscribers|length > 0 %}
            <div class="panel-group" id="accordion-subscribers">
                <div class="panel panel-default">
                    <div class="panel-heading"id="headingOne">
                        <h4 class="panel-title">
                            <a data-toggle="collapse" data-parent="#accordion-subscribers" aria-expanded="true" href="#collapse-subscribers">
                                <span class="glyphicon glyphicon-collapse-down"></span> {{ 'Subscribers'|trans }}
                            </a>
                        </h4>
                    </div>
                    <div id="collapse-subscribers" class="panel-collapse collapse in">
                        <div class="panel-body">
                            <ul class="users mosaic">
                                {% for user in subscribers %}
                                    <li><a href="{{ url('user_show', {login: user.login}) }}">@{{ user.login }}</a></li>
                                {% endfor %}
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        {% else %}
            <div class="alert alert-warning" role="alert">{{ 'No subscribers data found'|trans }}</div>
        {% endif %}
    </div>

    <div class="user-subscriptions-log">
        {% if log|length > 0 %}
            <div class="panel-group" id="accordion-log">
                <div class="panel panel-default">
                    <div class="panel-heading" id="headingOne">
                        <h4 class="panel-title">
                            <a data-toggle="collapse" data-parent="#accordion-log" aria-expanded="true" href="#collapse-log">
                                <span class="glyphicon glyphicon-collapse-down"></span> {{ 'Subscriptions log'|trans }}
                            </a>
                        </h4>
                    </div>
                    <div id="collapse-log" class="panel-collapse collapse in">
                        <div class="panel-body">
                            <table class="table table-striped">
                                <thead>
                                    <tr>
                                        <td>{{ 'User'|trans }}</td>
                                        <td>{{ 'Action'|trans }}</td>
                                        <td>{{ 'Date'|trans }}</td>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for event in log %}
                                        <tr>
                                            <td>
                                                <a href="{{ url('user_show', {login: event.subscriber.login}) }}">@{{ event.subscriber.login }}</a>
                                            </td>
                                            <td>
                                                <span class="glyphicon {% if event.action == 'subscribe' %}glyphicon-plus{% elseif event.action == 'unsubscribe' %}glyphicon-minus{% endif %}"></span>
                                            </td>
                                            <td>
                                                {# Use DateTime helper: https://sonata-project.org/bundles/intl/master/doc/reference/datetime.html #}
                                                {{ event.date|date('d F Y H:i:s') }}
                                            </td>
                                        </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        {% else %}
            <div class="alert alert-warning" role="alert">{{ 'No log data found'|trans }}</div>
        {% endif %}
    </div>

{% endblock %}