{#
    Schedule Modal - Full Schedule View

    Modal showing all employees scheduled for today with list and timeline views.
    Opens when clicking the calendar icon in the schedule panel header.

    Views:
    - List View: Table with employee name, shift time, current status
    - Timeline View (default): Visual timeline with shift blocks and current time indicator

    @requires Bootstrap 5 Modal
    @requires ScheduleModal.js
    @see PRD Feature 6: Schedule Modal
    @see schedule-panel.html for panel integration
#}

{# Schedule Modal #}
<div class="modal fade schedule-modal"
     id="schedulePanelModal"
     tabindex="-1"
     role="dialog"
     aria-labelledby="schedulePanelModalLabel"
     aria-hidden="true"
     data-bs-backdrop="true"
     data-bs-keyboard="true">
    <div class="modal-dialog modal-dialog-centered modal-lg schedule-modal-dialog">
        <div class="modal-content schedule-modal-content">

            {# Modal Header #}
            <div class="modal-header schedule-modal-header">
                <div class="schedule-modal-title-section">
                    <h5 class="modal-title" id="schedulePanelModalLabel">
                        <i class="fa fa-calendar-day" aria-hidden="true"></i>
                        Today's Schedule
                    </h5>
                    <span class="schedule-modal-date" id="schedulePanelModalDate"></span>
                </div>

                {# View Toggle Buttons #}
                <div class="schedule-modal-view-toggle btn-group"
                     role="group"
                     aria-label="Schedule view options">
                    <button type="button"
                            class="btn btn-sm btn-outline-secondary"
                            id="scheduleViewListBtn"
                            data-view="list"
                            aria-pressed="false"
                            title="List view">
                        <i class="fa fa-list" aria-hidden="true"></i>
                        <span class="d-none d-sm-inline">List</span>
                    </button>
                    <button type="button"
                            class="btn btn-sm btn-outline-secondary active"
                            id="scheduleViewTimelineBtn"
                            data-view="timeline"
                            aria-pressed="true"
                            title="Timeline view">
                        <i class="fa fa-timeline" aria-hidden="true"></i>
                        <span class="d-none d-sm-inline">Timeline</span>
                    </button>
                </div>

                <button type="button"
                        class="btn-close"
                        data-bs-dismiss="modal"
                        aria-label="Close schedule modal"></button>
            </div>

            {# Modal Body #}
            <div class="modal-body schedule-modal-body">

                {# Loading State #}
                <div class="schedule-modal-state schedule-modal-loading"
                     id="scheduleModalLoading"
                     role="status"
                     aria-live="polite">
                    <i class="fa fa-spinner fa-spin fa-2x" aria-hidden="true"></i>
                    <span>Loading schedule...</span>
                </div>

                {# Empty State #}
                <div class="schedule-modal-state schedule-modal-empty"
                     id="scheduleModalEmpty"
                     style="display: none;"
                     role="status"
                     aria-live="polite">
                    <i class="fa fa-calendar-xmark fa-3x" aria-hidden="true"></i>
                    <span class="schedule-modal-empty-title">No Employees Scheduled</span>
                    <span class="schedule-modal-empty-subtitle">
                        There are no employees scheduled for today.
                    </span>
                </div>

                {# Error State #}
                <div class="schedule-modal-state schedule-modal-error"
                     id="scheduleModalError"
                     style="display: none;"
                     role="alert"
                     aria-live="assertive">
                    <i class="fa fa-exclamation-triangle fa-3x text-danger" aria-hidden="true"></i>
                    <span>Unable to load schedule</span>
                    <button type="button"
                            class="btn btn-outline-secondary btn-sm mt-3"
                            id="scheduleModalRetry">
                        <i class="fa fa-redo" aria-hidden="true"></i>
                        Retry
                    </button>
                </div>

                {# List View (Default) #}
                <div class="schedule-list-view"
                     id="scheduleListView"
                     style="display: none;">

                    {# Summary Stats #}
                    <div class="schedule-list-summary" id="scheduleListSummary">
                        <span class="schedule-summary-item schedule-summary-total">
                            <strong id="scheduleTotalCount">0</strong> scheduled
                        </span>
                        <span class="schedule-summary-item schedule-summary-clocked-in">
                            <span class="schedule-status-indicator schedule-status-clocked_in"></span>
                            <strong id="scheduleClockedInCount">0</strong> clocked in
                        </span>
                        <span class="schedule-summary-item schedule-summary-on-break">
                            <span class="schedule-status-indicator schedule-status-on_break"></span>
                            <strong id="scheduleOnBreakCount">0</strong> on break
                        </span>
                    </div>

                    {# Employee List Table #}
                    <div class="schedule-list-container">
                        <table class="table schedule-list-table" id="scheduleListTable">
                            <thead>
                                <tr>
                                    <th scope="col" class="schedule-list-col-employee">Employee</th>
                                    <th scope="col" class="schedule-list-col-shift">Shift</th>
                                    <th scope="col" class="schedule-list-col-status">Status</th>
                                </tr>
                            </thead>
                            <tbody id="scheduleListBody">
                                {# Rows populated by JavaScript using template below #}
                            </tbody>
                        </table>
                    </div>
                </div>

                {# Timeline View #}
                <div class="schedule-timeline-view"
                     id="scheduleTimelineView"
                     style="display: none;">

                    {# Timeline Header with Time Axis #}
                    <div class="schedule-timeline-header">
                        <div class="schedule-timeline-employee-label">Employee</div>
                        <div class="schedule-timeline-axis" id="scheduleTimelineAxis">
                            {# Time markers populated by JavaScript (6am-9pm) #}
                        </div>
                    </div>

                    {# Timeline Body with Employee Rows #}
                    <div class="schedule-timeline-body" id="scheduleTimelineBody">
                        {# Employee timeline rows populated by JavaScript #}
                    </div>

                    {# Current Time Indicator #}
                    <div class="schedule-timeline-now"
                         id="scheduleTimelineNow"
                         aria-label="Current time"
                         style="display: none;">
                        <span class="schedule-timeline-now-label" id="scheduleTimelineNowLabel"></span>
                    </div>

                    {# Timeline Legend #}
                    <div class="schedule-timeline-legend">
                        <span class="schedule-legend-item">
                            <span class="schedule-legend-color schedule-status-clocked_in"></span>
                            Clocked In
                        </span>
                        <span class="schedule-legend-item">
                            <span class="schedule-legend-color schedule-status-on_break"></span>
                            On Break
                        </span>
                        <span class="schedule-legend-item">
                            <span class="schedule-legend-color schedule-status-scheduled"></span>
                            Scheduled
                        </span>
                        <span class="schedule-legend-item">
                            <span class="schedule-legend-color schedule-status-clocked_out"></span>
                            Clocked Out
                        </span>
                    </div>
                </div>

            </div>

            {# Modal Footer #}
            <div class="modal-footer schedule-modal-footer">
                <span class="schedule-modal-updated text-muted"
                      id="scheduleModalUpdated"
                      aria-live="polite">
                    <i class="fa fa-clock" aria-hidden="true"></i>
                    <span id="scheduleModalUpdatedTime"></span>
                </span>
                <button type="button"
                        class="btn btn-secondary"
                        data-bs-dismiss="modal">
                    Close
                </button>
            </div>

        </div>
    </div>
</div>

{# ============================================
   JavaScript Templates for Dynamic Content
   ============================================ #}

{# List View Row Template #}
<template id="scheduleListRowTemplate">
    {% raw %}
    <tr class="schedule-list-item schedule-list-item-{{status}}" data-employee-id="{{employeeId}}">
        <td class="schedule-list-cell-employee">
            <div class="schedule-list-employee">
                <div class="schedule-list-avatar">
                    <img src="{{photoUrl}}"
                         alt="{{name}}"
                         class="schedule-list-avatar-img"
                         onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
                    <span class="schedule-list-avatar-initials" style="display: none;">{{initials}}</span>
                    <span class="schedule-list-status-dot schedule-status-{{status}}" aria-hidden="true"></span>
                </div>
                <div class="schedule-list-employee-info">
                    <span class="schedule-list-name">{{name}}</span>
                    <span class="schedule-list-position">{{position}}</span>
                </div>
            </div>
        </td>
        <td class="schedule-list-cell-shift">
            <span class="schedule-list-shift-time">{{shiftStart}} - {{shiftEnd}}</span>
            <span class="schedule-list-shift-duration">{{duration}}</span>
        </td>
        <td class="schedule-list-cell-status">
            <span class="badge schedule-status-badge schedule-status-badge-{{status}}">
                <i class="fa {{statusIcon}}" aria-hidden="true"></i>
                {{statusText}}
            </span>
            {{#if clockedTime}}
            <span class="schedule-list-clocked-time">{{clockedTime}}</span>
            {{/if}}
        </td>
    </tr>
    {% endraw %}
</template>

{# Timeline Employee Row Template #}
<template id="scheduleTimelineRowTemplate">
    {% raw %}
    <div class="schedule-timeline-employee" data-employee-id="{{employeeId}}">
        <div class="schedule-timeline-employee-info">
            <div class="schedule-timeline-avatar">
                <img src="{{photoUrl}}"
                     alt="{{name}}"
                     class="schedule-timeline-avatar-img"
                     onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
                <span class="schedule-timeline-avatar-initials" style="display: none;">{{initials}}</span>
            </div>
            <span class="schedule-timeline-name" title="{{name}}">{{shortName}}</span>
        </div>
        <div class="schedule-timeline-track">
            <div class="schedule-timeline-block schedule-status-{{status}}"
                 style="left: {{blockLeft}}%; width: {{blockWidth}}%;"
                 title="{{name}}: {{shiftStart}} - {{shiftEnd}}"
                 aria-label="{{name}} shift from {{shiftStart}} to {{shiftEnd}}, status: {{statusText}}">
                {{#if showBlockLabel}}
                <span class="schedule-timeline-block-label">{{shiftStart}} - {{shiftEnd}}</span>
                {{/if}}
            </div>
        </div>
    </div>
    {% endraw %}
</template>

{# Timeline Time Marker Template #}
<template id="scheduleTimelineMarkerTemplate">
    {% raw %}
    <div class="schedule-timeline-marker" style="left: {{position}}%;">
        <span class="schedule-timeline-marker-label">{{label}}</span>
    </div>
    {% endraw %}
</template>