<?xml version="1.0" encoding="UTF-8"?>
<templates id="template" xml:space="preserve">

<t t-name="web.SearchPanel">
    <t t-if="env.isSmall">
        <t t-call="web.SearchPanel.Small" />
    </t>
    <t t-else="">
        <t t-call="web.SearchPanel.Regular" />
    </t>
</t>

<t t-name="web.SearchPanelContent">
    <div class="o_search_panel flex-grow-0 flex-shrink-0 h-100 pb-5 bg-view overflow-auto"
         t-att-class="env.searchModel.searchPanelInfo.className"
         t-attf-class="#{env.isSmall ? 'px-3' : 'pe-1 ps-3'}"
         t-ref="root">
        <div t-if="!sections or sections.length === 0" class="o_search_panel_empty_state me-3">
            <button class="btn w-100 overflow-visible">
                <div class="d-flex align-items-center me-2 ms-auto">All</div>
            </button>
        </div>
        <section t-foreach="sections" t-as="section" t-key="section.id"
            t-attf-class="o_search_panel_section o_search_panel_{{ section.type }}"
            >
            <header class="o_search_panel_section_header pt-4 pb-2 text-uppercase cursor-default">
                <i t-attf-class="fa {{ section.icon }} o_search_panel_section_icon {{!section.color &amp;&amp; section.type == 'filter' ? 'text-warning' : !section.color ? 'text-primary': ''}} me-2"
                    t-att-style="section.color and ('color: ' + section.color)"
                />
                <b t-esc="section.description"/>
            </header>
            <div t-if="section.errorMsg" class="alert alert-warning">
                <span><t t-esc="section.errorMsg"/></span>
            </div>
            <ul t-else="" class="list-group d-block o_search_panel_field">
                <t t-if="section.type === 'category'" t-call="{{ constructor.subTemplates.category }}">
                    <t t-set="values" t-value="section.rootIds"/>
                </t>
                <t t-elif="section.groups">
                    <li
                        t-foreach="section.sortedGroupIds" t-as="groupId" t-key="groupId"
                        class="o_search_panel_filter_group list-group-item p-0 border-0"
                        t-att-class="groupId_last? 'mb-0' : 'mb-3'"
                        >
                        <!-- TODO: this is a workaround for issue https://github.com/odoo/owl/issues/695 (remove when solved) -->
                        <t t-set="_section" t-value="section"/>
                        <t t-set="group" t-value="section.groups.get(groupId)"/>
                        <header class="o_search_panel_group_header pb-1">
                            <div class="form-check w-100">
                                <!-- TODO: "indeterminate" could not be set in the template and had to be set in
                                    JS manually. See https://github.com/odoo/owl/issues/713 (adapt when solved)
                                -->
                                <input type="checkbox"
                                    class="form-check-input"
                                    t-attf-id="{{ section.id }}_input_{{ groupId }})"
                                    t-on-click="() => this.toggleFilterGroup(section.id, group)"
                                />
                                <label
                                    t-attf-for="{{ section.id }}_input_{{ groupId }})"
                                    class="o_search_panel_label form-check-label d-flex align-items-center justify-content-between w-100 cursor-pointer"
                                    t-att-class="{ o_with_counters: group.enableCounters }"
                                    t-att-title="group.tooltip or false"
                                    >
                                    <span class="o_search_panel_label_title text-truncate"
                                          t-attf-class="{{ group.color_index ? 'o_tag o_badge badge rounded-pill o_tag_color_' + group.color_index : ''}}">
                                        <t t-esc="group.name"/>
                                    </span>
                                </label>
                            </div>
                        </header>
                        <ul class="list-group d-block">
                            <t t-call="{{ constructor.subTemplates.filtersGroup }}">
                                <t t-set="values" t-value="group.values"/>
                                <t t-set="isChildList" t-value="true"/>
                                <!-- TODO: this is a workaround for issue https://github.com/odoo/owl/issues/695 (remove when solved) -->
                                <t t-set="section" t-value="_section"/>
                            </t>
                        </ul>
                    </li>
                    <ul t-if="section.groups.get(false)" class="list-group d-block">
                        <t t-call="{{ constructor.subTemplates.filtersGroup }}">
                            <t t-set="group" t-value="section.groups.get(false)"/>
                            <t t-set="values" t-value="group.values"/>
                            <!-- TODO: this is a workaround for issue https://github.com/odoo/owl/issues/695 (remove when solved) -->
                            <t t-set="section" t-value="section"/>
                        </t>
                    </ul>
                </t>
                <t t-else="" t-call="{{ constructor.subTemplates.filtersGroup }}">
                    <t t-set="values" t-value="section.values"/>
                </t>
            </ul>
        </section>
    </div>
</t>

<t t-name="web.SearchPanel.Regular" t-inherit="web.SearchPanelContent" t-inherit-mode="primary"/>

<t t-name="web.SearchPanel.Small">
    <t t-if="state.showMobileSearch">
        <t t-portal="'body'">
            <div class="o_search_panel o_searchview o_mobile_search" t-ref="root">
                <div class="o_mobile_search_header">
                    <button type="button"
                        class="o_mobile_search_button btn"
                        t-on-click="() => state.showMobileSearch = false"
                    >
                        <i class="oi oi-arrow-left" />
                        <strong class="ms-2">FILTER</strong>
                    </button>
                </div>
                <div class="o_mobile_search_content">
                    <t t-call="web.SearchPanelContent" />
                </div>
                <button type="button"
                    class="btn btn-primary o_mobile_search_footer"
                    t-on-click.stop="() => state.showMobileSearch = false"
                >
                    <t>SEE RESULT</t>
                </button>
            </div>
        </t>
    </t>
    <!-- Summary header -->
    <t t-else="">
        <button
            class="o_search_panel o_search_panel_summary btn w-100 overflow-visible"
            t-on-click="() => state.showMobileSearch = true"
            t-ref="root"
            >
            <t t-set="categories" t-value="getCategorySelection()" />
            <t t-set="filters" t-value="getFilterSelection()" />
            <div class="d-flex align-items-center">
                <i class="fa fa-fw fa-filter" />
                <div class="o_search_panel_current_selection text-truncate ms-2 me-auto">
                    <t t-if="!categories.length and !filters.length">All</t>
                    <t t-else="">
                        <t t-foreach="categories" t-as="category" t-key="category.id">
                            <span class="o_search_panel_category me-1">
                                <i t-if="category.icon"
                                    t-attf-class="o_search_panel_section_icon fa {{ category.icon }} me-1"
                                    t-att-style="category.color and ('color: ' + category.color)"
                                />
                                <t t-esc="category.values.join('/')" />
                            </span>
                        </t>
                        <t t-foreach="filters" t-as="filter" t-key="filter.id">
                            <span class="o_search_panel_filter me-1">
                                <i t-if="filter.icon"
                                    t-attf-class="o_search_panel_section_icon fa {{ filter.icon }} me-1"
                                    t-att-style="filter.color and ('color: ' + filter.color)"
                                />
                                <t t-esc="filter.values.join(', ')" />
                            </span>
                        </t>
                    </t>
                </div>
            </div>
        </button>
    </t>
</t>

<t t-name="web.SearchPanel.Category">
    <t t-foreach="values" t-as="valueId" t-key="valueId">
        <t t-set="value" t-value="section.values.get(valueId)"/>
        <li class="o_search_panel_category_value list-group-item py-1 cursor-pointer border-0 pe-0"
            t-att-class="isChildList ? 'o_treeEntry' : 'ps-0'"
            >
            <header
                class="list-group-item list-group-item-action d-flex align-items-center px-0 py-lg-0 border-0"
                t-att-class="{'active text-900 fw-bold': state.active[section.id] === valueId}"
                t-on-click="() => this.toggleCategory(section, value)"
                >
                <div
                    class="o_search_panel_label d-flex align-items-center overflow-hidden w-100 cursor-pointer mb-0"
                    t-att-class="{'o_with_counters': section.enableCounters }"
                    >
                    <button class="o_toggle_fold btn p-0 flex-shrink-0 text-center">
                        <i
                            t-if="value.childrenIds.length"
                            class="fa"
                            t-att-class="{
                                'fa-caret-down' : state.expanded[section.id][valueId],
                                'fa-caret-right':  !state.expanded[section.id][valueId]
                            }"
                            />
                    </button>
                    <span
                        class="o_search_panel_label_title text-truncate"
                        t-att-class="{'fw-bold' : value.bold}"
                        t-esc="value.display_name"
                        t-att-data-tooltip="value.display_name"
                        />
                </div>
                <small t-if="section.enableCounters and value.__count gt 0"
                    class="o_search_panel_counter text-muted mx-2 fw-bold"
                    t-esc="value.__count"
                />
            </header>
            <ul t-if="value.childrenIds.length and state.expanded[section.id][valueId]"
                class="list-group d-block"
                >
                <t t-call="{{ constructor.subTemplates.category }}">
                    <t t-set="values" t-value="value.childrenIds"/>
                    <t t-set="isChildList" t-value="true"/>
                </t>
            </ul>
        </li>
    </t>
</t>

<t t-name="web.SearchPanel.FiltersGroup">
    <li t-foreach="[...values.keys()]" t-as="valueId" t-key="valueId"
        class="o_search_panel_filter_value list-group-item p-0 mb-1 border-0 cursor-pointer"
        t-att-class="{ 'ps-2' : isChildList }"
        >
        <t t-set="value" t-value="values.get(valueId)"/>
        <div class="form-check w-100">
            <input type="checkbox"
                t-attf-id="{{ section.id }}_input_{{ valueId }}"
                t-att-checked="state.active[section.id][valueId]"
                class="form-check-input"
                t-on-click="ev => this.toggleFilterValue(section.id, valueId, ev)"
            />
            <label class="o_search_panel_label form-check-label d-flex align-items-center justify-content-between w-100 cursor-pointer"
                t-attf-for="{{ section.id }}_input_{{ valueId }}"
                t-att-title="(group and group.tooltip) or false">
                <span class="o_search_panel_label_title text-truncate" t-esc="value.display_name"/>
                <span t-if="section.enableCounters and value.__count gt 0"
                    class="o_search_panel_counter text-muted mx-2 small"
                    t-esc="value.__count"
                />
            </label>
        </div>
    </li>
</t>

</templates>
