@model PlanTempus.Application.Features.Employees.Components.EmployeeDetailViewViewModel

<swp-employee-detail-view id="employee-detail-view" data-employee="@Model.EmployeeKey">
    <!-- 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-employee-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>

            <!-- Employee Header -->
            @await Component.InvokeAsync("EmployeeDetailHeader", Model.EmployeeKey)
        </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="hours">@Model.TabHours</swp-tab>
            <swp-tab data-tab="services">@Model.TabServices</swp-tab>
            <swp-tab data-tab="salary">@Model.TabSalary</swp-tab>
            <swp-tab data-tab="hr">@Model.TabHR</swp-tab>
            <swp-tab data-tab="stats">@Model.TabStats</swp-tab>
        </swp-tab-bar>
    </swp-sticky-header>

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

    <swp-tab-content data-tab="hours">
        <swp-page-container>
            @await Component.InvokeAsync("EmployeeDetailHours", Model.EmployeeKey)
        </swp-page-container>
    </swp-tab-content>

    <swp-tab-content data-tab="services">
        <swp-page-container>
            @await Component.InvokeAsync("EmployeeDetailServices", Model.EmployeeKey)
        </swp-page-container>
    </swp-tab-content>

    <swp-tab-content data-tab="salary">
        <swp-page-container>
            @await Component.InvokeAsync("EmployeeDetailSalary", Model.EmployeeKey)
        </swp-page-container>
    </swp-tab-content>

    <swp-tab-content data-tab="hr">
        <swp-page-container>
            @await Component.InvokeAsync("EmployeeDetailHR", Model.EmployeeKey)
        </swp-page-container>
    </swp-tab-content>

    <swp-tab-content data-tab="stats">
        <swp-page-container>
            @await Component.InvokeAsync("EmployeeDetailStats", Model.EmployeeKey)
        </swp-page-container>
    </swp-tab-content>
</swp-employee-detail-view>