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

<swp-detail-grid>
    <swp-card>
        <swp-card-header>
            <swp-card-title>@Model.LabelDurationVariants</swp-card-title>
        </swp-card-header>
        <swp-duration-list>
            @foreach (var variant in Model.DurationVariants)
            {
                <swp-duration-item>
                    <swp-duration-name>@variant.Name</swp-duration-name>
                    <swp-duration-value>
                        <span contenteditable="true">@variant.Minutes</span>
                        <swp-duration-unit>@Model.LabelMinutes</swp-duration-unit>
                    </swp-duration-value>
                    <swp-duration-delete>
                        <i class="ph ph-x"></i>
                    </swp-duration-delete>
                </swp-duration-item>
            }
        </swp-duration-list>

        <swp-add-button>
            <i class="ph ph-plus"></i>
            @Model.LabelAddVariant
        </swp-add-button>
    </swp-card>

    <swp-card>
        <swp-card-header>
            <swp-card-title>@Model.LabelBufferTimes</swp-card-title>
        </swp-card-header>
        <swp-edit-section>
            <swp-edit-row>
                <swp-edit-label>@Model.LabelBufferBefore</swp-edit-label>
                <swp-select data-value="@Model.BufferBefore">
                    <button type="button" aria-expanded="false">
                        <swp-select-value>@(Model.BufferBefore == "0" ? "Ingen" : Model.BufferBefore + " minutter")</swp-select-value>
                        <i class="ph ph-caret-down"></i>
                    </button>
                    <swp-select-dropdown>
                        <swp-select-option data-value="0" class="@(Model.BufferBefore == "0" ? "selected" : "")">Ingen</swp-select-option>
                        <swp-select-option data-value="5" class="@(Model.BufferBefore == "5" ? "selected" : "")">5 minutter</swp-select-option>
                        <swp-select-option data-value="10" class="@(Model.BufferBefore == "10" ? "selected" : "")">10 minutter</swp-select-option>
                        <swp-select-option data-value="15" class="@(Model.BufferBefore == "15" ? "selected" : "")">15 minutter</swp-select-option>
                        <swp-select-option data-value="30" class="@(Model.BufferBefore == "30" ? "selected" : "")">30 minutter</swp-select-option>
                    </swp-select-dropdown>
                </swp-select>
            </swp-edit-row>
            <swp-edit-row>
                <swp-edit-label>@Model.LabelBufferAfter</swp-edit-label>
                <swp-select data-value="@Model.BufferAfter">
                    <button type="button" aria-expanded="false">
                        <swp-select-value>@(Model.BufferAfter == "0" ? "Ingen" : Model.BufferAfter + " minutter")</swp-select-value>
                        <i class="ph ph-caret-down"></i>
                    </button>
                    <swp-select-dropdown>
                        <swp-select-option data-value="0" class="@(Model.BufferAfter == "0" ? "selected" : "")">Ingen</swp-select-option>
                        <swp-select-option data-value="5" class="@(Model.BufferAfter == "5" ? "selected" : "")">5 minutter</swp-select-option>
                        <swp-select-option data-value="10" class="@(Model.BufferAfter == "10" ? "selected" : "")">10 minutter</swp-select-option>
                        <swp-select-option data-value="15" class="@(Model.BufferAfter == "15" ? "selected" : "")">15 minutter</swp-select-option>
                        <swp-select-option data-value="30" class="@(Model.BufferAfter == "30" ? "selected" : "")">30 minutter</swp-select-option>
                    </swp-select-dropdown>
                </swp-select>
            </swp-edit-row>
            <swp-edit-row>
                <swp-edit-label>@Model.LabelCleanupTime</swp-edit-label>
                <swp-select data-value="@Model.CleanupTime">
                    <button type="button" aria-expanded="false">
                        <swp-select-value>@(Model.CleanupTime == "0" ? "Ingen" : Model.CleanupTime + " minutter")</swp-select-value>
                        <i class="ph ph-caret-down"></i>
                    </button>
                    <swp-select-dropdown>
                        <swp-select-option data-value="0" class="@(Model.CleanupTime == "0" ? "selected" : "")">Ingen</swp-select-option>
                        <swp-select-option data-value="5" class="@(Model.CleanupTime == "5" ? "selected" : "")">5 minutter</swp-select-option>
                        <swp-select-option data-value="10" class="@(Model.CleanupTime == "10" ? "selected" : "")">10 minutter</swp-select-option>
                        <swp-select-option data-value="15" class="@(Model.CleanupTime == "15" ? "selected" : "")">15 minutter</swp-select-option>
                    </swp-select-dropdown>
                </swp-select>
            </swp-edit-row>
        </swp-edit-section>
    </swp-card>
</swp-detail-grid>
