PlanTempusApp/PlanTempus.Application/Features/Services/Components/ServiceDetailGeneral/Default.cshtml

@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" aria-expanded="false">
                            <swp-select-value>@Model.Category</swp-select-value>
                            <i class="ph ph-caret-down"></i>
                        </button>
                        <swp-select-dropdown>
                            <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>
                        </swp-select-dropdown>
                    </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" aria-expanded="false">
                            <swp-color-dot class="is-@Model.CalendarColor"></swp-color-dot>
                            <swp-select-value>@Model.CalendarColorLabel</swp-select-value>
                            <i class="ph ph-caret-down"></i>
                        </button>
                        <swp-select-dropdown>
                            <swp-select-option data-value="red" class="@(Model.CalendarColor == "red" ? "selected" : "")"><swp-color-dot class="is-red"></swp-color-dot><span>Rød</span></swp-select-option>
                            <swp-select-option data-value="pink" class="@(Model.CalendarColor == "pink" ? "selected" : "")"><swp-color-dot class="is-pink"></swp-color-dot><span>Pink</span></swp-select-option>
                            <swp-select-option data-value="purple" class="@(Model.CalendarColor == "purple" ? "selected" : "")"><swp-color-dot class="is-purple"></swp-color-dot><span>Lilla</span></swp-select-option>
                            <swp-select-option data-value="deep-purple" class="@(Model.CalendarColor == "deep-purple" ? "selected" : "")"><swp-color-dot class="is-deep-purple"></swp-color-dot><span>Mørk lilla</span></swp-select-option>
                            <swp-select-option data-value="indigo" class="@(Model.CalendarColor == "indigo" ? "selected" : "")"><swp-color-dot class="is-indigo"></swp-color-dot><span>Indigo</span></swp-select-option>
                            <swp-select-option data-value="blue" class="@(Model.CalendarColor == "blue" ? "selected" : "")"><swp-color-dot class="is-blue"></swp-color-dot><span>Blå</span></swp-select-option>
                            <swp-select-option data-value="light-blue" class="@(Model.CalendarColor == "light-blue" ? "selected" : "")"><swp-color-dot class="is-light-blue"></swp-color-dot><span>Lyseblå</span></swp-select-option>
                            <swp-select-option data-value="cyan" class="@(Model.CalendarColor == "cyan" ? "selected" : "")"><swp-color-dot class="is-cyan"></swp-color-dot><span>Cyan</span></swp-select-option>
                            <swp-select-option data-value="teal" class="@(Model.CalendarColor == "teal" ? "selected" : "")"><swp-color-dot class="is-teal"></swp-color-dot><span>Teal</span></swp-select-option>
                            <swp-select-option data-value="green" class="@(Model.CalendarColor == "green" ? "selected" : "")"><swp-color-dot class="is-green"></swp-color-dot><span>Grøn</span></swp-select-option>
                            <swp-select-option data-value="light-green" class="@(Model.CalendarColor == "light-green" ? "selected" : "")"><swp-color-dot class="is-light-green"></swp-color-dot><span>Lysegrøn</span></swp-select-option>
                            <swp-select-option data-value="lime" class="@(Model.CalendarColor == "lime" ? "selected" : "")"><swp-color-dot class="is-lime"></swp-color-dot><span>Lime</span></swp-select-option>
                            <swp-select-option data-value="yellow" class="@(Model.CalendarColor == "yellow" ? "selected" : "")"><swp-color-dot class="is-yellow"></swp-color-dot><span>Gul</span></swp-select-option>
                            <swp-select-option data-value="amber" class="@(Model.CalendarColor == "amber" ? "selected" : "")"><swp-color-dot class="is-amber"></swp-color-dot><span>Amber</span></swp-select-option>
                            <swp-select-option data-value="orange" class="@(Model.CalendarColor == "orange" ? "selected" : "")"><swp-color-dot class="is-orange"></swp-color-dot><span>Orange</span></swp-select-option>
                            <swp-select-option data-value="deep-orange" class="@(Model.CalendarColor == "deep-orange" ? "selected" : "")"><swp-color-dot class="is-deep-orange"></swp-color-dot><span>Mørk orange</span></swp-select-option>
                        </swp-select-dropdown>
                    </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-add-button>
                <i class="ph ph-upload-simple"></i>
                @Model.LabelUploadImage
            </swp-add-button>
        </swp-card>
    </div>
</swp-detail-grid>