<div class="user-portal-container">
    <!-- Background Elements -->
    <div class="background-shapes">
        <div class="shape shape-1"></div>
        <div class="shape shape-2"></div>
        <div class="shape shape-3"></div>
    </div>

    <!-- Main Portal Layout -->
    <div class="portal-layout">
        <!-- Sidebar Overlay for Mobile -->
        <div *ngIf="isMobile && !sidebarCollapsed" class="sidebar-overlay" (click)="onSidebarOverlayClick()">
        </div>

        <!-- Sidebar Navigation -->
        <aside class="sidebar" [class.collapsed]="sidebarCollapsed">
            <div class="sidebar-header">
                <div class="logo-section">
                    <img src="assets/images/ROLCC-Logo-Color.png" alt="ROLCC Logo" class="logo-image">
                    <div class="logo-text" *ngIf="!sidebarCollapsed">
                        <h2>ROLCC AC</h2>
                        <span class="tagline">Church Portal</span>
                    </div>
                </div>
                <button class="sidebar-toggle" (click)="toggleSidebar()" title="Toggle sidebar">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <line x1="3" y1="6" x2="21" y2="6"></line>
                        <line x1="3" y1="12" x2="21" y2="12"></line>
                        <line x1="3" y1="18" x2="21" y2="18"></line>
                    </svg>
                </button>
            </div>

            <nav class="sidebar-nav">
                <!-- Quick search / filter -->
                <div class="nav-search" *ngIf="!sidebarCollapsed">
                    <kendo-svgicon [icon]="searchIcon" class="nav-search-icon"></kendo-svgicon>
                    <input type="text" class="nav-search-input" placeholder="Search pages..."
                        [(ngModel)]="searchQuery" aria-label="Search pages">
                    <button type="button" class="nav-search-clear" *ngIf="searchQuery" (click)="clearSearch()"
                        title="Clear search" aria-label="Clear search">
                        <kendo-svgicon [icon]="clearIcon"></kendo-svgicon>
                    </button>
                </div>

                <div class="nav-section">
                    <h4 *ngIf="!sidebarCollapsed">Main</h4>
                    <ng-container *ngFor="let item of mainNavItems">
                        <a class="nav-item" [class.active]="item.active" *ngIf="matchesSearch(item.text)"
                            [title]="item.text" (click)="navigateTo(item.path)">
                            <div class="nav-icon">
                                <kendo-svgicon [icon]="item.icon"></kendo-svgicon>
                            </div>
                            <span *ngIf="!sidebarCollapsed">{{ item.text }}</span>
                        </a>
                    </ng-container>
                </div>

                <div class="nav-section">
                    <h4 *ngIf="!sidebarCollapsed">Personal</h4>
                    <ng-container *ngFor="let item of personalNavItems">
                        <a class="nav-item" [class.active]="item.active" *ngIf="matchesSearch(item.text)"
                            [title]="item.text" (click)="navigateTo(item.path)">
                            <div class="nav-icon">
                                <kendo-svgicon [icon]="item.icon"></kendo-svgicon>
                            </div>
                            <span *ngIf="!sidebarCollapsed">{{ item.text }}</span>
                        </a>
                    </ng-container>
                </div>

                <div class="nav-section" *ngIf="showMemberAdminSection || showUserAdminSection || showLogsAdminSection">
                    <h4 *ngIf="!sidebarCollapsed">Administration</h4>
                    <ng-container *ngFor="let item of memberAdminNavItems">
                        <a class="nav-item" [class.active]="item.active" *ngIf="isVisible(item)"
                            [title]="item.text" (click)="navigateTo(item.path)">
                            <div class="nav-icon">
                                <kendo-svgicon [icon]="item.icon"></kendo-svgicon>
                            </div>
                            <span *ngIf="!sidebarCollapsed">{{ item.text }}</span>
                        </a>
                    </ng-container>
                    <ng-container *ngFor="let item of userAdminNavItems">
                        <a class="nav-item" [class.active]="item.active" *ngIf="isVisible(item)"
                            [title]="item.text" (click)="navigateTo(item.path)">
                            <div class="nav-icon">
                                <kendo-svgicon [icon]="item.icon"></kendo-svgicon>
                            </div>
                            <span *ngIf="!sidebarCollapsed">{{ item.text }}</span>
                        </a>
                    </ng-container>
                    <ng-container *ngFor="let item of logsAdminNavItems">
                        <a class="nav-item" [class.active]="item.active" *ngIf="isVisible(item)"
                            [title]="item.text" (click)="navigateTo(item.path)">
                            <div class="nav-icon">
                                <kendo-svgicon [icon]="item.icon"></kendo-svgicon>
                            </div>
                            <span *ngIf="!sidebarCollapsed">{{ item.text }}</span>
                        </a>
                    </ng-container>
                </div>

                <div class="nav-section" *ngIf="showFinanceSection">
                    <h4 *ngIf="!sidebarCollapsed">Finance</h4>

                    <!-- Collapsed sidebar: flat icon-only list, no group headers -->
                    <ng-container *ngIf="sidebarCollapsed">
                        <ng-container *ngFor="let group of financeGroups">
                            <ng-container *ngFor="let item of group.items">
                                <a *ngIf="canShow(item)" class="nav-item" [class.active]="item.active"
                                    [title]="item.text" (click)="navigateTo(item.path)">
                                    <div class="nav-icon">
                                        <kendo-svgicon [icon]="item.icon"></kendo-svgicon>
                                    </div>
                                </a>
                            </ng-container>
                        </ng-container>
                    </ng-container>

                    <!-- Expanded sidebar: collapsible groups -->
                    <ng-container *ngIf="!sidebarCollapsed">
                        <ng-container *ngFor="let group of financeGroups">
                            <div class="nav-group" *ngIf="groupVisible(group)">
                                <button type="button" class="nav-group-header"
                                    [class.expanded]="group.expanded || searchQuery"
                                    (click)="toggleGroup(group)">
                                    <span class="nav-group-title">{{ group.text }}</span>
                                    <kendo-svgicon class="nav-group-chevron" [icon]="chevronDownIcon"></kendo-svgicon>
                                </button>
                                <div class="nav-group-items" *ngIf="group.expanded || searchQuery">
                                    <ng-container *ngFor="let item of group.items">
                                        <a class="nav-item nav-item-nested" [class.active]="item.active"
                                            *ngIf="isVisible(item)" [title]="item.text"
                                            (click)="navigateTo(item.path)">
                                            <div class="nav-icon">
                                                <kendo-svgicon [icon]="item.icon"></kendo-svgicon>
                                            </div>
                                            <span>{{ item.text }}</span>
                                        </a>
                                    </ng-container>
                                </div>
                            </div>
                        </ng-container>
                    </ng-container>
                </div>
            </nav>

            <div class="sidebar-footer" *ngIf="!sidebarCollapsed">
                <div class="user-info">
                    <div class="user-avatar">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
                            <circle cx="12" cy="7" r="4"></circle>
                        </svg>
                    </div>
                    <div class="user-details">
                        <div class="user-name">{{ getDisplayName() || 'User' }}
                        </div>
                        <div class="user-email">{{ currentUser?.email }}</div>
                    </div>
                </div>
                <button class="logout-btn" (click)="logout()" title="Logout" aria-label="Logout">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path>
                        <polyline points="16,17 21,12 16,7"></polyline>
                        <line x1="21" y1="12" x2="9" y2="12"></line>
                    </svg>
                    Logout
                </button>
            </div>
        </aside>

        <!-- Main Content Area -->
        <main [class]="mainContentClass">
            <!-- Unified system header (shared by every child page) -->
            <header class="top-header">
                <div class="header-left">
                    <button class="mobile-menu-btn" (click)="toggleSidebar()" *ngIf="isMobile" title="Toggle menu"
                        aria-label="Toggle menu">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <line x1="3" y1="6" x2="21" y2="6"></line>
                            <line x1="3" y1="12" x2="21" y2="12"></line>
                            <line x1="3" y1="18" x2="21" y2="18"></line>
                        </svg>
                    </button>
                    <div class="app-header">
                        <span class="app-header__eyebrow">River of Life · {{ currentSection }}</span>
                        <h1 class="app-header__title">
                            {{ currentPageTitle }}
                            <span *ngIf="currentPageTitleZh">{{ currentPageTitleZh }}</span>
                        </h1>
                    </div>
                </div>

                <div class="header-right app-header__actions">
                    <ng-container *ngTemplateOutlet="pageHeader.actions()"></ng-container>
                </div>
            </header>

            <!-- Page Content -->
            <div class="page-content">
                <router-outlet></router-outlet>
            </div>
        </main>
    </div>
</div>