<?xml version="1.0" encoding="utf-8"?>
<odoo>

    <!-- Kiosk Page Template -->
    <template id="kiosk_page" name="Fusion Clock Kiosk">
        <t t-call="web.frontend_layout">
            <t t-set="no_header" t-value="True"/>
            <t t-set="no_footer" t-value="True"/>
            <div id="fclk-kiosk" class="container-fluid vh-100 d-flex flex-column align-items-center justify-content-center"
                 style="background: var(--o-main-bg-color, #f8f9fa);"
                 t-att-data-pin-required="'true' if pin_required else 'false'">

                <!-- Header -->
                <div class="text-center mb-4">
                    <h1 style="font-size: 2.5rem;">Fusion Clock</h1>
                    <p class="text-muted" style="font-size: 1.2rem;">Kiosk Mode</p>
                    <div id="fclk-kiosk-time" style="font-size: 3rem; font-weight: 300;"></div>
                </div>

                <!-- Search / PIN Entry -->
                <div class="card shadow-sm" style="width: 100%; max-width: 500px;">
                    <div class="card-body p-4">

                        <!-- Step 1: Search Employee -->
                        <div id="fclk-kiosk-search">
                            <label class="form-label fw-bold">Employee Name</label>
                            <input type="text" id="fclk-kiosk-query" class="form-control form-control-lg mb-3"
                                   placeholder="Type your name..." autocomplete="off"/>
                            <div id="fclk-kiosk-results" class="list-group mb-3" style="max-height: 300px; overflow-y: auto;"></div>
                        </div>

                        <!-- Step 2: PIN (if required) -->
                        <div id="fclk-kiosk-pin" style="display: none;">
                            <h4 id="fclk-kiosk-emp-name" class="text-center mb-3"></h4>
                            <t t-if="pin_required">
                                <label class="form-label fw-bold">Enter PIN</label>
                                <input type="password" id="fclk-kiosk-pin-input" class="form-control form-control-lg text-center mb-3"
                                       maxlength="6" placeholder="------"/>
                            </t>
                            <div class="d-grid gap-2">
                                <button id="fclk-kiosk-clock-btn" class="btn btn-lg btn-primary">
                                    Clock In / Out
                                </button>
                                <button id="fclk-kiosk-back-btn" class="btn btn-outline-secondary">
                                    Back
                                </button>
                            </div>
                        </div>

                        <!-- Step 3: Result -->
                        <div id="fclk-kiosk-result" style="display: none;">
                            <div id="fclk-kiosk-result-msg" class="text-center py-4" style="font-size: 1.3rem;"></div>
                        </div>

                        <!-- Error message -->
                        <div id="fclk-kiosk-error" class="alert alert-danger mt-3" style="display: none;"></div>
                    </div>
                </div>
            </div>
        </t>
    </template>

</odoo>
