{# Schedule Panel - Today's employee schedule #}
<div class="workbook-schedule-panel content-card">
    <div class="card-header">
        <h3><i class="fa fa-calendar"></i> Today's Schedule</h3>
        <div class="card-header-actions">
            <button class="btn btn-link btn-sm" id="refreshScheduleBtn" title="Refresh schedule">
                <i class="fa fa-refresh"></i>
            </button>
        </div>
    </div>

    <div class="card-body schedule-body" id="scheduleContainer">
        {# Loading state #}
        <div class="loading-state" id="scheduleLoadingState">
            <i class="fa fa-spinner fa-spin"></i> Loading schedule...
        </div>

        {# Empty state #}
        <div class="empty-state" id="scheduleEmptyState" style="display: none;">
            <i class="fa fa-calendar-o"></i>
            <p>No shifts scheduled today</p>
        </div>

        {# Schedule list #}
        <div id="scheduleList"></div>
    </div>
</div>

{% raw %}
<script id="schedule-employee-template" type="text/x-handlebars-template">
    <div class="schedule-employee {{#if isClockedIn}}clocked-in{{/if}}">
        <div class="employee-info">
            <span class="employee-name">{{firstName}} {{lastName}}</span>
            {{#if position}}
            <span class="employee-position">{{position}}</span>
            {{/if}}
        </div>
        <div class="shift-info">
            <span class="shift-time">{{startTime}} - {{endTime}}</span>
            {{#if isClockedIn}}
            <span class="clocked-in-badge">
                <i class="fa fa-check-circle"></i> Clocked In
            </span>
            {{/if}}
        </div>
    </div>
</script>
{% endraw %}