{% set ns = namespace(primary_navigation_links = {}) %}
{% for entity_type_configuration in project.configuration.entity_types.values() | selectattr('generate_html_list') %}
    {% set entity_type = project.entity_type_repository.get(entity_type_configuration.id) %}
    {% set entity_type_label -%}
        {% if entity_type.plugin_id() == 'event' %}
            {% trans %}Timeline{% endtrans %}
        {% else %}
            {{ entity_type.plugin_label_plural() | localize }}
        {% endif %}
    {%- endset %}
    {% do ns.primary_navigation_links.update({entity_type | url: entity_type_label}) %}
{% endfor %}

<div class="background-embellished" data-bs-theme="dark-secondary">
    <div class="container">
        <nav class="d-flex gap-2">
            <div class="d-flex flex-column flex-grow-1">
                <div class="d-flex gap-1">
                    <img src="{{ ('betty-static:///logo' ~ project.logo.suffix) | url }}" alt="{% trans project_title = project.configuration.title | localize %}The '{{ project_title }}' logo{% endtrans %}" class="header-site-logo">
                    <a class="flex-grow-1 header-site-title no-link" href="{{ 'betty:///index.html' | url }}" title="{% trans %}Go to the front page{% endtrans %}">
                        {{ project.configuration.title | localize }}
                    </a>
                </div>
                <div class="d-none d-md-block">
                    <ul class="d-flex gap-1 header-primary-navigation justify-content-end list-unstyled m-0">
                        {% for entity_type_url, entity_type_label in ns.primary_navigation_links.items() %}
                            <li>
                                <a href="{{ entity_type_url }}">{{ entity_type_label }}</a>
                            </li>
                        {% endfor %}
                        {% for link in primary_navigation_links %}
                            <li>
                                <a href="{{ link.url | url }}">{{ link.label | localize | html_lang }}</a>
                            </li>
                        {% endfor %}
                    </ul>
                </div>
            </div>
            <button class="btn btn-primary d-none d-md-inline header-entry-point header-entry-point-language" type="button"
                    data-bs-toggle="modal"
                    data-bs-target="#nav-language"
                    aria-controls="nav-language" aria-expanded="false" aria-label="{% trans %}Toggle translations{% endtrans %}">
                {% trans %}Translations{% endtrans %}
            </button>
            <button class="btn btn-primary d-none d-md-inline header-entry-point header-entry-point-search" type="button"
                    data-bs-toggle="modal"
                    data-bs-target="#nav-search"
                    aria-controls="nav-search" aria-expanded="false" aria-label="{% trans %}Toggle search{% endtrans %}">
                {% trans %}Search{% endtrans %}
            </button>
            <button class="btn btn-primary d-block d-md-none header-entry-point header-entry-point-menu" type="button"
                    data-bs-toggle="modal"
                    data-bs-target="#nav-menu"
                    aria-controls="nav-menu" aria-expanded="false" aria-label="{% trans %}Toggle menu{% endtrans %}">
                {% trans %}Menu{% endtrans %}
            </button>
        </nav>
    </div>
</div>
<div id="nav-menu" class="modal">
    <div class="modal-dialog modal-sm modal-fullscreen-md-down">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">{% trans %}Menu{% endtrans %}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{% trans %}Close{% endtrans %}"></button>
            </div>
            <nav class="modal-body">
                <div class="d-flex gap-2">
                    <ul class="flex-grow-1 list-unstyled text-center">
                        {% for entity_type_url, entity_type_label in ns.primary_navigation_links.items() %}
                            <li class="h6">
                                <a href="{{ entity_type_url }}">{{ entity_type_label }}</a>
                            </li>
                        {% endfor %}
                    </ul>
                    <button class="btn btn-primary header-entry-point header-entry-point-language" type="button"
                            data-bs-toggle="modal"
                            data-bs-target="#nav-language"
                            aria-controls="nav-language" aria-expanded="false" aria-label="{% trans %}Toggle translations{% endtrans %}">
                        {% trans %}Translations{% endtrans %}
                    </button>
                    <button class="btn btn-primary header-entry-point header-entry-point-search" type="button"
                            data-bs-toggle="modal"
                            data-bs-target="#nav-search"
                            aria-controls="nav-search" aria-expanded="false" aria-label="{% trans %}Toggle search{% endtrans %}">
                        {% trans %}Search{% endtrans %}
                    </button>
                </div>
            </nav>
        </div>
    </div>
</div>
<div id="nav-language" class="modal">
    <div class="modal-dialog modal-sm modal-fullscreen-md-down">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">{% trans %}Language{% endtrans %}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{% trans %}Close{% endtrans %}"></button>
            </div>
            <nav class="modal-body">
                <ul class="list-unstyled text-center">
                    {% set ns = namespace(available_locales = []) %}
                    {% for available_locale_configuration in project.configuration.locales.values() %}
                        {% set available_locale_data = available_locale_configuration.alias | locale_get_data %}
                        {% do ns.available_locales.append((available_locale_configuration.locale, available_locale_data.get_display_name())) %}
                    {% endfor %}
                    {% for available_locale, available_locale_name in ns.available_locales | sort(attribute='1') %}
                        <li class="h6 header-nav-link">
                            <a href="{{ page_resource | url(locale=available_locale) }}" hreflang="{{ available_locale }}" lang="{{ available_locale }}" rel="alternate">{{ available_locale_name }}</a>
                        </li>
                    {% endfor %}
                </ul>
            </nav>
        </div>
    </div>
</div>
<div id="nav-search" class="modal">
    <div class="modal-dialog modal-fullscreen">
        <div class="modal-content">
            <div class="modal-header">
                <h2 class="h1 modal-title">{% trans %}Search{% endtrans %}</h2>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{% trans %}Close{% endtrans %}"></button>
            </div>
            <div class="modal-body px-0" tabindex="-1">
                <div class="container">
                    {% set entity_type_ids = ['file', 'person', 'place', 'source'] %}
                    {% set ns = namespace(
                        filter_entity_type_checkboxes = [],
                        filter_entity_type_html_ids = {}
                    ) %}
                    {% for entity_type_id in entity_type_ids %}
                        {% set entity_type_html_id = 'betty-search-form-filter-entity-type--' + entity_type_id %}
                        {% do ns.filter_entity_type_checkboxes.append({
                            'checked': true,
                            'class': ['search-form-filter-entity-type'],
                            'id': entity_type_html_id,
                            'label': project.entity_type_repository.get(entity_type_id).plugin_label() | localize,
                            'value': entity_type_id,
                        }) %}
                        {% do ns.filter_entity_type_html_ids.setdefault(entity_type_html_id, entity_type_id) %}
                    {% endfor %}
                    <form id="search-form" data-betty-search-form-index="{{ 'betty:///search-index.json' | url }}" data-betty-search-form-filter-entity-type="{{ ns.filter_entity_type_html_ids | json }}">
                        <div class="align-items-end d-flex gap-2">
                            <div class="flex-grow-1 form-control-text">
                                <label for="search-form-query" class="form-label">{% trans %}Keywords{% endtrans %}</label>
                                <input type="text" class="form-control" id="search-form-query">
                            </div>
                            <div>
                                {% with button_label = _('Search') %}
                                    {% include 'component/submit.html.j2' %}
                                {% endwith %}
                            </div>
                        </div>
                        <div class="mt-3 row">
                            <div class="col col-12 col-md-4 col-lg-3">
                                <h3 class="h2 section-heading">{% trans %}Filters{% endtrans %}</h3>
                                {% set search_form_filter_entity_type %}
                                    {% with checkboxes = ns.filter_entity_type_checkboxes,
                                        checkboxes_label = _('Entity type'),
                                        checkboxes_label_visually_hidden = true
                                    %}
                                        {% include 'component/checkboxes.html.j2' %}
                                    {% endwith %}
                                {% endset %}
                                {% with accordion_heading_element = 'h4',
                                    accordion_heading_class = 'h3',
                                    accordion_id = 'search-filters',
                                    accordion_items = [
                                        {
                                            'header': _('Entity type'),
                                            'body': search_form_filter_entity_type,
                                        },
                                    ],
                                    html_class = ['mt-2']
                                %}
                                    {% include 'component/accordion.html.j2' %}
                                {% endwith %}
                                {% with button_label = _('Reset'),
                                    button_secondary = True,
                                    html_class = ['mt-3'],
                                    html_id = 'search-form-filter-reset'
                                %}
                                    {% include 'component/button.html.j2' %}
                                {% endwith %}
                            </div>
                            <div class="col col-12 col-md-8 col-lg-9 mt-3 mt-md-0">
                                <div id="search-results-container"></div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
