@page "/services"
@using PlanTempus.Application.Features.Services.Components
@model PlanTempus.Application.Features.Services.Pages.IndexModel
@{
    ViewData["Title"] = "Services";
}

<swp-services-list-view id="services-list-view">
    <swp-sticky-header>
        <swp-header-content>
            <swp-page-header>
                <swp-page-title>
                    <h1 localize="services.title">Services</h1>
                    <p localize="services.subtitle">Administrer services og priser</p>
                </swp-page-title>
            </swp-page-header>

            <swp-stats-row>
                @await Component.InvokeAsync("ServiceStatCard", "total-services")
                @await Component.InvokeAsync("ServiceStatCard", "active-categories")
                @await Component.InvokeAsync("ServiceStatCard", "average-price")
            </swp-stats-row>
        </swp-header-content>

        <swp-tab-bar>
            <swp-tab class="active" data-tab="services">
                <i class="ph ph-scissors"></i>
                <span localize="services.tabs.services">Services</span>
            </swp-tab>
            <swp-tab data-tab="categories">
                <i class="ph ph-folders"></i>
                <span localize="services.tabs.categories">Kategorier</span>
            </swp-tab>
        </swp-tab-bar>
    </swp-sticky-header>

    <!-- Tab: Services -->
    <swp-tab-content data-tab="services" class="active">
        <swp-page-container>
            @await Component.InvokeAsync("ServiceTable", "all-services")
        </swp-page-container>
    </swp-tab-content>

    <!-- Tab: Categories -->
    <swp-tab-content data-tab="categories">
        <swp-page-container>
            @await Component.InvokeAsync("CategoryTable", "all-categories")
        </swp-page-container>
    </swp-tab-content>
</swp-services-list-view>