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

    <t t-name="web.ControlPanel">
        <div class="o_control_panel d-flex flex-column gap-3 gap-lg-1 px-3 pt-2 pb-3" t-ref="root" data-command-category="actions">
            <div class="o_control_panel_main d-flex flex-wrap flex-lg-nowrap justify-content-between align-items-lg-start gap-3 flex-grow-1">
                <div class="o_control_panel_breadcrumbs d-flex align-items-center gap-1 order-0 h-lg-100">
                    <div class="o_control_panel_main_buttons d-flex gap-1 d-empty-none d-print-none" t-ref="mainButtons" t-on-keydown="onMainButtonsKeydown">
                        <div class="btn-group d-xl-none o_control_panel_collapsed_create">
                            <t t-slot="control-panel-create-button"/>
                            <button t-att-class="{invisible: display.disableDropdown}" type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split o_control_panel_collapsed_create" data-bs-toggle="dropdown" aria-expanded="false">
                                 <span class="visually-hidden">Toggle Dropdown</span>
                            </button>
                            <ul class="dropdown-menu o_control_panel_collapsed_create">
                                <t t-slot="layout-buttons"/>
                                <t t-slot="control-panel-always-buttons"/>
                            </ul>
                        </div>
                        <div class="d-none d-xl-inline-flex gap-1">
                            <t t-slot="control-panel-create-button"/>
                            <t t-slot="layout-buttons"/>
                            <t t-slot="control-panel-always-buttons"/>
                        </div>
                    </div>
                    <t t-if="env.config.noBreadcrumbs">
                        <section class="o_control_panel_breadcrumbs_actions d-contents">
                            <t t-slot="control-panel-additional-actions"/>
                            <t t-slot="control-panel-status-indicator" />
                        </section>
                    </t>
                    <t t-else="">
                        <t t-slot="control-panel-breadcrumb">
                            <t t-call="web.Breadcrumbs"/>
                        </t>
                    </t>
                    <span class="d-none d-xl-block me-auto"/> <!-- Spacer -->
                </div>

                <div class="o_control_panel_actions d-empty-none d-flex align-items-center justify-content-start justify-content-lg-around order-2 order-lg-1 w-100 w-lg-auto">
                    <t t-if="display.layoutActions" t-slot="layout-actions"/>
                    <t t-slot="control-panel-selection-actions"/>
                </div>

                <div class="o_control_panel_navigation d-flex flex-wrap flex-md-nowrap justify-content-end gap-3 gap-lg-1 gap-xl-3 order-1 order-lg-2 flex-grow-1">
                    <div t-if="pagerProps and pagerProps.total > 0" class="o_cp_pager text-nowrap " role="search">
                        <Pager t-props="pagerProps"/>
                    </div>
                    <t t-if="env.config.viewSwitcherEntries?.length > 1">
                        <Dropdown class="'o_cp_switch_buttons d-xl-none btn-group'" togglerClass="'btn btn-secondary'" showCaret="true">
                            <t t-set-slot="toggler">
                                <t t-set="activeView" t-value="env.config.viewSwitcherEntries.find((view) => view.active)"/>
                                <i class="oi-fw" t-att-class="activeView.icon"/>
                            </t>
                            <t t-foreach="env.config.viewSwitcherEntries" t-as="view" t-key="view.type">
                                <DropdownItem onSelected="() => this.onViewClicked(view.type)" class="view.active ? 'selected' : ''">
                                    <i class="oi-fw" t-att-class="view.icon"/>
                                    <span class="ms-1" t-out="view.name"/>
                                </DropdownItem>
                            </t>
                        </Dropdown>
                        <nav class="o_cp_switch_buttons d-print-none d-none d-xl-inline-flex btn-group">
                            <t t-foreach="env.config.viewSwitcherEntries" t-as="view" t-key="view.type">
                                <button class="btn btn-secondary o_switch_view "
                                    t-attf-class="o_{{view.type}} {{view.active ? 'active' : ''}}"
                                    t-att-data-tooltip="view.name"
                                    t-on-click="() => this.onViewClicked(view.type)"
                                >
                                    <i t-att-class="view.icon" />
                                </button>
                            </t>
                        </nav>
                    </t>
                    <t t-slot="control-panel-navigation-additional"/>
                </div>
            </div>
        </div>
    </t>

    <t t-name="web.Breadcrumbs">
        <t t-set="currentBreadcrumbs" t-value="breadcrumbs.slice(-1)"/>
        <t t-set="visiblePathBreadcrumbs" t-value="breadcrumbs.slice(-3, -1)"/>
        <t t-set="collapsedBreadcrumbs" t-value="breadcrumbs.slice(0, -3).reverse()"/>
        <t t-set="breadcrumb" t-value="currentBreadcrumbs[0] || {}"/>

        <div t-if="collapsedBreadcrumbs.length || visiblePathBreadcrumbs.length" class="o_breadcrumb d-flex flex-row flex-md-column align-self-stretch justify-content-between min-w-0">
            <t t-if="env.isSmall">
                <t t-set="previousBreadcrumb" t-value="visiblePathBreadcrumbs.slice(-1)"/>
                <button class="o_back_button btn btn-link px-1" t-on-click.prevent="() => this.onBreadcrumbClicked(previousBreadcrumb.jsId)">
                    <i class="oi oi-fw oi-arrow-left"/>
                </button>
            </t>
            <t t-else="">
                <ol class="breadcrumb flex-nowrap text-nowrap small lh-sm">
                    <li t-if="collapsedBreadcrumbs.length" class="breadcrumb-item d-inline-flex min-w-0">
                        <Dropdown togglerClass="'btn btn-light btn-sm px-1 p-0'">
                            <t t-set-slot="toggler">
                                <i class="fa fa-ellipsis-h"/>
                            </t>
                            <t t-foreach="collapsedBreadcrumbs" t-as="breadcrumb" t-key="breadcrumb.jsId">
                                <DropdownItem onSelected="() => this.onBreadcrumbClicked(breadcrumb.jsId)">
                                    <t t-call="web.Breadcrumb.Name"/>
                                </DropdownItem>
                            </t>
                        </Dropdown>
                    </li>
                    <t t-foreach="visiblePathBreadcrumbs" t-as="breadcrumb" t-key="breadcrumb.jsId">
                        <li class="breadcrumb-item d-inline-flex min-w-0" t-att-class="{ o_back_button: breadcrumb_last }" t-att-data-hotkey="breadcrumb_last and 'b'" t-on-click.prevent="() => this.onBreadcrumbClicked(breadcrumb.jsId)">
                            <a href="#" class="fw-bold text-truncate" t-att-data-tooltip="'Back to &quot;' + breadcrumb.name + '&quot;'"><t t-call="web.Breadcrumb.Name"/></a>
                        </li>
                    </t>
                </ol>
            </t>
            <div class="d-flex gap-1 text-truncate">
                <div class="o_last_breadcrumb_item active d-flex gap-2 align-items-center min-w-0 lh-sm">
                    <span class="min-w-0 text-truncate" t-call="web.Breadcrumb.Name"/>
                </div>
                <t t-call="web.Breadcrumb.Actions"/>
            </div>
        </div>

        <div t-else="" class="o_breadcrumb d-flex gap-1 text-truncate">
            <div class="o_last_breadcrumb_item active d-flex fs-4 min-w-0 align-items-center">
                <span class="min-w-0 text-truncate" t-call="web.Breadcrumb.Name"/>
            </div>
            <t t-call="web.Breadcrumb.Actions"/>
        </div>

        <t t-slot="control-panel-status-indicator" />
    </t>

    <t t-name="web.Breadcrumb.Actions">
        <div class="o_control_panel_breadcrumbs_actions d-inline-flex">
            <t t-slot="control-panel-additional-actions"/>
        </div>
    </t>

    <t t-name="web.Breadcrumb.Name">
        <t t-if="breadcrumb.name" t-out="breadcrumb.name"/>
        <em t-else="" class="text-warning">Unnamed</em>
        <t t-slot="control-panel-additional-breadcrums"/>
    </t>

</templates>
