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

{% block meta_title %}{{ page_title }}{% endblock meta_title %}
{% block meta_description %}{{ page_description }}{% endblock meta_description %}
{% block extrameta %}
    {# maptiler css #}
    <link rel="stylesheet" href="https://unpkg.com/maplibre-gl@4.1.0/dist/maplibre-gl.css" />
{% endblock extrameta %}

{% block main %}
    {{ search_opts|json_script:"search-opts" }}
    <form data-controller="search map" data-turbo-frame="main" data-page="person">
        <section id="map-container">
            <div
                id="map"
                data-map-target="map"
                data-maptiler-token="{{ maptiler_token }}"
            >
                <dl class="legend">
                    <dt>
                        {# translators: Accessibility label for regions icon #}
                        <svg class="marker region" aria-label="{% translate 'Map pin icon for regions' %}">
                            <use href="{% static 'img/ui/all/all/map-pin-region.svg' %}#pin" />
                        </svg>
                    </dt>
                    {# translators: Label for regions icon in map legend #}
                    <dd>{% translate "Region" %}</dd>
                    <dt>
                        {# translators: Accessibility label for places icon #}
                        <svg class="marker" aria-label="{% translate 'Map pin icon for other places' %}">
                            <use href="{% static 'img/ui/all/all/map-pin.svg' %}#pin" />
                        </svg>
                    </dt>
                    {# translators: Label for places icon in map legend #}
                    <dd>{% translate "Place" %}</dd>
                </dl>
                <ul data-map-target="placeMarkers"></ul>
            </div>
        </section>
        <section id="place-list" data-action="click@document->search#clickCloseDropdown">
            <div class="header-row">
                <h1>{{ page_title }}</h1>
                <i data-map-target="loading" class="ph ph-spinner-gap"></i>
            </div>
            <fieldset id="query">
                {% render_field form.q data-search-target="query" data-action="input->search#autoUpdateRadioSort change->search#update" %}

                {# Translators: Search submit button #}
                {% translate 'Submit search' as search_label %}
                <button type="submit" aria-label="{{ search_label }}"></button>
                <input type="checkbox" id="place-filters" data-search-target="placeFiltersCheckbox" />
                <label aria-label="{% translate "Filters" %}" for="place-filters" data-action="click->search#toggleFiltersOpen">
                    <svg><use xlink:href="{% static 'img/ui/all/all/search-filter-icon.svg' %}#filter-icon" /></svg>
                    {% if applied_filters %}
                        <span class="filter-count">{{ applied_filters|length }}</span>
                    {% endif %}
                </label>
            </fieldset>
            <fieldset id="date-filter" aria-expanded="false" data-search-target="filterModal">
                <label for="{{ form.date_range.auto_id }}" class="date-range-label">
                    <span class="fieldname">{{ form.date_range.label }}</span>
                    {% render_field form.date_range data-action="search#update keypress->search#preventEnterKeypress" data-search-target="dateRange" %}
                </label>
                {% if form.date_range.value.0 or form.date_range.value.1 %}
                    {# Translators: label for a button to clear the Places date filter #}
                    <button type="button" data-action="click->search#clearFilters"><span>{% translate "Clear" %}</span></button>
                {% endif %}
                {% with  min_year=form.date_range.field.widget.widgets.0.attrs.placeholder  max_year=form.date_range.field.widget.widgets.1.attrs.placeholder  %}
                    <div class="timeline" role="group" style="--a: {{ form.date_range.value.0|default:min_year }}; --b: {{ form.date_range.value.1|default:max_year }}; --min: {{ min_year }}; --max: {{ max_year }}">
                        <input id="a" type="range" min="{{ min_year }}" max="{{ max_year }}" value="{{ form.date_range.value.0|default:min_year }}" aria-label="{% translate "From year" %}" data-search-target="minYear" data-action="input->search#updateTimeline change->search#update">
                        <input id="b" type="range" min="{{ min_year }}" max="{{ max_year }}" value="{{ form.date_range.value.1|default:max_year }}" aria-label="{% translate "To year" %}" data-search-target="maxYear" data-action="input->search#updateTimeline change->search#update">
                        <div role="presentation" class="ticks" data-map-target="timelineTicks" data-min="{{ min_year }}" data-max="{{ max_year }}">
                            <svg width="100%" height="44" overflow="visible" shapeRendering="crispEdges"></svg>
                        </div>
                    </div>
                {% endwith %}
            </fieldset>
            <div class="header-row count-sort">
                <span data-map-target="count"></span>
                <fieldset id="sort-field">
                    <label for="{{ form.sort.auto_id }}">{{ form.sort.label }}</label>
                    <details data-search-target="dropdownDetails">
                        <summary>
                            <span>{{ form.get_sort_label|default:"Name" }}</span>
                        </summary>
                        <div id="sort-options" data-search-target="radioSort">
                            {% render_field form.sort data-action="search#update" %}
                            {% render_field form.sort_dir data-action="search#update" %}
                        </div>
                    </details>
                </fieldset>
            </div>
            <ul data-map-target="placeList"></ul>
        </section>
        <label id="mobile-mode-toggle" data-search-target="placesMode">
            <input type="checkbox" data-action="search#onToggleMap" />
            {# Translators: label for Places list mode button on mobile devices #}
            <span id="list-mode-label" data-map-target="countButton">{% translate 'List' %}</span>
            {# Translators: label for Places map mode button on mobile devices #}
            <span id="map-mode-label">{% translate 'Map' %}</span>
        </label>
    </form>
{% endblock %}