PlanTempusApp/PlanTempus.Application/Features/Settings/Pages/Index.cshtml

@page "/indstillinger"
@using PlanTempus.Application.Features.Settings.Pages
@model PlanTempus.Application.Features.Settings.Pages.IndexModel
@{
    ViewData["Title"] = "Indstillinger";
}

<!-- Sticky Header with Tabs -->
<swp-sticky-header>
    <swp-header-content>
        <swp-page-header>
            <swp-page-title>
                <i class="ph ph-gear"></i>
                <span localize="settings.title">Indstillinger</span>
            </swp-page-title>
        </swp-page-header>
    </swp-header-content>

    <!-- Tab Bar -->
    <swp-tab-bar>
        <swp-tab class="active" data-tab="calendar">
            <i class="ph ph-calendar"></i>
            <span localize="settings.tabs.calendar">Kalender</span>
        </swp-tab>
        <swp-tab data-tab="billing">
            <i class="ph ph-receipt"></i>
            <span localize="settings.tabs.billing">Faktura & Kvittering</span>
        </swp-tab>
        <swp-tab data-tab="reminders">
            <i class="ph ph-bell"></i>
            <span localize="settings.tabs.reminders">Påmindelser</span>
        </swp-tab>
        <swp-tab data-tab="payments">
            <i class="ph ph-credit-card"></i>
            <span localize="settings.tabs.payments">Betalinger</span>
        </swp-tab>
        <swp-tab data-tab="modules">
            <i class="ph ph-puzzle-piece"></i>
            <span localize="settings.tabs.modules">Moduler</span>
        </swp-tab>
        <swp-tab data-tab="tracking">
            <i class="ph ph-chart-line-up"></i>
            <span localize="settings.tabs.tracking">Tracking</span>
        </swp-tab>
    </swp-tab-bar>
</swp-sticky-header>

<!-- Tab Content: Kalender -->
<swp-tab-content data-tab="calendar" class="active">
    <swp-page-container>
        @await Component.InvokeAsync("SettingsCalendar")
    </swp-page-container>
</swp-tab-content>

<!-- Tab Content: Faktura & Kvittering -->
<swp-tab-content data-tab="billing">
    <swp-page-container>
        @await Component.InvokeAsync("SettingsBilling")
    </swp-page-container>
</swp-tab-content>

<!-- Tab Content: Påmindelser -->
<swp-tab-content data-tab="reminders">
    <swp-page-container>
        @await Component.InvokeAsync("SettingsReminders")
    </swp-page-container>
</swp-tab-content>

<!-- Tab Content: Betalinger -->
<swp-tab-content data-tab="payments">
    <swp-page-container>
        @await Component.InvokeAsync("SettingsPayments")
    </swp-page-container>
</swp-tab-content>

<!-- Tab Content: Moduler -->
<swp-tab-content data-tab="modules">
    <swp-page-container>
        @await Component.InvokeAsync("SettingsModules")
    </swp-page-container>
</swp-tab-content>

<!-- Tab Content: Tracking -->
<swp-tab-content data-tab="tracking">
    <swp-page-container>
        @await Component.InvokeAsync("SettingsTracking")
    </swp-page-container>
</swp-tab-content>