{% 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>{{ page_title }}</h1>
    <form data-controller="search" data-turbo-frame="main" data-turbo-action="advance" data-page="document">
        <fieldset id="query">
            <div id="mode-controls">
                <span class="fieldname">{{ form.mode.label }}</span>
                <dialog data-search-target="helpDialog">
                    {# Translators: heading for search mode help text #}
                    <h2>
                        <span>{% translate "How to Search" %}</span>
                        <button type="button" id="close-search-help" data-action="search#toggleHelpDialog">
                            {# Translators: accessibility label for button to close search mode help dialog #}
                            <span class="sr-only">{% translate "Close search mode help" %}</span>
                        </button>
                    </h2>
                    {% include "corpus/snippets/document_search_helptext.html" %}
                </dialog>
                <button type="button" id="search-help" data-action="search#toggleHelpDialog">
                    {# Translators: accessibility label for button to open search mode help dialog #}
                    <span class="sr-only">{% translate "Open search mode help" %}</span>
                </button>
                {% render_field form.mode data-action="change->search#update" %}
            </div>
            {# Translators: Search submit button #}
            {% translate 'Search' as search_label %}
            {% if request.GET.mode != 'regex' %}
                <div id="search-input">
                    {% render_field form.q data-search-target="query" data-action="input->search#autoUpdateSort change->search#update" %}

                    <button type="submit" aria-label="{{ search_label }}" />
                </div>
            {% endif %}
        </fieldset>
        {% if request.GET.mode == 'regex' %}
            <fieldset id="regex-search">
                {% render_field form.q data-search-target="query" data-action="input->search#autoUpdateSort change->search#update" %}

                {# translators: "in" label between search query form and field dropdown #}

                <label for="{{ form.regex_field.auto_id }}">
                    <span class="regex-label">{% translate 'in' %}</span>

                    <span class="sr-only">{{ form.regex_field.label }}</span>
                    {% render_field form.regex_field data-action="change->search#update" %}
                </label>

                {# Translators: Search submit button #}
                <button type="submit"><span>{{ search_label }}</span></button>

                {% if request.GET.regex_field == 'shelfmark' %}
                    <span class="shelfmark-help">
                        {# translators: help text for shelfmark regex search #}
                        {% blocktrans %}
                            Case sensitive, must match entire shelfmark. Type one shelfmark,
                            even if part of a join, for best results.
                        {% endblocktrans %}
                    </span>
                {% endif %}
            </fieldset>
        {% endif %}
        <div id="filters-header">
            <a href="#filters" role="button" id="filters-button" data-search-target="filtersButton" data-action="click->search#toggleFiltersOpen">
                <svg><use xlink:href="{% static 'img/ui/all/all/search-filter-icon.svg' %}#filter-icon" /></svg>
                <span>{% translate "Filters" %}</span>
                {% if applied_filters %}
                    <span class="filter-count">{{ applied_filters|length }}</span>
                {% endif %}
            </a>
            {% if applied_filters %}
                {# convenient unapply filter buttons; aria role set to presentation as functionality duplicated below #}
                <div id="applied-filters" role="presentation">
                    {% for filter in applied_filters %}
                        <button
                            data-field="{{ filter.field }}"
                            value="{{ filter.value }}"
                            data-action="click->search#unapplyFilter"
                        >
                            {{ filter.label }}
                            <i class="ph-x"></i>
                        </button>
                    {% endfor %}
                </div>
                <button id="clear-filters" data-action="click->search#clearFilters">
                    {# Translators: label for button to clear all applied filters #}
                    {% translate "Clear all" %}
                </button>
            {% endif %}
        </div>
        <div class="modal-backdrop" aria-hidden="true" data-action="click->search#closeFilters"></div>
        <fieldset id="filters" aria-expanded="false" data-search-target="filterModal">
            <legend>{% translate "Filters" %}</legend>
            <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>
            <div class="fieldset-left-column">
                <label for="{{ form.docdate.auto_id }}" class="docdate-range-label">
                    <span class="fieldname">{{ form.docdate.label }}</span>
                    {# NOTE: stimulus action is configured via django widget attrs #}
                    {{ form.docdate }}
                </label>
                <label for="{{ form.exclude_inferred.auto_id }}">
                    {% render_field form.exclude_inferred data-action="search#update" %}
                    <span>{{ form.exclude_inferred.label }}</span>
                    <div class="thumb" aria-hidden="true"></div>
                </label>
            </div>
            <fieldset class="includes-fields">
                <legend><span class="fieldname">{% translate "Includes" %}</span></legend>
                <ul>
                    <li>
                        <label for="{{ form.has_image.auto_id }}">
                            {% render_field form.has_image data-action="search#update" %}
                            {{ form.has_image.label }}
                        </label>
                    </li>
                    <li>
                        <label for="{{ form.has_transcription.auto_id }}">
                            {% render_field form.has_transcription data-action="search#update" %}
                            {{ form.has_transcription.label }}
                        </label>
                    </li>
                    <li>
                        <label for="{{ form.has_translation.auto_id }}" class="has-translation-label">
                            {% render_field form.has_translation data-action="search#update" %}
                            {{ form.has_translation.label }}
                        </label>
                        <label for="{{ form.translation_language.auto_id }}">
                            <span class="sr-only">{{ form.translation_language.label }}</span>
                            {% render_field form.translation_language data-action="search#update" %}
                        </label>
                    </li>
                    <li>
                        <label for="{{ form.has_discussion.auto_id }}">
                            {% render_field form.has_discussion data-action="search#update" %}
                            {{ form.has_discussion.label }}
                        </label>
                    </li>
                </ul>
            </fieldset>
            <label for="{{ form.doctype.auto_id }}">
                <span class="fieldname">{{ form.doctype.label }}</span>
                {% render_field form.doctype data-action="search#update" %}
            </label>
            {# hidden input, accessible from admin or by URL params #}
            {% if form.no_transcription.value %}
                {# only render if set to prevent polluting params #}
                {% render_field form.no_transcription %}
            {% endif %}
        </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 %}
        <section id="document-list">
            <div class="header-row">
                <h2>
                    {# Translators: search results section header #}
                    {% translate "Results" %}
                </h2>
                <span class="result-count">
                    {% comment %}Translators: number of search results{% endcomment %}
                    {% blocktranslate with count_humanized=paginator.count|intcomma count counter=paginator.count trimmed %}
                        1 result
                    {% plural %}
                        {{ count_humanized }} results
                    {% endblocktranslate %}
                </span>
                <fieldset id="sort-field">
                    <label for="{{ form.sort.html_name }}">{{ form.sort.label }}</label>
                    {% render_field form.sort id="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>
            </div>
            <ol>
                {% for document in documents %}
                    {% include "corpus/snippets/document_result.html" %}
                {% endfor %}
            </ol>
            {% if is_paginated %}
                {% include "corpus/snippets/pagination.html" %}
            {% endif %}
            {% if apd_link %}
                <a id="apd" href="{{ apd_link }}">
                    {# translators: Link to search a document query on the Arabic Papyrology Database #}
                    {% translate 'View results in the Arabic Papyrology Database' %}
                </a>
            {% endif %}
        </section>
    </form>
{% endblock main %}