{% extends 'base.html' %}
{% load static i18n humanize widget_tweaks %}

{% block meta_title %}{{ page_title }}{% endblock meta_title %}
{% block meta_description %}{{ page_description }}{% endblock meta_description %}

{% block main %}
    <h1 class="sr-only">{{ page_title }}</h1>
    <form data-controller="search" data-turbo-frame="main" data-turbo-action="advance">
        <fieldset id="query">
            {% render_field form.q data-search-target="query" data-action="input->search#autoUpdateSort change->search#update" %}

            {# Translators: Search submit button #}
            {% translate 'Submit search' as search_label %}
            <button type="submit" aria-label="{{ search_label }}" />
        </fieldset>
        <a href="#filters" role="button" id="filters-button" data-action="click->search#openFilters"{% if form.filters_active %} class="active"{% endif %}>
            <svg><use xlink:href="{% static 'img/ui/all/all/search-filter-icon.svg' %}#filter-icon" /></svg>
            {% translate "Filters" %}
        </a>

        <fieldset id="filters" aria-expanded="false" data-search-target="filterModal">
            <a href="#" role="button" id="close-filters-modal" data-action="click->search#closeFilters">
                {# Translators: label for 'filters' close button for mobile navigation #}
                {% translate "Close filter options" as close_button %}
                <span class="sr-only">{{ close_button }}</span>
            </a>
            <a href="#" role="button" id="close-filters-button" data-action="click->search#closeFilters"{% if form.filters_active %} class="active"{% endif %}>
                <svg><use xlink:href="{% static 'img/ui/all/all/search-filter-icon.svg' %}#filter-icon" /></svg>
                {% translate "Filters" %}
            </a>
            <label for="{{ form.docdate.auto_id }}" class="date-range-label">
                <span>{{ form.docdate.label }}</span>
                {# NOTE: stimulus action is configured via django widget attrs #}
                {{ form.docdate }}
            </label>
            <label for="{{ form.has_image.auto_id }}">
                {% render_field form.has_image data-action="search#update" %}
                {{ form.has_image.label }}
            </label>
            <label for="{{ form.has_transcription.auto_id }}">
                {% render_field form.has_transcription data-action="search#update" %}
                {{ form.has_transcription.label }}
            </label>
            <label for="{{ form.has_translation.auto_id }}">
                {% render_field form.has_translation data-action="search#update" %}
                {{ form.has_translation.label }}
            </label>
            <label for="{{ form.has_discussion.auto_id }}">
                {% render_field form.has_discussion data-action="search#update" %}
                {{ form.has_discussion.label }}
            </label>
            <details class="doctype-filter" data-search-target="doctypeFilter">
                <summary data-action="click->search#toggleDoctypeFilter">
                    {{ form.doctype.label }}
                </summary>
                {% render_field form.doctype data-action="search#update" %}
            </details>
            <button type="submit" class="primary" data-action="click->search#applyFilters">
                {% translate "Apply" %}
            </button>
        </fieldset>

        <fieldset id="sort">
            <label for="{{ form.sort.html_name }}">
                {{ form.sort.label }}
            </label>
            {% render_field form.sort data-search-target="sort" data-action="input->search#update" %}
            {# caret icon for <select>; since we also have the select element, role=presentation #}
            <i class="ph-caret-down" role="presentation"></i>
        </fieldset>

        {% if form.errors %}
            <ul id="search-errors">
                {% for field, errors in form.errors.items %}
                    {# no clean way to get field labels here, so we just collapse the error lists #}
                    {% for error in errors %}
                        <li>{{ error }}</li>
                    {% endfor %}
                {% endfor %}
            </ul>
        {% endif %}
    </form>
    <section id="document-list">
        <h1>
            {% comment %}Translators: number of search results{% endcomment %}
            {% blocktranslate with count_humanized=paginator.count|intcomma count counter=paginator.count trimmed %}
                1 result
            {% plural %}
                {{ count_humanized }} total results
            {% endblocktranslate %}
        </h1>
        {% if is_paginated %}
            {% include "corpus/snippets/pagination.html" %}
        {% endif %}
        <ol>
            {% for document in documents %}
                {% include "corpus/snippets/document_result.html" %}
            {% endfor %}
        </ol>
        {% if is_paginated %}
            {% include "corpus/snippets/pagination.html" %}
        {% endif %}
    </section>
{% endblock main %}