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

<swp-action-bar>
    <swp-search-input>
        <i class="ph ph-magnifying-glass"></i>
        <input type="text" placeholder="@Model.SearchPlaceholder" />
    </swp-search-input>
    <swp-btn-group>
        <swp-btn class="secondary" data-drawer-trigger="category-drawer">
            <i class="ph ph-folders"></i>
            @Model.CreateCategoryButtonText
        </swp-btn>
        <swp-btn class="primary">
            <i class="ph ph-plus"></i>
            @Model.CreateButtonText
        </swp-btn>
    </swp-btn-group>
</swp-action-bar>

<swp-card class="services-list">
    <swp-data-table>
        <swp-data-table-header>
            <swp-data-table-cell>@Model.ColumnService</swp-data-table-cell>
            <swp-data-table-cell>@Model.ColumnDuration</swp-data-table-cell>
            <swp-data-table-cell>@Model.ColumnPrice</swp-data-table-cell>
            <swp-data-table-cell></swp-data-table-cell>
        </swp-data-table-header>
        @foreach (var category in Model.Categories)
        {
            @await Component.InvokeAsync("ServiceCategoryGroup", category)
        }
    </swp-data-table>
</swp-card>

<!-- Category Drawer -->
<div id="category-drawer" data-drawer="lg">
    <swp-drawer-header>
        <swp-drawer-title localize="services.categoryDrawer.title">Opret kategori</swp-drawer-title>
        <swp-drawer-close data-drawer-close>
            <i class="ph ph-x"></i>
        </swp-drawer-close>
    </swp-drawer-header>

    <swp-drawer-body>
        <swp-form-row>
            <swp-form-label localize="services.categoryDrawer.name">Kategorinavn</swp-form-label>
            <input type="text" id="category-name" placeholder="F.eks. Klip & Styling">
        </swp-form-row>

        <swp-form-row>
            <swp-form-label localize="services.categoryDrawer.description">Beskrivelse</swp-form-label>
            <textarea id="category-description" rows="3" placeholder="Vises i online booking..."></textarea>
        </swp-form-row>

        <swp-form-divider></swp-form-divider>

        <!-- Synlighed sektion -->
        <swp-section-label localize="services.categoryDrawer.visibilitySection">Synlighed</swp-section-label>

        <swp-toggle-row>
            <swp-toggle-label>
                <span localize="services.categoryDrawer.showInBooking">Kategorien skal vises i online booking</span>
                <swp-toggle-description localize="services.categoryDrawer.showInBookingDescription">Kategorien vil stadig være synlig her i systemet</swp-toggle-description>
            </swp-toggle-label>
            <swp-toggle-slider data-value="yes">
                <swp-toggle-option localize="common.yes">Ja</swp-toggle-option>
                <swp-toggle-option localize="common.no">Nej</swp-toggle-option>
            </swp-toggle-slider>
        </swp-toggle-row>

        <swp-form-row class="spaced">
            <swp-form-label localize="services.categoryDrawer.timePeriod">Skal kun være synlig i følgende tidsperiode</swp-form-label>
            <swp-date-range>
                <input type="date" id="category-start-date" class="inactive">
                <span>–</span>
                <input type="date" id="category-end-date" class="inactive">
            </swp-date-range>
            <swp-form-hint localize="services.categoryDrawer.timePeriodHint">Efterlad felterne blanke for ingen tidsbegrænsning</swp-form-hint>
        </swp-form-row>
    </swp-drawer-body>

    <swp-drawer-footer>
        <swp-btn class="secondary" data-drawer-close localize="common.cancel">Annuller</swp-btn>
        <swp-btn class="primary" localize="services.categoryDrawer.save">Gem kategori</swp-btn>
    </swp-drawer-footer>
</div>