<p-drawer [visible]="visible()" (visibleChange)="onVisibleChange($event)" position="right" [style]="{ width: 'var(--site-settings-drawer-width)', maxWidth: '100vw' }">
    <div class="site-settings-shell">
        <header class="site-settings-header">
            <nav class="site-settings-breadcrumb" aria-label="Breadcrumb">
                <span>{{ "sites.settings.breadcrumb.sites" | transloco }}</span>
                <i class="pi pi-angle-right" aria-hidden="true"></i>
                <span class="site-settings-breadcrumb__current">{{ site()?.domain }}</span>
                <i class="pi pi-angle-right" aria-hidden="true"></i>
                <span>{{ "sites.settings.breadcrumb.settings" | transloco }}</span>
            </nav>
            <h2>{{ "sites.settings.title" | transloco }}</h2>
        </header>

        <p-tabs class="site-settings-tabs" [value]="activeTab()" (valueChange)="onActiveTabChange($event)">
            <p-tablist>
                <p-tab value="0">
                    <span class="site-settings-tab-label">
                        <i class="pi pi-cog" aria-hidden="true"></i>
                        <span>{{ "sites.settings.tabs.general" | transloco }}</span>
                    </span>
                </p-tab>
                <p-tab value="1">
                    <span class="site-settings-tab-label">
                        <i class="pi pi-code" aria-hidden="true"></i>
                        <span>{{ "sites.settings.tabs.tracking" | transloco }}</span>
                    </span>
                </p-tab>
                @if (canManageFiltering()) {
                <p-tab value="2">
                    <span class="site-settings-tab-label">
                        <i class="pi pi-filter-slash" aria-hidden="true"></i>
                        <span>{{ "sites.settings.tabs.filtering" | transloco }}</span>
                    </span>
                </p-tab>
                } @if (canManageData()) {
                <p-tab value="3">
                    <span class="site-settings-tab-label">
                        <i class="pi pi-history" aria-hidden="true"></i>
                        <span>{{ "sites.settings.tabs.retention" | transloco }}</span>
                    </span>
                </p-tab>
                } @if (canManageTeam()) {
                <p-tab value="4">
                    <span class="site-settings-tab-label">
                        <i class="pi pi-users" aria-hidden="true"></i>
                        <span>{{ "sites.settings.tabs.team" | transloco }}</span>
                    </span>
                </p-tab>
                } @if (canDeleteSite()) {
                <p-tab value="5">
                    <span class="site-settings-tab-label site-settings-tab-label--danger">
                        <i class="pi pi-exclamation-triangle" aria-hidden="true"></i>
                        <span>{{ "sites.settings.tabs.dangerZone" | transloco }}</span>
                    </span>
                </p-tab>
                }
            </p-tablist>
            <p-tabpanels>
                <p-tabpanel value="0">
                    @if (visible() && activeTab() === "0") {
                    <app-site-general-settings [site]="site()" />
                    }
                </p-tabpanel>
                <p-tabpanel value="1">
                    @if (visible() && activeTab() === "1") {
                    <app-site-tracking-settings [site]="site()" />
                    }
                </p-tabpanel>
                <p-tabpanel value="2">
                    @if (visible() && activeTab() === "2" && canManageFiltering()) {
                    <app-site-exclusion-settings [site]="site()" />
                    }
                </p-tabpanel>
                <p-tabpanel value="3">
                    @if (visible() && activeTab() === "3" && canManageData()) {
                    <app-site-retention-settings [site]="site()" />
                    }
                </p-tabpanel>
                <p-tabpanel value="4">
                    @if (visible() && activeTab() === "4" && canManageTeam()) {
                    <app-site-team-settings [site]="site()" />
                    }
                </p-tabpanel>
                <p-tabpanel value="5">
                    @if (visible() && activeTab() === "5" && canDeleteSite()) {
                    <app-site-danger-zone [site]="site()" />
                    }
                </p-tabpanel>
            </p-tabpanels>
        </p-tabs>
    </div>
</p-drawer>
