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

    <t t-name="fusion_clock.ClockSystray">
        <t t-if="state.isDisplayed">
            <!-- Systray Dropdown -->
            <Dropdown position="'bottom-end'" state="dropdown"
                      beforeOpen.bind="_fetchStatus"
                      menuClass="'fclk-systray-dropdown p-0'">
                <button class="fclk-systray-btn">
                    <span t-attf-class="fclk-systray-icon {{ state.isCheckedIn ? 'fclk-systray-icon--in' : 'fclk-systray-icon--out' }}">
                        <i class="fa fa-clock-o"/>
                    </span>
                </button>
                <t t-set-slot="content">
                    <div class="fclk-systray-panel">
                        <!-- Header -->
                        <div class="fclk-systray-header">
                            <i t-attf-class="fa fa-circle fclk-systray-header-dot {{ state.isCheckedIn ? 'text-success' : 'text-danger' }}"/>
                            <span t-if="state.isCheckedIn" class="fclk-systray-header-text">Clocked In</span>
                            <span t-else="" class="fclk-systray-header-text">Ready to Clock In</span>
                            <a href="/my/clock" class="fclk-systray-link" target="_blank" title="Open Full Clock">
                                <i class="fa fa-external-link"/>
                            </a>
                        </div>

                        <!-- Location -->
                        <div t-if="state.isCheckedIn and state.locationName" class="fclk-systray-location">
                            <i class="fa fa-map-marker"/> <t t-esc="state.locationName"/>
                        </div>

                        <!-- Timer -->
                        <div class="fclk-systray-timer" t-esc="state.timerDisplay"/>

                        <!-- Stats -->
                        <div class="fclk-systray-stats">
                            <div class="fclk-systray-stat">
                                <span class="fclk-systray-stat-val"><t t-esc="state.todayHours"/>h</span>
                                <span class="fclk-systray-stat-lbl">Today</span>
                            </div>
                            <div class="fclk-systray-stat-sep"/>
                            <div class="fclk-systray-stat">
                                <span class="fclk-systray-stat-val"><t t-esc="state.weekHours"/>h</span>
                                <span class="fclk-systray-stat-lbl">This Week</span>
                            </div>
                        </div>

                        <!-- Clock Action -->
                        <button t-attf-class="fclk-systray-action {{ state.isCheckedIn ? 'fclk-systray-action--out' : 'fclk-systray-action--in' }}"
                                t-on-click="onClockAction"
                                t-att-disabled="state.loading">
                            <t t-if="state.loading">
                                <i class="fa fa-circle-o-notch fa-spin"/> Working...
                            </t>
                            <t t-elif="state.isCheckedIn">
                                <i class="fa fa-stop-circle-o"/> Clock Out
                            </t>
                            <t t-else="">
                                <i class="fa fa-play-circle-o"/> Clock In
                            </t>
                        </button>

                        <!-- Error -->
                        <div t-if="state.error" class="fclk-systray-error">
                            <i class="fa fa-exclamation-triangle"/> <t t-esc="state.error"/>
                        </div>
                    </div>
                </t>
            </Dropdown>

            <!-- Missed Clock-Out Reason Dialog (outside dropdown) -->
            <div t-if="state.showReasonDialog" class="fclk-fab-dialog-overlay">
                <div class="fclk-fab-dialog-backdrop" t-on-click="cancelReason"/>
                <div class="fclk-fab-dialog">
                    <div class="fclk-fab-dialog-header fclk-fab-dialog-header--warning">
                        <div class="fclk-fab-dialog-icon"><i class="fa fa-exclamation-triangle"/></div>
                        <h4 class="fclk-fab-dialog-title">Missed Clock-Out</h4>
                        <p class="fclk-fab-dialog-subtitle">You didn't clock out on your last shift. Please provide details before continuing.</p>
                    </div>
                    <div class="fclk-fab-dialog-body">
                        <div class="fclk-fab-dialog-field">
                            <label class="fclk-fab-dialog-label"><i class="fa fa-comment-o"/> Reason <span class="fclk-fab-dialog-required">*</span></label>
                            <textarea class="fclk-fab-dialog-input" rows="3" placeholder="Please explain why you didn't clock out..." t-on-input="onReasonTextInput" t-att-value="state.reasonText"/>
                        </div>
                        <div class="fclk-fab-dialog-field">
                            <label class="fclk-fab-dialog-label"><i class="fa fa-clock-o"/> Departure Time</label>
                            <input type="datetime-local" class="fclk-fab-dialog-input" t-on-input="onReasonTimeInput" t-att-value="state.reasonTime"/>
                            <span class="fclk-fab-dialog-hint">When did you actually leave? (optional)</span>
                        </div>
                    </div>
                    <div class="fclk-fab-dialog-footer">
                        <button class="fclk-fab-dialog-btn fclk-fab-dialog-btn--cancel" t-on-click="cancelReason">Cancel</button>
                        <button class="fclk-fab-dialog-btn fclk-fab-dialog-btn--submit" t-on-click="submitReason" t-att-disabled="state.reasonSubmitting">
                            <t t-if="state.reasonSubmitting"><i class="fa fa-circle-o-notch fa-spin"/> Submitting...</t>
                            <t t-else=""><i class="fa fa-check"/> Submit Reason</t>
                        </button>
                    </div>
                </div>
            </div>

            <!-- Clock-Out Confirmation Dialog (outside dropdown) -->
            <div t-if="state.showClockoutConfirm" class="fclk-fab-dialog-overlay">
                <div class="fclk-fab-dialog-backdrop" t-on-click="cancelClockOut"/>
                <div class="fclk-fab-dialog fclk-fab-dialog--compact">
                    <div class="fclk-fab-dialog-header fclk-fab-dialog-header--danger">
                        <div class="fclk-fab-dialog-icon"><i class="fa fa-stop-circle"/></div>
                        <h4 class="fclk-fab-dialog-title">Clock Out?</h4>
                        <p class="fclk-fab-dialog-subtitle">Are you sure you want to end your current shift?</p>
                    </div>
                    <div class="fclk-fab-dialog-body">
                        <div class="fclk-fab-dialog-summary">
                            <div class="fclk-fab-dialog-summary-row">
                                <span class="fclk-fab-dialog-summary-label">Clocked in at</span>
                                <span class="fclk-fab-dialog-summary-value" t-esc="confirmCheckinDisplay"/>
                            </div>
                            <div class="fclk-fab-dialog-summary-row">
                                <span class="fclk-fab-dialog-summary-label">Duration</span>
                                <span class="fclk-fab-dialog-summary-value" t-esc="confirmDurationDisplay"/>
                            </div>
                        </div>
                    </div>
                    <div class="fclk-fab-dialog-footer">
                        <button class="fclk-fab-dialog-btn fclk-fab-dialog-btn--cancel" t-on-click="cancelClockOut">Cancel</button>
                        <button class="fclk-fab-dialog-btn fclk-fab-dialog-btn--danger" t-on-click="confirmClockOut">
                            <i class="fa fa-stop-circle-o"/> Confirm Clock Out
                        </button>
                    </div>
                </div>
            </div>
        </t>
    </t>

</templates>
