130 lines
8.4 KiB
Text
130 lines
8.4 KiB
Text
|
@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>
|