{% extends 'WebelopingLanderBundle:PanelDelFormador:layout.html.twig' %}

{% use 'WebelopingLanderBundle:Includes:ranking_table.html.twig' %}
{% use 'WebelopingLanderBundle:Includes:header_evolution_box.html.twig' %}

{% block content_class "row"%}
{% block content_id "formador"%}
{% block content -%}
    {{ block('header_evolution_box') }}
    <div class="margin ranking shadow-lighter">
        {{ block('ranking_box') }}
    </div>
    <div class="margin area-social shadow-lighter">
        <div class="row">
            <div class="col-sm-12 header">
                <div class="row-table">
                    <div class="cell td-bottom title">
                        COMUNIDAD DE EXPERTOS
                    </div>
                    <div class="cell td-bottom points">
                        <span class="value">{{ postCounter.questions|number_format }}</span>
                        <a href="{{ path('comunidad_expertos_question_list') }}" class="name">Preguntas</a>
                        <span class="value">{{ postCounter.paints|number_format }}</span>
                        <a href="{{ path('comunidad_expertos_paint_list') }}" class="name">Dibujos</a>
                        <span class="value">{{ postCounter.topics|number_format }}</span>
                        <a href="{{ path('comunidad_expertos_topic_list') }}" class="name">Temas</a>
                        <a href="{{ path('comunidad_expertos_question_new') }}" class="btn default-blue">Abrir nuevo</a>
                    </div>
                </div>
            </div>
            <div class="col-sm-6 vertical-divider">
                <ul class="social-list">
                    {% for post in latestPosts %}
                        <li class="row-table">
                            <div class="cell td-top avatar">
                                <a href="{{ path('comunidad_expertos_user_show', {'id' : post.user_id }) }}" title="{{ post.nick_name }}">
                                    <img class="item-01 img-circle" src="{{ post.user_picture }}">
                                </a>
                            </div>
                            <div class="cell td-top user-info">
                                <p class="item-02">
                                    <a href="{{ path('comunidad_expertos_' ~ post.type ~ '_show', {'id' : post.id }) }}" class="nombre" title="{{ post.title }}">
                                        {{ post.title }}
                                    </a>
                                <span>{{ post.content }}</span>
                                </p>
                                <span class="item-03 tiempo">
                                    {{ post.date|humanizeDate }}
                                </span>
                            </div>
                        </li>
                    {% endfor %}
                </ul>
                <a href="{{path( 'comunidad_expertos_question_list' )}}" class="btn default-blue">Ir a Comunidad de Expertos</a>
            </div>
            <div class="col-sm-6">
                <div class="row">
                    <div class="col-md-6 right">
                        <form class="form">
                            <div class="btn-group btn-input right">
                                <div class="btn-group">
                                    <button class="btn dropdown-toggle dropdown-white filter-by" data-toggle="dropdown">
                                        Filtrar por
                                        <span class="caret blue"></span>
                                    </button>
                                    <ul class="dropdown-menu">
                                        <li>
                                            <a href="{{ path('panel_formador_index', {'order' : 'valoracion'}) }}" title="{{ 'filtrar por usuarios mejor valorados'|capitalize }}">Valoración</a>
                                        </li>
                                        <li>
                                            <a href="{{ path('panel_formador_index', {'order' : 'activo'}) }}" title="{{ 'filtrar por usuario más activos'|capitalize }}">Activo</a>
                                        </li>
                                        <li>
                                            <a href="{{ path('panel_formador_index', {'order' : 'dibujos'}) }}" title="{{ 'filtrar por número de dibujos'|capitalize }}">Dibujos</a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="col-md-12">
                        <ul class="row cont-nik-list">
                            {% for user in usersFiltered %}
                                <li class="col-sm-6">
                                    <div class="avatar pagination-centered">
                                        <a href="{{ path('comunidad_expertos_user_show', {'id' : user.id }) }}" title="{{ user.nick_name }}">
                                            <img class="item-01 img-circle" src="{{ user.picture }}"/>
                                        </a>
                                    </div>
                                    <a href="{{ path('comunidad_expertos_user_show', {'id' : user.id }) }} }}" class="nik-name pagination-centered" title="{{ user.nick_name }}">
                                        {{ user.nick_name }}
                                    </a>
                                </li>
                            {% endfor %}
                        </ul>
                    </div>
                    <div class="col-sm-12">
                        <span class="tags-title blue pagination-centered">
                            ETIQUETAS MÁS UTILIZADAS
                        </span>
                        <ul class="tags pagination-centered">
                            {% for tag in tags %}
                                <a class="btn default-thin">{{tag.name}}</a>
                            {% endfor %}   
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}