{#
    Employee Avatar Partial - JavaScript Template Reference

    This file documents the structure used by SchedulePanel.js to render
    individual employee avatars. The actual rendering happens in JavaScript
    using this structure as a reference.

    Template Variables (provided by JS):
    - id: Employee ID
    - firstName: Employee first name
    - lastName: Employee last name
    - fullName: Full display name
    - initials: Two-letter initials (e.g., "JD")
    - photoUrl: URL to employee photo (optional)
    - status: Clock status (clocked-in, clocked-out, on-break, late, not-started)
    - statusClass: CSS class for status styling
    - statusLabel: Human-readable status text
    - roleColor: Hex color for role indicator (optional)
    - shiftStart: Formatted shift start time (e.g., "9:00 AM")
    - shiftEnd: Formatted shift end time (e.g., "5:00 PM")
    - shiftNotes: Shift notes text (optional)

    Status Classes:
    - status-clocked-in: Currently working (green indicator)
    - status-clocked-out: Shift ended (gray indicator)
    - status-on-break: On break (yellow indicator)
    - status-late: Late to shift (red indicator)
    - status-not-started: Shift not yet started (blue indicator)
#}

{% raw %}
<li class="employee-avatar {{statusClass}}"
    data-employee-id="{{id}}"
    data-status="{{status}}"
    role="listitem">

    {# Clickable avatar button for quick actions #}
    <button type="button"
            class="employee-avatar-button"
            title="{{fullName}} - {{statusLabel}}"
            aria-label="{{fullName}}, {{statusLabel}}. Click for options."
            aria-haspopup="dialog">

        {# Avatar image container with role color border #}
        <div class="employee-avatar-image"
             {{#if roleColor}}style="border-color: {{roleColor}};"{{/if}}>
            {{#if photoUrl}}
                <img src="{{photoUrl}}"
                     alt=""
                     loading="lazy"
                     class="employee-avatar-photo" />
            {{else}}
                <span class="employee-avatar-initials" aria-hidden="true">{{initials}}</span>
            {{/if}}
        </div>

        {# Status indicator dot #}
        <span class="employee-avatar-status status-{{status}}"
              aria-hidden="true"
              title="{{statusLabel}}"></span>

        {# Note indicator (visible if employee has shift notes) #}
        {{#if shiftNotes}}
        <span class="employee-avatar-note"
              title="Has shift notes"
              aria-label="Has shift notes">
            <i class="fa fa-sticky-note" aria-hidden="true"></i>
        </span>
        {{/if}}

    </button>

    {# Name label - Visible in expanded panel mode #}
    <span class="employee-avatar-name" title="{{fullName}}">{{firstName}}</span>

    {# Shift time - Visible in expanded panel mode #}
    <span class="employee-avatar-shift">{{shiftStart}} - {{shiftEnd}}</span>

</li>
{% endraw %}