{% trans_default_domain 'contao_default' %}

{% set search_container_attributes = attrs()
    .set('data-controller', 'contao--backend-search')
    .set('data-contao--backend-search-url-value', path('_contao_backend_search.stream'))
    .set('data-contao--backend-search-min-characters-value', 3)
    .set('data-contao--backend-search-debounce-delay-value', 300)
    .set('data-action', 'keydown.ctrl+k@window->contao--backend-search#shortcutOpen:!macos keydown.meta+k@window->contao--backend-search#shortcutOpen:macos click@document->contao--backend-search#close keydown.esc@document->contao--backend-search#close')
    .set('data-contao--backend-search-hidden-class', 'search--hidden')
    .set('data-contao--backend-search-initial-class', 'search--initial')
    .set('data-contao--backend-search-loading-class', 'search--loading')
    .set('data-contao--backend-search-invalid-class', 'search--invalid')
    .set('data-contao--backend-search-results-class', 'search--results')
    .set('data-contao--backend-search-error-class', 'search--error')
    .set('data-contao--backend-search-shortcut-label-value', 'MSC.searchShortcut'|trans)
    .set('data-contao--backend-search-shortcut-macos-label-value', 'MSC.searchShortcutMacos'|trans)
    .addClass(['backend-search', 'search--hidden'])
    .mergeWith(search_container_attributes|default)
%}
<div {{ search_container_attributes }}>
    <div class="backend-search_overlay"></div>
    <div class="backend-search_inner">
        {# Input field #}
        <label>
            <span class="invisible">{{ 'MSC.search'|trans }}</span>
            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24">
                <circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/>
            </svg>

            {% set search_input_attributes = attrs()
                .addClass('tl_text')
                .set('autocomplete', 'off')
                .set('placeholder', 'MSC.search'|trans)
                .set('name', 'keywords')
                .set('data-contao--backend-search-target', 'input')
                .set('data-action', 'input->contao--backend-search#search focus->contao--backend-search#open blur->contao--backend-search#close')
            %}
            <input id="backend-search" type="text" {{ search_input_attributes }}>
        </label>
        <kbd{{ attrs().addClass('search-shortcut').set('data-contao--backend-search-target', 'shortcut') }}></kbd>

        <div class="backend-search_results-container">
            {# Messages #}
            <span class="backend-search_message search-message--placeholder">{{ 'MSC.searchResultsPlaceholder'|trans }}</span>
            <span class="backend-search_message search-message--invalid">{{ 'MSC.searchResultsMin'|trans([search_container_attributes['data-contao--backend-search-min-characters-value']]) }}</span>
            <span class="backend-search_message search-message--loading">{{ 'MSC.searchResultsLoading'|trans }}</span>
            <span class="backend-search_message search-message--error">{{ 'ERR.general'|trans }}</span>

            {# Results #}
            <div class="backend-search_results-grid">
                <div class="backend-search_facets">
                    <div id="backend-search--facet-types" class="backend-search_facet_types"></div>
                    <div id="backend-search--facet-tags" class="backend-search_facet_tags"></div>
                </div>
                <div id="backend-search--results" class="backend-search_results" data-contao--backend-search-target="results"></div>
            </div>

        </div>
    </div>
</div>
