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

    <t t-name="pos_hr.CashierSelectionPopup">
        <Dialog title.translate="Select Cashier" footer="false"  size="'md'" bodyClass="'d-flex flex-column gap-2'">

            <div class="cashier-selection-item d-flex justify-content-between align-items-center btn btn-outline-secondary active p-2 p-sm-3 border-transparent cursor-default text-start"
                 t-on-click="() => this.props.close()" t-if="props.currentCashier">
                <t t-set="cashier" t-value="props.currentCashier"/>
                <div class="d-flex align-items-center ">
                    <div class="ratio ratio-1x1 me-2 me-sm-3" style="width: 40px">
                        <img class="rounded-3" t-attf-src="/web/image/hr.employee.public/{{cashier.id}}/avatar_128"/>
                    </div>
                    <div class="d-flex flex-column">
                        <span class="fs-4 fw-bold current-cashier-name" t-out="cashier.name"/>
                        <span t-if="cashier.subtitle" class="employee-subtitle fs-6 text-muted">
                            <t t-esc="cashier.subtitle"/>
                        </span>
                    </div>
                </div>
                <div class="d-flex align-items-center ms-1">
                    <button class="btn-cashier-lock btn btn-lg btn-secondary" title="Lock" t-on-click.stop="() => this.lock()">
                        <i class="fa fa-fw fa-lock"/>
                    </button>
                </div>
            </div>

            <button t-foreach="displayableOptions" t-as="employee" t-key="employee.id"
                    class="cashier-selection-item d-flex align-items-center justify-content-between btn btn-outline-secondary p-2 p-sm-3 text-start"
                    t-on-click="() => this.selectEmployee(employee)">
                <div class="d-flex align-items-center">
                    <div class="ratio ratio-1x1 me-2 me-sm-3" style="width: 40px">
                        <img class="rounded-3" t-attf-src="/web/image/hr.employee.public/{{employee.id}}/avatar_128"/>
                    </div>
                    <div class="d-flex flex-column">
                        <span class="fs-4 fw-bold" t-out="employee.name"/>
                        <span t-if="employee.subtitle" class="employee-subtitle fs-6 text-muted">
                            <t t-esc="employee.subtitle"/>
                        </span>
                    </div>
                </div>
                <i class="oi oi-chevron-right"/>
            </button>
            <button
                t-if="this.displayMoreButton"
                class="cashier-selection-item d-flex align-items-center justify-content-between btn btn-outline-secondary p-2 p-sm-3 text-start"
                t-on-click="() => this.state.showAll = true">
                <div class="d-flex flex-column">
                    <span>More...</span>
                </div>
            </button>

        </Dialog>
    </t>

</templates>
