{% extends 'base.html.twig' %}

{% import 'macros/blocks.html.twig' as blocks %}

{% block title %}{{ 'page.set.index' | trans }}{% endblock %}

{% block header %}{{ 'page.set.index' | trans }}{% endblock %}

{% block meta %}
    {{ blocks.meta(
    name~' - '~'page.set.index' | trans ,
    app.request.uri,
    'meta.description' | trans | striptags('sup'),
    app.request.schemeAndHttpHost~asset('resources/images/meta-logo.png'),
    256,
    256
    )}}
{% endblock %}

{% block content %}
    <div class="ui segment vertical secondary">
        <div class="ui container grid stackable divided">
            <div class="column four wide alternate stripe mobile">
                <div class="segment basic ui filter">
                    <h3 class="header dividing ui">{{ 'set.filter.title' | trans }}</h3>
                    {{ form_start(form) }}


                    <div class="field">
                        {{ form_label(form.query) }}
                        <div class="ui icon input">
                            {{ form_widget(form.query) }}
                            <i class="search icon"></i>
                        </div>
                    </div>

                    {{ form_row(form.theme) }}
                    {{ form_row(form.partCount) }}
                    {{ form_row(form.year) }}

                    {{ form_rest(form) }}

                    <div class="field">
                        <input class="ui fluid submit green button" type="submit" value="{{ 'form.search.submit' | trans }}"/>
                    </div>
                    {{ form_end(form) }}
                </div>
            </div>
            <div class="column twelve wide">
                <div class="ui segment basic">
                    <div class="ui header segment vertical sort">
                        <div class="ui grid stackable">
                            <div class="five wide column">
                                {% if sets.paginationData['totalCount'] %}
                                    <div class="ui text left floated menu">
                                        <div class="header item">Showing</div>
                                        <span class="item">{{ sets.paginationData['firstItemNumber']~' - '~sets.paginationData['lastItemNumber'] }} of {{ sets.getTotalItemCount }} items</span>
                                    </div>
                                {% endif %}
                            </div>

                            <div class="eleven wide column">
                                <div class="ui text right floated menu">
                                    <div class="header item">Sort By</div>

                                    {{ knp_pagination_sortable(sets, 'Number', ['s.id']) }}
                                    {{ knp_pagination_sortable(sets, 'Year', ['s.year']) }}
                                    {{ knp_pagination_sortable(sets, 'Name', ['s.name']) }}
                                    {{ knp_pagination_sortable(sets, 'Parts', ['s.partCount']) }}
                                </div>
                            </div>

                        </div>
                    </div>
                    <div class="ui segment vertical">
                        <div class="ui five column doubling grid sets" id="results">
                            {% for set in sets %}
                                {{ blocks.set(set) }}
                            {% else %}
                                {{ blocks.empty('empty.search.title' | trans ) }}
                            {% endfor %}
                        </div>
                    </div>
                    <div class="ui segment vertical right floated">
                        {{ knp_pagination_render(sets) }}
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}