{# Generic Employee Selector Modal - Reusable across Workbook #}
{# Redesigned: card grid layout matching clock-in modal style #}
<div class="modal fade" id="employeeSelectorModal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
        <div class="modal-content es-modal">
            <div class="modal-header es-header">
                <h5 class="modal-title es-title" id="employeeSelectorTitle">
                    <i class="fa fa-user"></i> Select Employee
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body es-body">
                {# Search Input with icon #}
                <div class="es-search-wrap">
                    <i class="fa fa-search es-search-icon"></i>
                    <input type="text" class="form-control es-search-input" id="employeeSearchInput"
                           placeholder="Search by name..." autocomplete="off">
                </div>

                {# Employee Grid #}
                <div id="employeeListContainer">
                    <div class="loading-state es-loading" id="employeeListLoading">
                        <i class="fa fa-spinner fa-spin fa-2x"></i>
                        <p>Loading team...</p>
                    </div>
                    <div class="employee-list es-employee-grid" id="employeeList">
                        {# Employees rendered via Handlebars template below #}
                    </div>
                </div>

                {# Optional Notes (hidden by default, shown when needed) #}
                <div class="es-notes-group" id="employeeSelectorNotesGroup" style="display: none;">
                    <label for="employeeSelectorNotes" id="employeeSelectorNotesLabel" class="es-notes-label">
                        <i class="fa fa-comment-o"></i> Note (optional)
                    </label>
                    <div class="es-notes-wrap">
                        <textarea class="form-control es-notes-input" id="employeeSelectorNotes" rows="3"
                                  placeholder="Add a note about completion..." maxlength="500"
                                  oninput="this.closest('.es-notes-wrap').querySelector('.es-char-count').textContent = this.value.length + ' / 500'"></textarea>
                        <span class="es-char-count">0 / 500</span>
                    </div>
                </div>
            </div>
            <div class="modal-footer es-footer">
                <button type="button" class="btn btn-light es-btn-cancel" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn es-btn-confirm" id="employeeSelectorConfirmBtn" disabled>
                    <i class="fa fa-check"></i> Confirm
                </button>
            </div>
        </div>
    </div>
</div>

{% raw %}
<script id="employee-list-item-template" type="text/x-handlebars-template">
    <div class="employee-item es-card" data-employee-id="{{id}}">
        {{#if photoUrl}}
        <img class="es-card-photo" src="{{photoUrl}}" alt="{{firstName}} {{lastName}}">
        {{else}}
        <div class="es-card-initials">{{initial}}</div>
        {{/if}}
        <span class="employee-name">{{firstName}} {{lastName}}</span>
    </div>
</script>
{% endraw %}

<style>
/* ================================================================
   Employee Selector Modal - Card Grid Style (matches Clock-In modal)
   ================================================================ */

/* Modal shell */
.es-modal {
    border-radius: 12px;
    overflow: hidden;
    border: none;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

/* Header - gradient matching clock-in */
.es-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-bottom: none;
    padding: 18px 24px;
    align-items: center;
}
.es-title {
    color: #fff;
    font-weight: 700;
    font-size: 18px;
    margin: 0;
}
.es-header .btn-close-white {
    filter: brightness(0) invert(1);
    opacity: 0.8;
}
.es-header .btn-close-white:hover {
    opacity: 1;
}

/* Body */
.es-body {
    padding: 16px 24px;
    max-height: calc(85vh - 140px);
    overflow-y: auto;
}

/* Search field */
.es-search-wrap {
    position: relative;
    margin-bottom: 16px;
}
.es-search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 14px;
    pointer-events: none;
    z-index: 1;
}
.es-search-input {
    padding-left: 44px;
    height: 44px;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    font-size: 14px;
    background: #fff;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.es-search-input:focus {
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.15);
}
.es-search-input::placeholder {
    color: #94a3b8;
}

/* Loading state */
.es-loading {
    padding: 40px 20px;
    text-align: center;
    color: #999;
}
.es-loading i {
    margin-bottom: 15px;
    color: #999;
}

/* Employee Grid - mirrors clock-in modal exactly */
.es-employee-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    padding: 4px;
    max-height: none;
    overflow: visible;
}

/* Section labels (ON SHIFT / EVERYONE ELSE) */
.es-section-label {
    grid-column: 1 / -1;
    font-size: 12px;
    font-weight: 600;
    color: #667eea;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 4px 0 2px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.es-section-label i {
    font-size: 11px;
}

/* Divider between sections */
.es-section-divider {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 0;
    color: #94a3b8;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.es-section-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #e2e8f0;
}

/* Clickable "Everyone Else" toggle */
.es-toggle-others {
    cursor: pointer;
    user-select: none;
    transition: color 0.15s ease;
    padding: 8px 0;
}
.es-toggle-others:hover {
    color: #667eea;
}
.es-toggle-icon {
    font-size: 10px;
    transition: transform 0.2s ease;
    display: inline-block;
}
.es-toggle-others.es-expanded .es-toggle-icon {
    transform: rotate(90deg);
}
.es-toggle-count {
    font-weight: 400;
    color: #cbd5e1;
}

/* Collapsed "Everyone Else" grid */
.es-others-grid {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}
@media (max-width: 767px) {
    .es-others-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (max-width: 480px) {
    .es-others-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Employee Card - matching clock-in style */
.es-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 8px;
    border: 2px solid #e9ecef;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.15s ease;
    background: #fff;
    gap: 0;
}
.es-card:hover {
    border-color: #667eea;
    background: #f0f2ff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
}
.es-card:active {
    transform: translateY(0);
    box-shadow: none;
}

/* Photo avatar - matching clock-in .employee-card-photo */
.es-card-photo {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
    background: #e9ecef;
    margin-bottom: 8px;
    border: 2px solid #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    flex-shrink: 0;
}

/* Initials avatar - matching clock-in .employee-card-initials */
.es-card-initials {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    font-weight: 600;
    margin-bottom: 8px;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
    text-transform: uppercase;
    flex-shrink: 0;
}

/* Deterministic avatar colors by position */
.es-card:nth-child(8n+1) .es-card-initials { background: linear-gradient(135deg, #667eea, #764ba2); }
.es-card:nth-child(8n+2) .es-card-initials { background: linear-gradient(135deg, #7c3aed, #5b21b6); }
.es-card:nth-child(8n+3) .es-card-initials { background: linear-gradient(135deg, #0d9488, #065f56); }
.es-card:nth-child(8n+4) .es-card-initials { background: linear-gradient(135deg, #e11d48, #9f1239); }
.es-card:nth-child(8n+5) .es-card-initials { background: linear-gradient(135deg, #d97706, #92400e); }
.es-card:nth-child(8n+6) .es-card-initials { background: linear-gradient(135deg, #2563eb, #1e40af); }
.es-card:nth-child(8n+7) .es-card-initials { background: linear-gradient(135deg, #15803d, #166534); }
.es-card:nth-child(8n+8) .es-card-initials { background: linear-gradient(135deg, #764ba2, #667eea); }

/* Employee name in card */
.es-card .employee-name {
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    color: #1e293b;
    line-height: 1.3;
}

/* Selected state */
.es-card.selected {
    border-color: #667eea;
    background: #eef2ff;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
}
.es-card.selected:hover {
    background: #e0e7ff;
}
.es-card.selected .es-card-initials {
    box-shadow: 0 2px 12px rgba(102, 126, 234, 0.5);
}

/* Empty state when search has no results */
.es-employee-grid .es-empty-state {
    grid-column: 1 / -1;
    text-align: center;
    padding: 30px 20px;
    color: #94a3b8;
    font-size: 14px;
}

/* Notes section */
.es-notes-group {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #e2e8f0;
}
.es-notes-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.es-notes-wrap {
    position: relative;
}
.es-notes-input {
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    font-size: 14px;
    padding: 12px;
    resize: vertical;
    min-height: 80px;
    background: #fff;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.es-notes-input:focus {
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.15);
}
.es-notes-input::placeholder {
    color: #94a3b8;
}
.es-char-count {
    position: absolute;
    bottom: 8px;
    right: 12px;
    font-size: 11px;
    color: #94a3b8;
    pointer-events: none;
}

/* Footer */
.es-footer {
    padding: 12px 24px;
    background: #fff;
    border-top: 1px solid #e9ecef;
    display: flex;
    gap: 12px;
}
.es-btn-cancel {
    flex: 0 0 auto;
    padding: 8px 20px;
    font-size: 14px;
    font-weight: 500;
    border-radius: 8px;
    color: #475569;
    border: 1px solid #e2e8f0;
    background: #fff;
    transition: all 0.15s ease;
}
.es-btn-cancel:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
}
.es-btn-confirm {
    flex: 1;
    padding: 8px 20px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 8px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    border: none;
    transition: all 0.15s ease;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}
.es-btn-confirm:hover:not(:disabled) {
    box-shadow: 0 4px 14px rgba(102, 126, 234, 0.45);
    transform: translateY(-1px);
}
.es-btn-confirm:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    box-shadow: none;
}
.es-btn-confirm:active:not(:disabled) {
    transform: translateY(0);
}

/* ================================================================
   Responsive grid columns (matches clock-in modal)
   ================================================================ */
@media (max-width: 767px) {
    .es-employee-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (max-width: 480px) {
    .es-employee-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ================================================================
   Position-Aware Employee Selection
   ================================================================ */

/* Qualified employee card — colored left border */
.es-card.es-qualified {
    border-left: 3px solid #667eea;
    position: relative;
}

.es-card.es-qualified::after {
    content: '\f00c';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 8px;
    position: absolute;
    top: 4px;
    right: 4px;
    color: #667eea;
    opacity: 0.6;
}

/* Not clocked in indicator (greyed out for person-assigned but not clocked in) */
.es-card.es-not-clocked-in {
    opacity: 0.5;
}

.es-card.es-not-clocked-in .employee-name::after {
    content: ' (not on shift)';
    font-size: 10px;
    font-weight: 400;
    color: #94a3b8;
}

/* Out-of-position warning block */
.es-oop-warning {
    margin-top: 12px;
}

/* ================================================================
   Dark mode support
   ================================================================ */
[data-theme="dark"] .es-modal .es-body {
    background: #2d3748;
    color: #e2e8f0;
}
[data-theme="dark"] .es-card {
    background: #374151;
    border-color: #4a5568;
}
[data-theme="dark"] .es-card:hover {
    background: #4a5568;
    border-color: #667eea;
}
[data-theme="dark"] .es-card .employee-name {
    color: #e2e8f0;
}
[data-theme="dark"] .es-card.selected {
    background: #3b4d7a;
    border-color: #667eea;
}
[data-theme="dark"] .es-search-input,
[data-theme="dark"] .es-notes-input {
    background: #374151;
    border-color: #4a5568;
    color: #e2e8f0;
}
[data-theme="dark"] .es-footer {
    background: #2d3748;
    border-color: #4a5568;
}
[data-theme="dark"] .es-btn-cancel {
    background: #374151;
    border-color: #4a5568;
    color: #e2e8f0;
}
[data-theme="dark"] .es-section-label {
    color: #818cf8;
}
[data-theme="dark"] .es-section-divider {
    color: #64748b;
}
[data-theme="dark"] .es-section-divider::after {
    background: #4a5568;
}
[data-theme="dark"] .es-toggle-others:hover {
    color: #818cf8;
}
[data-theme="dark"] .es-toggle-count {
    color: #64748b;
}
</style>