<div class="shell">
    <!-- Modals -->
    @if (showAddStudentModal()) {
    <app-add-student-modal (studentCreated)="onStudentCreated($event)"
        (cancelled)="showAddStudentModal.set(false)" />
    }
    @if (editingStudent()) {
    <app-edit-student-modal [student]="editingStudent()!" (saved)="onEditStudentSaved()"
        (closed)="editingStudent.set(null)" />
    }

    <!-- Sidebar -->
    <div class="sidebar">
        <div class="sidebar-brand">
            <div class="brand-label">Progress Tracker</div>
            <div class="brand-sub">{{ auth.programName() }}</div>
        </div>

        <div class="sidebar-controls">
            <span class="controls-label">My Students</span>
            <label class="scope-toggle">
                <input type="checkbox" [checked]="showAll()" (change)="onToggleScope()" hidden>
                <span class="toggle-track" [class.active]="showAll()">
                    <span class="toggle-thumb"></span>
                </span>
                All
            </label>
        </div>

        <div class="student-list">
            @for (group of groupedStudents(); track group.label) {
            @if (group.label) {
            <div class="group-header">{{ group.label }}</div>
            }
            @for (s of group.students; track s.studentId) {
            <div class="student-item" [class.active]="selectedStudentId() === s.studentId"
                (click)="onSelectStudent(s)">
                <div class="student-item-info">
                    <div class="student-item-name" [class.bold]="selectedStudentId() === s.studentId">
                        {{ s.identifier }}
                    </div>
                    <div class="student-item-meta">
                        IEP: {{ formatDate(s.nextIepDate) }}
                    </div>
                </div>
                <button class="edit-pencil" (click)="onEditStudent(s, $event)" aria-label="Edit student">
                    <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="#bbb" stroke-width="1.5"
                        stroke-linecap="round" stroke-linejoin="round">
                        <path d="M11.5 1.5l3 3L5 14H2v-3L11.5 1.5z" />
                    </svg>
                </button>
            </div>
            }
            }
        </div>

        <div class="sidebar-footer">
            <button class="add-student-btn" (click)="onAddStudent()">+ Add Student</button>
        </div>

        <div class="sidebar-nav">
            <a class="nav-link" routerLink="/reports">Reports</a>
        </div>

        <div class="sidebar-bottom">
            <button class="logout-link" (click)="onLogout()">Log Out</button>
        </div>
    </div>

    <!-- Main Content -->
    <main class="main">
        <router-outlet />
    </main>
</div>