@model PlanTempus.Application.Features.Services.Components.ServiceDetailEmployeesViewModel

<swp-detail-grid>
    <swp-card-column>
        <swp-card>
            <swp-card-header>
                <swp-card-title>@Model.LabelEmployeesForService</swp-card-title>
            </swp-card-header>
            <swp-selectable-list>
                @foreach (var employee in Model.Employees)
                {
                    <swp-selectable-item class="@(employee.Selected ? "selected" : "") @(employee.Warning != null ? "disabled" : "")">
                        <swp-selectable-checkbox>
                            <svg viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>
                        </swp-selectable-checkbox>
                        <swp-avatar class="@employee.LevelCssClass">@employee.Initials</swp-avatar>
                        <swp-selectable-info>
                            <swp-selectable-name>
                                @employee.Name
                                @if (employee.Warning != null)
                                {
                                    <swp-selectable-warning>@employee.Warning</swp-selectable-warning>
                                }
                            </swp-selectable-name>
                            <swp-tag class="@employee.LevelCssClass">@employee.Level</swp-tag>
                        </swp-selectable-info>
                        <swp-selectable-override>
                            @Model.LabelDuration: <swp-selectable-override-value>@employee.OverrideValue</swp-selectable-override-value>
                        </swp-selectable-override>
                    </swp-selectable-item>
                }
            </swp-selectable-list>

            <swp-see-all>@Model.LabelSelectAll</swp-see-all>
        </swp-card>
    </swp-card-column>

    <swp-card-column>
        <swp-card>
            <swp-card-header>
                <swp-card-title>@Model.LabelAvailability</swp-card-title>
            </swp-card-header>
            <swp-availability-list>
                @foreach (var day in Model.Availability)
                {
                    <swp-availability-row data-enabled="@(day.Enabled ? "true" : "false")">
                        <swp-availability-day>@day.Day</swp-availability-day>
                        <swp-toggle-slider data-value="@(day.Enabled ? "yes" : "no")">
                            <swp-toggle-option>@Model.ToggleYes</swp-toggle-option>
                            <swp-toggle-option>@Model.ToggleNo</swp-toggle-option>
                        </swp-toggle-slider>
                        <swp-availability-time>
                            <swp-time-range>
                                <swp-time-range-slider>
                                    <swp-time-range-track></swp-time-range-track>
                                    <swp-time-range-fill></swp-time-range-fill>
                                    <input type="range" class="range-start" min="0" max="60" value="8" step="1" @(day.Enabled ? "" : "disabled")>
                                    <input type="range" class="range-end" min="0" max="60" value="48" step="1" @(day.Enabled ? "" : "disabled")>
                                </swp-time-range-slider>
                                <swp-time-range-label>@day.StartTime – @day.EndTime</swp-time-range-label>
                            </swp-time-range>
                        </swp-availability-time>
                    </swp-availability-row>
                }
            </swp-availability-list>
        </swp-card>
    </swp-card-column>
</swp-detail-grid>
