{% extends 'layout.html.twig' %}
{% import "macros.html.twig" as macros %}

{% set breadcrumb = buildBreadcrumb([{'route': 'app_search_index', 'trans': 'menu.search'}], null, form.vars.value.term is not null ? form.vars.value.term : null) %}

{% block title %}
    {{ renderTitle(breadcrumb)  }}
{% endblock %}

{% block breadcrumb %}
    {{ renderBreadcrumb(breadcrumb)  }}
{% endblock %}

{% block content %}
    <div class="title-block">
        <h1>{{ 'menu.search'|trans }}</h1>
    </div>

    <div class="content-block">
        {{ form_start(form, {'method': 'GET'}) }}
            <div class="row">
                <div class="col s12 l5 offset-l1 xl3 offset-xl3">
                    {{ form_row(form.term, {'label' : 'label.search'}) }}
                </div>
                <div class="col s12 l5 xl3">
                    {{ form_row(form.createdAt, {'label' : 'label.added_at', 'attr': {'class' : 'datepicker' } }) }}
                </div>
            </div>

            <div class="row search-checkbox-row">
                <div class="col s12 l10 offset-l1 xl6 offset-xl3">
                    <div class="col s4">
                        {{ form_row(form.searchInCollections, {'label': 'label.collections'}) }}
                    </div>
                    <div class="col s4">
                        {{ form_row(form.searchInItems, {'label': 'label.items'}) }}
                    </div>
                    {% if isFeatureEnabled('tags') %}
                        <div class="col s4">
                            {{ form_row(form.searchInTags, {'label': 'label.tags'}) }}
                        </div>
                    {% endif %}
                    {% if isFeatureEnabled('albums') %}
                        <div class="col s4">
                            {{ form_row(form.searchInAlbums, {'label': 'label.albums'}) }}
                        </div>
                    {% endif %}
                    {% if isFeatureEnabled('wishlists') %}
                        <div class="col s4">
                            {{ form_row(form.searchInWishlists, {'label': 'label.wishlists'}) }}
                        </div>
                    {% endif %}
                </div>
            </div>

            <div class="row center-align form-btn-holder">
                <button type="submit" class="btn waves-effect waves-light">{{ 'btn.submit'|trans }}</button>
            </div>
        {{ form_end(form) }}
    </div>

    <div class="content-block">
        {% if results|length > 0 %}
            {% if results.items is defined and results.items|length > 0 %}
                <div class="block-element">
                    <h2 class="header">{{ 'title.items'|trans }}</h2>
                    <div id="collection-items" class="grid-container-items">
                        {% for item in results.items|naturalSorting %}
                            <div class="collection-item valign-wrapper resize-element" data-title="{{ item.name }}">
                                <a class="valign" href="{{ path('app_item_show', {'id': item.id}) }}">
                                    {{ macros.lazyImage(item.imageSmallThumbnail, 'aria.item'|trans({'%name%': item.name}), item.name) }}
                                </a>
                            </div>
                        {% endfor %}
                    </div>
                </div>
            {% endif %}

            {% if results.collections is defined and results.collections|length > 0 %}
                <div class="block-element">
                    <h2 class="header">{{ 'title.collections'|trans }}</h2>
                    <div class="collections grid-container-collections">
                        {{ include('App/Collection/_list.html.twig', {'collections': results.collections|naturalSorting}) }}
                    </div>
                </div>
            {% endif %}

            {% if results.wishlists is defined and results.wishlists|length > 0 %}
                <div class="block-element">
                    <h2 class="header">{{ 'title.wishlists'|trans }}</h2>
                    <div class="collections grid-container-collections">
                        {{ include('App/Wishlist/_list.html.twig', {'wishlists': results.wishlists|naturalSorting}) }}
                    </div>
                </div>
            {% endif %}

            {% if results.albums is defined and results.albums|length > 0 %}
                <div class="block-element">
                    <h2 class="header">{{ 'title.albums'|trans }}</h2>
                    <div class="collections grid-container-collections">
                        {{ include('App/Album/_list.html.twig', {'albums': results.albums|naturalSorting}) }}
                    </div>
                </div>
            {% endif %}


            {% if results.tags is defined and results.tags|length > 0 %}
                <div class="block-element">
                    <h2 class="header">{{ 'title.tags'|trans }}</h2>
                    <div>
                        <table class="centered striped">
                            <thead>
                            <tr>
                                <th>{{ 'label.name'|trans }}</th>
                                <th>{{ 'label.description'|trans }}</th>
                                <th>{{ 'label.number_of_items'|trans }}</th>
                                <th>{{ 'label.percent_of_items'|trans }}</th>
                            </tr>
                            </thead>

                            <tbody>
                            {% for result in results.tags %}
                                <tr class="list-element resize-element" data-title="{{ result.tag.label }}">
                                    <td><a href="{{ path('app_tag_show', {'id' : result.tag.id}) }}">{{ result.tag.label|u.truncate(50) }}</a></td>
                                    <td>{{ result.tag.description|u.truncate(50) }}</td>
                                    <td>{{ result.itemCount }}</td>
                                    <td>{{ result.percent|round(2, 'common') }} %</td>
                                </tr>
                            {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            {% endif %}
        {% else %}
            {{ 'message.search_empty'|trans }}
        {% endif %}
    </div>
{% endblock %}