{% extends "base-manager.htm" %}
{% load i18n %}
{% load template_tags %}
{% load static %}

{% block title %} {{ block.super }} {% trans "Search" %} {% endblock title %}

{% block main_content %}
    <article class="main-search-container content-panel flexrow" data-bind="click:function() { menuActive(false); }, visible: true", style="display:none;" aria-label="{% trans 'Search page contents' %}">
        <section class="flex search-results-panel" aria-label="{% trans 'Search results' %}">
            <div class="search-attribute-widget">
                <div class="search-dropdown" data-bind="component: {
                    name: 'term-filter',
                    params: sharedStateObject
                }"></div>

                <!-- Inline Filters (for QA and Resource Type) -->
                <div class="search-inline-filters">
                    <!--ko if: sharedStateObject.userIsReviewer-->
                        <div class="qa-filter" data-bind="component: {
                            name: 'provisional-filter',
                            params: sharedStateObject
                        }"></div>
                    <!--/ko-->
                    <div class="resource-filter" data-bind="component: {
                        name: 'resource-type-filter',
                        params: sharedStateObject
                    }"></div>
                </div>
            </div>
            <div class="search-tools-container">
                <div class="search-tools-item">
                    <!-- Result Count and ordering Block -->
                    <div class="search-count-container">
                        <p class="search-title" aria-live="assertive" data-bind="text: $root.translations.shownTotalSearchResults(hits(), total())"></p>
                    </div>
                </div>
                <div class="search-tools-item">
                    <div class="search-controls-container">
                        <!--ko if: ko.unwrap(sharedStateObject.filterApplied) -->
                        <button class="btn-sm btn btn-mint btn-labeled clear-filter" data-bind="click: function() {sharedStateObject.clearQuery();}"><span>{% trans "Clear Filters" %}</span></button>
                        <!--/ko-->
                        <div data-bind="component: {
                            name: 'sort-results',
                            params: sharedStateObject
                        }"></div>
                    </div>
                </div>
            </div>

            <div class="search-control-container" data-bind="css: { 'slide': !sharedStateObject.resultsExpanded() }">
                <!-- Results Block -->
                <div class="search-results-container">
                    <div data-bind="component: {
                        name: 'search-results',
                        params: sharedStateObject
                    }"></div>
                </div>

                <div class="search-footer" data-bind="component: {
                        name: 'paging-filter',
                        params: sharedStateObject
                    }"></div>
            </div>
        </section>

        <section class="flex search-map-container" aria-label="{% trans 'Map and filters' %}">
            <!-- Title Block -->
            <div class="search-toolbar">
                <div class="search-type-btn-panel" data-bind="foreach: {data: sharedStateObject.filtersList, as: 'filter'}" role="tablist">
                    <!-- ko if: filter.type === 'filter' && filter.enabled -->
                    {% if user_can_read %}
                    <button class="search-type-btn relative" role="tab" data-bind="onEnterkeyClick, onSpaceClick,
                        css: {'active': $parent.sharedStateObject.selectedTab() === filter.componentname}, 
                        click: function(){
                            $parent.sharedStateObject.selectedTab(filter.componentname); 
                            $root.shiftFocus('#' + filter.componentname + '-tabpanel');
                        },
                        attr: {
                            'aria-selected': ($parent.sharedStateObject.selectedTab() === filter.componentname).toString(), 
                            'aria-controls': filter.componentname + '-tabpanel'
                        }                  
                    ">
                        <i data-bind="css: filter.icon"></i>
                        <span data-bind="text: filter.name"></span>
                    </button>
                    {% endif %}
                    <!-- /ko -->
                </div>

                <div class="search-type-btn-popup-panel">
                    <div class="popup-panel-row" data-bind="foreach: {data: sharedStateObject.filtersList, as: 'filter'}" role="tablist">
                        <!-- ko if: filter.type === 'popup' && filter.enabled -->
                        {% if user_can_read %}
                        <button class="saved-search-container search-type-btn-popup relative" role="tab" data-bind="onEnterkeyClick, onSpaceClick,
                            css: {'active': $parent.sharedStateObject.selectedPopup() === filter.componentname}, 
                            click: function(data, event){
                                $parent.sharedStateObject.selectPopup(filter.componentname); 
                                $root.handleEscKey(
                                    event.currentTarget,
                                    '#' + filter.componentname + '-popup-tabpanel',
                                    '#' + filter.componentname + '-close-btn'
                                );
                            },
                            attr: {
                                id: filter.componentname + '-open-btn',
                                'aria-expanded': ($parent.sharedStateObject.selectedPopup() === filter.componentname).toString(),
                                'aria-label': filter.name,
                                'aria-controls': filter.componentname + '-popup-tabpanel'
                            }
                        ">
                            <div data-placement="auto" data-toggle="tooltip" 
                                data-bind="attr: {'data-original-title': filter.name}
                            ">
                                <i data-bind="css: filter.icon"></i>
                                <p data-bind="text: filter.name"></p>
                            </div>
                        </button>
                        {% endif %}
                        <!-- /ko -->
                    </div>
                </div>
            </div>

            <div class="flex">
                <!-- Card Container -->
                <div class="card-form-preview-container relative">
                    <div class="tab-content relative" data-bind="foreach: {data: sharedStateObject.filtersList, as: 'filter'}">
                        <!-- ko if: filter.type === 'filter' && filter.enabled -->
                        <div class="tab-pane" role="tabpanel" tabindex="-1" data-bind="css: {'active': $parent.sharedStateObject.selectedTab() === filter.componentname}, 
                            attr: {
                                id: filter.componentname + '-tabpanel',
                                'aria-label': filter.name,
                            },
                        ">
                            <div class="tab-content-component" data-bind="component: {
                                name: filter.componentname,
                                params: $parent.sharedStateObject
                            }"></div>
                        </div>
                        <!-- /ko -->
                    </div>

                    <div class="tab-content search-popup-panel" data-bind="foreach: {data: sharedStateObject.filtersList, as: 'filter'}, visible: sharedStateObject.selectedPopup() !== ''">
                        <!-- ko if: filter.type === 'popup' && filter.enabled -->
                        <div class="tab-pane" role="tabpanel" tabindex="-1" data-bind="css: {'active': $parent.sharedStateObject.selectedPopup() === filter.componentname}, 
                            attr: {
                                id: filter.componentname + '-popup-tabpanel',
                                'aria-label': filter.name,
                            },
                        ">
                            <div data-bind="component: {
                                name: filter.componentname,
                                params: $parent.sharedStateObject
                            }"></div>
                        </div>
                        <!-- /ko -->
                    </div>
                </div>
            </div>
        </section>
    </article>
{% endblock main_content %}

{% block pre_require_js %}
{{block.super}}
{% endblock pre_require_js %}
