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

<swp-service-detail-view id="service-detail-view" data-service="@Model.ServiceKey">
    <!-- Sticky Header (generic from page.css) -->
    <swp-sticky-header>
        <swp-header-content>
            <!-- Page Header with Back Button -->
            <swp-page-header>
                <swp-page-title>
                    <swp-back-link data-service-back>
                        <i class="ph ph-arrow-left"></i>
                        @Model.BackText
                    </swp-back-link>
                </swp-page-title>
                <swp-page-actions>
                    <swp-btn class="primary">
                        <i class="ph ph-floppy-disk"></i>
                        @Model.SaveButtonText
                    </swp-btn>
                </swp-page-actions>
            </swp-page-header>

            <!-- Service Header -->
            @await Component.InvokeAsync("ServiceDetailHeader", Model.ServiceKey)
        </swp-header-content>

        <!-- Tabs (outside header-content, inside sticky-header) -->
        <swp-tab-bar>
            <swp-tab class="active" data-tab="general">@Model.TabGeneral</swp-tab>
            <swp-tab data-tab="prices">@Model.TabPrices</swp-tab>
            <swp-tab data-tab="duration">@Model.TabDuration</swp-tab>
            <swp-tab data-tab="employees">@Model.TabEmployees</swp-tab>
            <swp-tab data-tab="addons">@Model.TabAddons</swp-tab>
            <swp-tab data-tab="rules">@Model.TabRules</swp-tab>
        </swp-tab-bar>
    </swp-sticky-header>

    <!-- Tab Contents -->
    <swp-tab-content data-tab="general" class="active">
        <swp-page-container>
            @await Component.InvokeAsync("ServiceDetailGeneral", Model.ServiceKey)
        </swp-page-container>
    </swp-tab-content>

    <swp-tab-content data-tab="prices">
        <swp-page-container>
            <swp-card>
                <swp-section-label>Priser</swp-section-label>
                <p style="color: var(--color-text-secondary);">Priser-tab kommer snart...</p>
            </swp-card>
        </swp-page-container>
    </swp-tab-content>

    <swp-tab-content data-tab="duration">
        <swp-page-container>
            <swp-card>
                <swp-section-label>Varighed</swp-section-label>
                <p style="color: var(--color-text-secondary);">Varighed-tab kommer snart...</p>
            </swp-card>
        </swp-page-container>
    </swp-tab-content>

    <swp-tab-content data-tab="employees">
        <swp-page-container>
            <swp-card>
                <swp-section-label>Medarbejdere</swp-section-label>
                <p style="color: var(--color-text-secondary);">Medarbejdere-tab kommer snart...</p>
            </swp-card>
        </swp-page-container>
    </swp-tab-content>

    <swp-tab-content data-tab="addons">
        <swp-page-container>
            <swp-card>
                <swp-section-label>Tilvalg</swp-section-label>
                <p style="color: var(--color-text-secondary);">Tilvalg-tab kommer snart...</p>
            </swp-card>
        </swp-page-container>
    </swp-tab-content>

    <swp-tab-content data-tab="rules">
        <swp-page-container>
            <swp-card>
                <swp-section-label>Regler</swp-section-label>
                <p style="color: var(--color-text-secondary);">Regler-tab kommer snart...</p>
            </swp-card>
        </swp-page-container>
    </swp-tab-content>
</swp-service-detail-view>