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

<!-- List View (default) -->
<swp-employees-list-view id="employees-list-view">
    <!-- Sticky Header (Header + Tabs) -->
    <swp-sticky-header>
        <!-- Header with page title and stats (has border-bottom) -->
        <swp-header-content>
            <swp-page-header>
                <swp-page-title>
                    <h1 localize="employees.title">Medarbejdere</h1>
                    <p localize="employees.subtitle">Administrer brugere, roller og rettigheder</p>
                </swp-page-title>
            </swp-page-header>

            <swp-stats-row>
                @await Component.InvokeAsync("EmployeeStatCard", "active-employees")
                @await Component.InvokeAsync("EmployeeStatCard", "pending-invitations")
                @await Component.InvokeAsync("EmployeeStatCard", "roles-defined")
            </swp-stats-row>
        </swp-header-content>

        <!-- Tab bar (outside header, so line is above tabs) -->
        <swp-tab-bar>
            <swp-tab class="active" data-tab="users">
                <i class="ph ph-users"></i>
                <span localize="employees.tabs.users">Brugere</span>
            </swp-tab>
            <swp-tab data-tab="roles">
                <i class="ph ph-shield-check"></i>
                <span localize="employees.tabs.roles">Roller</span>
            </swp-tab>
            <swp-tab data-tab="schedule">
                <i class="ph ph-calendar-dots"></i>
                <span localize="employees.detail.tabs.schedule">Vagtplan</span>
            </swp-tab>
        </swp-tab-bar>
    </swp-sticky-header>

    <!-- Tab: Users -->
    <swp-tab-content data-tab="users" class="active">
        <swp-page-container>
            @await Component.InvokeAsync("EmployeeTable", "all-employees")
        </swp-page-container>
    </swp-tab-content>

    <!-- Tab: Roles -->
    <swp-tab-content data-tab="roles">
        <swp-page-container>
            @await Component.InvokeAsync("PermissionsMatrix", "default")
        </swp-page-container>
    </swp-tab-content>

    <!-- Tab: Schedule -->
    <swp-tab-content data-tab="schedule">
        <swp-page-container>
            @await Component.InvokeAsync("EmployeeWorkSchedule", "default")
        </swp-page-container>
    </swp-tab-content>
</swp-employees-list-view>

<!-- Detail View (hidden by default, shown when row clicked) -->
@await Component.InvokeAsync("EmployeeDetailView", "employee-1")