<?xml version="1.0" encoding="UTF-8"?>

<templates id="template" xml:space="preserve">
    <t
        t-name="account.ProductCatalogSearchPanelContent"
        t-inherit="web.SearchPanelContent"
        t-inherit-mode="primary"
    >
        <section position="before">
            <section t-if="showSections" class="o_search_panel_sections mt-5">
                <header class="d-flex align-items-center cursor-default gap-2 mb-3">
                    <i class="fa fa-filter"/>
                    <span class="text-uppercase fw-bold">Sections</span>
                    <div class="d-flex align-items-center ms-auto">
                        <span class="me-2">Filter</span>
                        <div class="form-check form-switch mb-0">
                            <input
                                class="form-check-input"
                                type="checkbox"
                                role="switch"
                                t-att-checked="selectedSection.filtered ? true : false"
                                t-on-click="() => this.setSelectedSection(
                                    selectedSection.sectionId, !selectedSection.filtered
                                )"
                            />
                        </div>
                    </div>
                </header>
                <ul class="list-group d-block">
                    <li
                        draggable="true"
                        t-foreach="this.state.sections.keys()"
                        t-as="sectionId"
                        t-key="sectionId"
                        t-att-class="'list-group-item p-0 mb-1 border-0 cursor-pointer ' + (
                            selectedSection.sectionId == sectionId ? 'o_selected_section' : ''
                        )"
                        t-on-dragstart="(e) => onDragStart(sectionId, e)"
                        t-on-dragover="(e) => onDragOver(e)"
                        t-on-drop="(e) => this.onDrop(sectionId, e)"
                    >
                        <div class="d-flex align-items-center">
                            <t t-set="section" t-value="this.state.sections.get(sectionId)"/>
                            <span
                                t-if="sectionId"
                                class="o_row_handle oi oi-draggable ui-sortable-handle"
                            />
                            <i
                                t-else=""
                                class="fa fa-pencil"
                                t-on-click="() => this.enableSectionInput('top')"
                            />
                            <input
                                t-if="sectionId === false and this.state.isAddingSection === 'top'"
                                class="ms-2 o_section_input"
                                type="text"
                                t-model="this.state.newSectionName"
                                t-on-keydown="onSectionInputKeydown"
                                t-on-blur="createSection"
                            />
                            <div
                                t-else=""
                                class="w-100 ms-2 d-flex align-items-center justify-content-between overflow-hidden"
                                t-on-click="() => this.setSelectedSection(
                                    sectionId, selectedSection.filtered
                                )"
                                t-att-title="section.name"
                            >
                                <span class="o_section_name text-truncate" t-out="section.name"/>
                                <span class="mx-2 text-muted" t-out="section.line_count"/>
                            </div>
                        </div>
                    </li>
                </ul>
                <input
                    t-if="this.state.isAddingSection === 'bottom'"
                    class="o_section_input py-1"
                    type="text"
                    placeholder="Enter a description"
                    t-model="this.state.newSectionName"
                    t-on-keydown="onSectionInputKeydown"
                    t-on-blur="createSection"
                />
                <button
                    t-else=""
                    class="btn btn-link px-0 py-1"
                    type="button"
                    t-on-click="() => this.enableSectionInput('bottom')"
                >
                    + Add Section
                </button>
            </section>
        </section>

        <div class="o_search_panel_empty_state me-3" position="attributes">
            <attribute name="class" add="d-none" separator=" "/>
        </div>
    </t>

    <t t-name="account.ProductCatalogSearchPanel" t-inherit="web.SearchPanel" t-inherit-mode="primary">
        <t t-call="web.SearchPanel.Regular" position="attributes">
            <attribute name="t-call">account.ProductCatalogSearchPanelContent</attribute>
        </t>
    </t>
</templates>
