{#
    Schedule Panel - Fixed Right Sidebar

    Displays today's scheduled employees with their clock status.
    Part of the workspace layout, rendered when scheduling is enabled for the store.

    @requires typeNum - Store identifier
    @see employee-avatar.html for avatar structure reference
#}

<aside id="schedule-panel"
       class="schedule-panel"
       data-typenum="{{ typeNum }}"
       aria-label="Today's team schedule"
       role="complementary">

    {# Header with collapse toggle #}
    <header class="schedule-panel-header">
        <div class="schedule-panel-title">
            <i class="fa fa-users" aria-hidden="true"></i>
            <span class="schedule-panel-title-text">Team</span>
            <span class="schedule-panel-count badge"
                  id="schedule-panel-count"
                  aria-label="Number of employees scheduled">0</span>
        </div>
        <div class="schedule-panel-actions">
            <button type="button"
                    class="schedule-panel-btn schedule-modal-trigger"
                    title="View Full Schedule"
                    aria-label="Open full schedule view">
                <i class="fa fa-calendar-alt" aria-hidden="true"></i>
            </button>
            <button type="button"
                    class="schedule-panel-btn schedule-panel-toggle"
                    title="Collapse Panel"
                    aria-label="Toggle panel visibility"
                    aria-expanded="true"
                    aria-controls="schedule-panel-content">
                <i class="fa fa-chevron-right" aria-hidden="true"></i>
            </button>
        </div>
    </header>

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

    {# Empty state - No employees scheduled #}
    <div class="schedule-panel-empty"
         id="schedule-panel-empty"
         style="display: none;"
         role="status"
         aria-live="polite">
        <i class="fa fa-calendar-xmark" aria-hidden="true" title="No one scheduled today"></i>
    </div>

    {# Error state - Failed to load #}
    <div class="schedule-panel-error"
         id="schedule-panel-error"
         style="display: none;"
         role="alert"
         aria-live="assertive">
        <i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
        <span>Unable to load schedule</span>
        <button type="button"
                class="btn btn-sm btn-outline-secondary schedule-panel-retry"
                aria-label="Retry loading schedule">
            <i class="fa fa-refresh" aria-hidden="true"></i> Retry
        </button>
    </div>

    {# Employee list container - Populated by JavaScript #}
    <div class="schedule-panel-content"
         id="schedule-panel-content"
         style="display: none;">
        {# Schedule button - visible only in collapsed state #}
        <div class="schedule-panel-content-actions">
            <button type="button"
                    class="schedule-modal-trigger"
                    title="View Full Schedule"
                    aria-label="Open full schedule view">
                <i class="fa fa-calendar-alt" aria-hidden="true"></i>
            </button>
        </div>
        <ul class="schedule-panel-employees"
            id="schedule-panel-employees"
            role="list"
            aria-label="Scheduled employees">
            {# Employee avatars rendered here by SchedulePanel.js #}
        </ul>
    </div>

    {# Footer with timestamp and refresh #}
    <footer class="schedule-panel-footer">
        <span class="schedule-panel-updated"
              id="schedule-panel-updated"
              aria-live="polite"></span>
        <button type="button"
                class="schedule-panel-btn schedule-panel-refresh"
                title="Refresh schedule"
                aria-label="Refresh schedule data">
            <i class="fa fa-sync-alt" aria-hidden="true"></i>
        </button>
    </footer>
</aside>