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

<t t-name="web_enterprise.Legacy.SearchPanel.Mobile" owl="1">
    <!-- Mobile search -->
    <t t-portal="'body'" t-if="state.showMobileSearch">
        <div class="o_search_panel o_searchview o_mobile_search">
            <div class="o_mobile_search_header">
                <button type="button" class="o_mobile_search_button btn"
                    t-on-click="() => this.state.showMobileSearch = false"
                    >
                    <i class="fa fa-arrow-left"/>
                    <strong class="ml8">FILTER</strong>
                </button>
            </div>
            <div class="o_mobile_search_content">
                <t t-call="web.Legacy.SearchPanel"/>
            </div>
            <button type="button" class="btn btn-primary o_mobile_search_footer"
                t-on-click.stop="() => this.state.showMobileSearch = false"
                >
                <t>SEE RESULT</t>
            </button>
        </div>
    </t>
    <!-- Summary header -->
    <button
        t-else=""
        class="o_search_panel o_search_panel_summary btn w-100 overflow-visible"
        t-on-click="() => this.state.showMobileSearch = true"
        >
        <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="">
                    <span t-foreach="categories" t-as="category" t-key="category.id"
                        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>
                    <span t-foreach="filters" t-as="filter" t-key="filter.id"
                        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>
            </div>
        </div>
    </button>
</t>

</templates>
