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

<swp-detail-grid>
    <!-- Left column -->
    <div>
        <!-- Basic Info Card -->
        <swp-card>
            <swp-section-label>@Model.LabelBasic</swp-section-label>
            <swp-edit-section>
                <swp-edit-row>
                    <swp-edit-label>@Model.LabelServiceName</swp-edit-label>
                    <input type="text" id="servicename" value="@Model.Name">
                </swp-edit-row>
                <swp-edit-row>
                    <swp-edit-label>@Model.LabelCategory</swp-edit-label>
                    <swp-select data-value="@Model.CategoryValue">
                        <button type="button" popovertarget="category-select" aria-expanded="false">
                            <swp-select-value>@Model.Category</swp-select-value>
                            <i class="ph ph-caret-down"></i>
                        </button>
                        <div popover id="category-select">
                            <swp-select-option data-value="kombi" class="@(Model.CategoryValue == "kombi" ? "selected" : "")">Kombi-behandlinger</swp-select-option>
                            <swp-select-option data-value="klip" class="@(Model.CategoryValue == "klip" ? "selected" : "")">Klip</swp-select-option>
                            <swp-select-option data-value="farve" class="@(Model.CategoryValue == "farve" ? "selected" : "")">Farve</swp-select-option>
                            <swp-select-option data-value="behandlinger" class="@(Model.CategoryValue == "behandlinger" ? "selected" : "")">Behandlinger</swp-select-option>
                            <swp-select-option data-value="styling" class="@(Model.CategoryValue == "styling" ? "selected" : "")">Styling</swp-select-option>
                        </div>
                    </swp-select>
                </swp-edit-row>
                <swp-edit-row>
                    <swp-edit-label>@Model.LabelCalendarColor</swp-edit-label>
                    <swp-select data-value="@Model.CalendarColor">
                        <button type="button" popovertarget="color-select" aria-expanded="false">
                            <swp-select-value>@Model.CalendarColorLabel</swp-select-value>
                            <i class="ph ph-caret-down"></i>
                        </button>
                        <div popover id="color-select">
                            <swp-select-option data-value="red" class="@(Model.CalendarColor == "red" ? "selected" : "")">Rød</swp-select-option>
                            <swp-select-option data-value="pink" class="@(Model.CalendarColor == "pink" ? "selected" : "")">Pink</swp-select-option>
                            <swp-select-option data-value="purple" class="@(Model.CalendarColor == "purple" ? "selected" : "")">Lilla</swp-select-option>
                            <swp-select-option data-value="deep-purple" class="@(Model.CalendarColor == "deep-purple" ? "selected" : "")">Mørk lilla</swp-select-option>
                            <swp-select-option data-value="indigo" class="@(Model.CalendarColor == "indigo" ? "selected" : "")">Indigo</swp-select-option>
                            <swp-select-option data-value="blue" class="@(Model.CalendarColor == "blue" ? "selected" : "")">Blå</swp-select-option>
                            <swp-select-option data-value="light-blue" class="@(Model.CalendarColor == "light-blue" ? "selected" : "")">Lyseblå</swp-select-option>
                            <swp-select-option data-value="cyan" class="@(Model.CalendarColor == "cyan" ? "selected" : "")">Cyan</swp-select-option>
                            <swp-select-option data-value="teal" class="@(Model.CalendarColor == "teal" ? "selected" : "")">Teal</swp-select-option>
                            <swp-select-option data-value="green" class="@(Model.CalendarColor == "green" ? "selected" : "")">Grøn</swp-select-option>
                            <swp-select-option data-value="light-green" class="@(Model.CalendarColor == "light-green" ? "selected" : "")">Lysegrøn</swp-select-option>
                            <swp-select-option data-value="lime" class="@(Model.CalendarColor == "lime" ? "selected" : "")">Lime</swp-select-option>
                            <swp-select-option data-value="yellow" class="@(Model.CalendarColor == "yellow" ? "selected" : "")">Gul</swp-select-option>
                            <swp-select-option data-value="amber" class="@(Model.CalendarColor == "amber" ? "selected" : "")">Amber</swp-select-option>
                            <swp-select-option data-value="orange" class="@(Model.CalendarColor == "orange" ? "selected" : "")">Orange</swp-select-option>
                            <swp-select-option data-value="deep-orange" class="@(Model.CalendarColor == "deep-orange" ? "selected" : "")">Mørk orange</swp-select-option>
                        </div>
                    </swp-select>
                </swp-edit-row>
                <swp-edit-row>
                    <swp-edit-label>@Model.LabelIsActive</swp-edit-label>
                    <swp-toggle-slider data-value="@(Model.IsActive ? "yes" : "no")">
                        <swp-toggle-option>@Model.ToggleYes</swp-toggle-option>
                        <swp-toggle-option>@Model.ToggleNo</swp-toggle-option>
                    </swp-toggle-slider>
                </swp-edit-row>
            </swp-edit-section>

            <swp-section-label class="spaced">@Model.LabelInternalNotes</swp-section-label>
            <textarea id="internalnotes" rows="3">@Model.InternalNotes</textarea>
        </swp-card>

        <!-- Booking Type Card -->
        <swp-card>
            <swp-section-label>@Model.LabelBookingType</swp-section-label>
            <swp-toggle-row>
                <div>
                    <swp-toggle-label>@Model.LabelCanBookAsMain</swp-toggle-label>
                    <swp-toggle-description>@Model.LabelCanBookAsMainDesc</swp-toggle-description>
                </div>
                <swp-toggle-slider data-value="@(Model.CanBookAsMain ? "yes" : "no")">
                    <swp-toggle-option>@Model.ToggleYes</swp-toggle-option>
                    <swp-toggle-option>@Model.ToggleNo</swp-toggle-option>
                </swp-toggle-slider>
            </swp-toggle-row>
            <swp-toggle-row>
                <div>
                    <swp-toggle-label>@Model.LabelCanBookAsAddon</swp-toggle-label>
                    <swp-toggle-description>@Model.LabelCanBookAsAddonDesc</swp-toggle-description>
                </div>
                <swp-toggle-slider data-value="@(Model.CanBookAsAddon ? "yes" : "no")">
                    <swp-toggle-option>@Model.ToggleYes</swp-toggle-option>
                    <swp-toggle-option>@Model.ToggleNo</swp-toggle-option>
                </swp-toggle-slider>
            </swp-toggle-row>
        </swp-card>
    </div>

    <!-- Right column -->
    <div>
        <!-- Online Booking Card -->
        <swp-card>
            <swp-section-label>@Model.LabelOnlineBooking</swp-section-label>
            <swp-toggle-row>
                <div>
                    <swp-toggle-label>@Model.LabelShowInOnlineBooking</swp-toggle-label>
                    <swp-toggle-description>@Model.LabelShowInOnlineBookingDesc</swp-toggle-description>
                </div>
                <swp-toggle-slider data-value="@(Model.ShowInOnlineBooking ? "yes" : "no")">
                    <swp-toggle-option>@Model.ToggleYes</swp-toggle-option>
                    <swp-toggle-option>@Model.ToggleNo</swp-toggle-option>
                </swp-toggle-slider>
            </swp-toggle-row>
            <swp-toggle-row>
                <div>
                    <swp-toggle-label>@Model.LabelIsFeatured</swp-toggle-label>
                    <swp-toggle-description>@Model.LabelIsFeaturedDesc</swp-toggle-description>
                </div>
                <swp-toggle-slider data-value="@(Model.IsFeatured ? "yes" : "no")">
                    <swp-toggle-option>@Model.ToggleYes</swp-toggle-option>
                    <swp-toggle-option>@Model.ToggleNo</swp-toggle-option>
                </swp-toggle-slider>
            </swp-toggle-row>

            <swp-section-label class="spaced">@Model.LabelDescription</swp-section-label>
            <textarea id="description" rows="4">@Model.Description</textarea>

            <swp-section-label class="spaced">@Model.LabelImage</swp-section-label>
            <swp-btn class="secondary">@Model.LabelUploadImage</swp-btn>
        </swp-card>
    </div>
</swp-detail-grid>