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

<swp-card>
    <swp-card-header>
        <swp-card-title>@Model.LabelPriceStructure</swp-card-title>
    </swp-card-header>
    <swp-price-mode>
        <swp-price-mode-btn data-mode="simple" class="@(Model.PriceMode == PlanTempus.Application.Features.Services.Components.PriceMode.Simple ? "active" : "")">@Model.LabelSimplePrice</swp-price-mode-btn>
        <swp-price-mode-btn data-mode="matrix" class="@(Model.PriceMode == PlanTempus.Application.Features.Services.Components.PriceMode.Matrix ? "active" : "")">@Model.LabelMatrixPrice</swp-price-mode-btn>
    </swp-price-mode>

    <!-- Simple price view -->
    <swp-price-simple style="display: @(Model.PriceMode == PlanTempus.Application.Features.Services.Components.PriceMode.Simple ? "block" : "none");">
        <swp-edit-section>
            <swp-edit-row>
                <swp-edit-label>@Model.LabelPrice</swp-edit-label>
                <swp-edit-value contenteditable="true">@Model.SimplePrice</swp-edit-value>
            </swp-edit-row>
        </swp-edit-section>
    </swp-price-simple>

    <!-- Matrix price view -->
    <swp-price-matrix style="display: @(Model.PriceMode == PlanTempus.Application.Features.Services.Components.PriceMode.Matrix ? "block" : "none");">
        <swp-data-table class="price-matrix">
            <swp-data-table-header>
                <swp-data-table-cell>@Model.LabelLevel</swp-data-table-cell>
                <swp-data-table-cell>@Model.LabelShortHair</swp-data-table-cell>
                <swp-data-table-cell>@Model.LabelMediumHair</swp-data-table-cell>
                <swp-data-table-cell>@Model.LabelLongHair</swp-data-table-cell>
                <swp-data-table-cell>@Model.LabelExtraLongHair</swp-data-table-cell>
            </swp-data-table-header>
            @foreach (var row in Model.PriceMatrix)
            {
                <swp-data-table-row>
                    <swp-data-table-cell>@row.Level</swp-data-table-cell>
                    <swp-data-table-cell class="mono"><span contenteditable="true">@row.ShortHair</span> kr</swp-data-table-cell>
                    <swp-data-table-cell class="mono"><span contenteditable="true">@row.MediumHair</span> kr</swp-data-table-cell>
                    <swp-data-table-cell class="mono"><span contenteditable="true">@row.LongHair</span> kr</swp-data-table-cell>
                    <swp-data-table-cell class="mono"><span contenteditable="true">@row.ExtraLongHair</span> kr</swp-data-table-cell>
                </swp-data-table-row>
            }
        </swp-data-table>

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

<swp-detail-grid>
    <swp-card>
        <swp-card-header>
            <swp-card-title>@Model.LabelEconomy</swp-card-title>
        </swp-card-header>
        <swp-edit-section>
            <swp-edit-row>
                <swp-edit-label>@Model.LabelVatRate</swp-edit-label>
                <swp-select data-value="@Model.VatRate">
                    <button type="button" aria-expanded="false">
                        <swp-select-value>@(Model.VatRate == "25" ? "25% (standard)" : "0% (momsfri)")</swp-select-value>
                        <i class="ph ph-caret-down"></i>
                    </button>
                    <swp-select-dropdown>
                        <swp-select-option data-value="25" class="@(Model.VatRate == "25" ? "selected" : "")">25% (standard)</swp-select-option>
                        <swp-select-option data-value="0" class="@(Model.VatRate == "0" ? "selected" : "")">0% (momsfri)</swp-select-option>
                    </swp-select-dropdown>
                </swp-select>
            </swp-edit-row>
            <swp-edit-row>
                <swp-edit-label>@Model.LabelProductCost</swp-edit-label>
                <swp-edit-value contenteditable="true">@Model.ProductCost</swp-edit-value>
            </swp-edit-row>
            <swp-edit-row>
                <swp-edit-label>@Model.LabelCommission</swp-edit-label>
                <swp-select data-value="@Model.Commission">
                    <button type="button" aria-expanded="false">
                        <swp-select-value>@(Model.Commission == "standard" ? "Standard (fra lønsats)" : Model.Commission == "fixed" ? "Fast beløb" : "Procent af pris")</swp-select-value>
                        <i class="ph ph-caret-down"></i>
                    </button>
                    <swp-select-dropdown>
                        <swp-select-option data-value="standard" class="@(Model.Commission == "standard" ? "selected" : "")">Standard (fra lønsats)</swp-select-option>
                        <swp-select-option data-value="fixed" class="@(Model.Commission == "fixed" ? "selected" : "")">Fast beløb</swp-select-option>
                        <swp-select-option data-value="percent" class="@(Model.Commission == "percent" ? "selected" : "")">Procent af pris</swp-select-option>
                    </swp-select-dropdown>
                </swp-select>
            </swp-edit-row>
        </swp-edit-section>
    </swp-card>

    <swp-card>
        <swp-card-header>
            <swp-card-title>@Model.LabelDiscounts</swp-card-title>
        </swp-card-header>
        <swp-toggle-row>
            <swp-toggle-label>@Model.LabelMemberDiscount</swp-toggle-label>
            <swp-toggle-slider data-value="@(Model.MemberDiscount ? "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>
            <swp-toggle-label>@Model.LabelGiftCardPayment</swp-toggle-label>
            <swp-toggle-slider data-value="@(Model.GiftCardPayment ? "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>
            <swp-toggle-label>@Model.LabelLoyaltyPoints</swp-toggle-label>
            <swp-toggle-slider data-value="@(Model.LoyaltyPoints ? "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>
</swp-detail-grid>
