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

{% set seo_title = 'Search Results' %}
{% set body_class = 'search-results' %}

{% block content %}
    <div class="container" data-component="search-results" data-search-results="{{ {liked_count: mySwatches.swatches|length }|json_encode|e('html_attr') }}">
        <h1 class="search-results-title">Search Results</h1>

        <div class="row">
            <div class="col-lg-9">
                {% set count = (swatches|length) %}
                {% if count == 0 %}
                    <div class="search-results-description"><strong>No swatches</strong> match your search criteria</div>
                {% elseif count == 1 %}
                    <div class="search-results-description"><strong>1 swatch</strong> matches your search criteria</div>
                {% else %}
                    <div class="search-results-description"><strong>{{ count }} swatches</strong> match your search criteria</div>
                {% endif %}
                <div class="search-results-my-swatches">
                    <span class="search-results-like-count"></span>
                    &nbsp;|&nbsp;
                    <strong><a href="{{ path('my_swatches_index') }}">View</a></strong>
                </div>

                <div class="search-results-gallery">
                    <div class="gallery" data-component="gallery">
                        {% for swatch in swatches %}
                            <div class="gallery-column">
                                {% include '_includes/gallery-item.html.twig' with {'show_collection': true} %}
                            </div>
                        {% endfor %}
                    </div>
                </div>

                <div class="search-results-refine">
                    <a href="{{ path('collections_search') }}" class="btn btn-primary btn-block btn-more">Refine search</a>
                </div>
            </div>
            <div class="col-lg-3 flex-lg-first hidden-md-down">
                {{ form_start(form, {'attr': {'class': 'sidebar'}}) }}
                    <h2 class="search-results-sidebar-title">Filter Swatches</h2>

                    {% for field in form.children %}
                        <div class="form-group search-results-filter{{ loop.first ? ' is-open' }}" data-component="search-results-filter">
                            <div class="form-label search-results-filter-toggle">
                                {% if field.vars.label == "Colour" and not is_texstyle_au() %}
                                    Color
                                {% else %}
                                    {{ field.vars.label }}
                                {% endif %}
                            </div>
                            <div class="search-results-filter-display"></div>
                            {% if field.children %}
                                <div class="form-checkables-stacked search-results-filter-fields">
                                    {% for child in field.children %}
                                        {{ form_widget(child) }}
                                    {% endfor %}
                                </div>
                            {% else %}
                                <div class="search-results-filter-fields">
                                    {{ form_widget(field) }}
                                </div>
                            {% endif %}
                        </div>
                    {% endfor %}

                    <button type="submit" class="btn btn-primary btn-block btn-more">Update search</button>
                {{ form_end(form) }}
            </div>
        </div>
    </div>
{% endblock %}