<?xml version="1.0" encoding="utf-8"?>
<templates>
    <div t-name="spreadsheet_dashboard.DashboardAction" class="o_action o_spreadsheet_dashboard_action o_field_highlight">
        <ControlPanel display="controlPanelDisplay">
            <t t-set-slot="layout-actions" t-if="!loader.getActiveDashboard()?.isSample">
                <t t-set="status" t-value="loader.getActiveDashboard() and loader.getActiveDashboard().status"/>
                <div class="d-flex flex-wrap w-100">
                    <DashboardSearchBar t-if="status === Status.Loaded and loader.getActiveDashboard().model.getters.getGlobalFilters().length"
                                        t-key="activeDashboardId"
                                        model="loader.getActiveDashboard().model"
                                        toggler="searchBarToggler"
                    />
                </div>
            </t>
            <t t-set-slot="control-panel-navigation-additional" t-if="!loader.getActiveDashboard()?.isSample">
                <!-- Dashboard selection -->
                <t t-if="env.isSmall">
                    <DashboardMobileSearchPanel
                        onDashboardSelected="(dashboardId) => this.openDashboard(dashboardId)"
                        activeDashboard="dashboard"
                        groups="getDashboardGroups()"/>
                </t>
                <SpreadsheetShareButton t-key="activeDashboardId" model="loader.getActiveDashboard()?.model" onSpreadsheetShared.bind="shareSpreadsheet" togglerClass="'btn-light'"/>
                <a
                    t-if="loader.getActiveDashboard()"
                    title="Toggle favorite"
                    t-on-click="toggleFavorite"
                    t-attf-class="o_dashboard_star align-middle lh-base fa fa-lg fa-star{{!loader.getActiveDashboard().data.is_favorite ? '-o' : ''}}"
                />
                <div class="ms-1 o_search_toggler" t-if="env.isSmall">
                    <t t-component="searchBarToggler.component" t-props="searchBarToggler.props"/>
                </div>
            </t>
        </ControlPanel>
        <t t-set="dashboard" t-value="loader.getActiveDashboard()"/>
        <div class="o_content o_component_with_search_panel" t-att-class="{ o_mobile_dashboard: env.isSmall }">
            <t t-if="!env.isSmall">
                <t t-if="state.sidebarExpanded" t-call="spreadsheet_dashboard.DashboardAction.Expanded"/>
                <t t-else="" t-call="spreadsheet_dashboard.DashboardAction.Collapsed"/>
            </t>
            <!-- Main content -->
            <h3 t-if="!dashboard" class="dashboard-loading-status">No available dashboard</h3>
            <t t-else="">
                <t t-set="status" t-value="dashboard.status"/>
                <h3 t-if="status === Status.Loading" class="dashboard-loading-status">Loading...</h3>
                <div t-elif="status === Status.Error" class="dashboard-loading-status error">
                    An error occured while loading the dashboard
                </div>
                <t t-else="">
                    <MobileFigureContainer t-if="env.isSmall" spreadsheetModel="dashboard.model" t-key="dashboard.data.id"/>
                    <div t-else="" class="o_renderer" t-att-class="{'o-sample-dashboard': dashboard.isSample}">
                        <SpreadsheetComponent
                            model="dashboard.model"
                            t-key="dashboard.data.id"/>
                    </div>
                </t>
            </t>
        </div>
    </div>

    <t t-name="spreadsheet_dashboard.DashboardAction.Collapsed">
        <div class="bg-view h-100 o_search_panel_sidebar cursor-pointer" t-on-click="toggleSidebar">
            <div class="d-flex">
                <button class="btn btn-light btn-sm m-1 mb-2 p-2">
                    <i class="fa fa-angle-double-right"/>
                </button>
                <div class="mx-auto" t-if="loader.getActiveDashboard()">
                    <span class="fw-bolder" t-esc="activeDashboardGroupName"/>
                    /
                    <t t-esc="loader.getActiveDashboard().data.name"/>
                </div>
            </div>
        </div>
    </t>

    <t t-name="spreadsheet_dashboard.DashboardAction.Expanded">
        <div class="o_spreadsheet_dashboard_search_panel o_search_panel flex-grow-0 border-end flex-shrink-0 pe-2 pb-5 ps-4 h-100 bg-view overflow-auto position-relative">
            <button t-if="!env.isSmall and loader.getActiveDashboard()" class="btn btn-light btn-sm end-0 m-1 mb-2 position-absolute px-2 py-1 top-0 z-1" t-on-click="toggleSidebar">
                <i class="fa fa-fw fa-angle-double-left"/>
            </button>
            <div class="mt-2"/>
            <section t-foreach="getDashboardGroups()" t-as="group" t-key="group.id" class="o_search_panel_section o_search_panel_category">
                <header class="o_search_panel_section_header pt-4 pb-2 text-uppercase o_cursor_default user-select-none">
                    <b t-esc="group.name"/>
                </header>
                <ul class="list-group d-block o_search_panel_field">
                    <li t-foreach="group.dashboards" t-as="dashboard" t-key="dashboard.data.id"
                        t-on-click="() => this.openDashboard(dashboard.data.id)"
                        t-att-data-name="dashboard.data.name"
                        t-att-title="dashboard.data.name"
                        class="o_search_panel_category_value list-group-item cursor-pointer border-0 d-flex justify-content-between align-items-center"
                        t-att-class="{'active': dashboard.data.id === loader.getActiveDashboard().data.id}">
                        <div class="o_dashboard_name">
                            <t t-esc="dashboard.data.name" />
                        </div>
                        <t t-set="comp" t-value="dashboardButton"/>
                        <t t-if="comp">
                            <t t-component="comp" t-props="{ dashboardId: dashboard.data.id, onClick: this.editDashboard.bind(this), data: dashboard.data }"/>
                        </t>
                    </li>
                </ul>
            </section>
        </div>
    </t>
</templates>
