<?xml version="1.0" encoding="UTF-8"?>
<templates id="template" xml:space="preserve">
    <t t-name="pos_restaurant.FloorScreen">
        <div class="floor-screen screen h-100 position-relative d-flex flex-column flex-nowrap m-0 bg-view text-start overflow-hidden">
            <div class="position-relative w-100 p-2 border-bottom z-2">
                <div class="o_fp_toolbar d-flex flex-row justify-content-between gap-1" t-on-transitionend="onToolbarTransitionEnd">
                    <button class="new-order btn btn-lg lh-lg" t-attf-class="{{ this.pos.getOrder()?.isDirectSale ? 'btn-secondary' : 'btn-primary'}}"
                            t-on-click="() => this.clickNewOrder()">
                        <t t-if="this.pos.getOrder()?.isDirectSale">
                            <i class="fa fa-angle-double-left fa-fw" role="img" aria-label="Back" title="Back"/>
                            <span t-if="!ui.isSmall" class="ms-1">Back</span>
                        </t>
                        <t t-else="">
                            <i class="fa fa-plus fa-fw" role="img" aria-label="New Order" title="New Order"/>
                            <span t-if="!ui.isSmall" class="ms-1">New Order</span>
                        </t>
                    </button>

                    <!-- Center Side Div -->
                    <div class="floor-selector d-flex gap-1 overflow-auto mx-2">
                        <t t-if="floorPlanStore.floors.length > 1" t-foreach="floorPlanStore.floors" t-as="floor" t-key="floor.uuid">
                            <button class="button button-floor btn btn-outline-secondary btn-lg px-3 lh-lg text-nowrap text-body"
                                    t-att-class="{'active': floor === floorPlanStore.selectedFloor}"
                                    t-on-click="() => this.selectFloor(floor.uuid)">
                                <t t-esc="floor.name" />
                            </button>
                        </t>
                    </div>

                    <!-- Right Side Div -->
                    <div class="right-buttons d-flex gap-1 pe-0">
                         <button t-if="this.pos.showEditPlanButton and !ui.isSmall" class="btn btn-secondary btn-lg lh-lg" title="Edit Floor Plan" t-on-click="()=>this.startFloorPlanEditing()">
                             <i class="fa fa-fw fa-pencil-square-o"/>
                         </button>
                        <button class="button-table-selector btn btn-secondary btn-lg lh-lg" t-on-click="() => this.toggleTableSelector()">
                            <i class="fa fa-fw fa-hashtag" aria-hidden="true"/>
                        </button>

                    </div>
                </div>
                <FloorEditorToolBar actionHandler="()=> this.getFloorPlanEditorActionHandler()" t-if="floorPlanStore.isEditToolbarVisible()" />
            </div>

            <div class="overflow-hidden flex-grow-1 flex-shrink-1 flex-basis-0 w-auto position-relative">
                <FloorPlan t-if="!isEditMode()"/>
                <FloorPlanEditor t-else="" initActionHandler="(handler)=>this.initFloorPlanEditorActionHandler(handler)"/>
            </div>
            <NumpadDropdown/>
        </div>
    </t>

</templates>
