frontend-toegevoegd

agiledancers-fe/src/app/schools/schools-page.html

@@ -0,0 +1,93 @@
+<div class="page-heading">
+  <div>
+    <p class="eyebrow">JOUW ORGANISATIE</p>
+    <h1>Alle ruimte om te dansen.</h1>
+    <p class="lede">Van de eerste les tot het grote podium. Beheer je dansschool op één plek.</p>
+  </div>
+  <button type="button" class="button primary" (click)="editor.set(true)">
+    <span aria-hidden="true">＋</span> Dansschool toevoegen
+  </button>
+</div>
+@if (notice()) {
+  <div class="alert success" role="status">
+    {{ notice()
+    }}<button type="button" aria-label="Melding sluiten" (click)="notice.set('')">×</button>
+  </div>
+}
+@if (loading()) {
+  <div class="loading-state" role="status"><span class="spinner"></span> Dansscholen laden…</div>
+} @else if (error()) {
+  <div class="alert error" role="alert">
+    <p>{{ error() }}</p>
+    <button class="button secondary" type="button" (click)="load()">Opnieuw proberen</button>
+  </div>
+} @else {
+  <div class="stats-grid">
+    <div class="stat">
+      <span class="stat-label">Dansscholen</span><strong>{{ schools().length }}</strong
+      ><span class="stat-caption">Een plek voor iedere danser</span>
+    </div>
+    <div class="stat">
+      <span class="stat-label">Dansers</span><strong>{{ totalDancers() }}</strong
+      ><span class="stat-caption">Samen in beweging</span>
+    </div>
+    <div class="stat">
+      <span class="stat-label">Dansgroepen</span><strong>{{ totalGroups() }}</strong
+      ><span class="stat-caption">Ieder met een eigen ritme</span>
+    </div>
+  </div>
+  <div class="section-heading">
+    <h2>
+      Mijn dansscholen <span class="count-badge">{{ schools().length }}</span>
+    </h2>
+    <span class="muted">Selecteer een school om aan de slag te gaan</span>
+  </div>
+  <div class="school-grid">
+    @for (school of schools(); track school.id) {
+      <a class="school-card" [routerLink]="['/schools', school.id, 'overview']">
+        <div class="card-top">
+          <span aria-hidden="true" class="avatar">{{ school.name.charAt(0).toUpperCase() }}</span
+          ><span class="round-arrow" aria-hidden="true">↗</span>
+        </div>
+        <h3>{{ school.name }}</h3>
+        <p>Dansschool</p>
+        <div class="card-meta">
+          <span
+            ><strong>{{ school.dancerIds.length }}</strong> dansers</span
+          ><span
+            ><strong>{{ school.danceGroupIds.length }}</strong> groepen</span
+          ><span
+            ><strong>{{ school.showIds.length }}</strong> shows</span
+          >
+        </div>
+        <div class="card-link">Dansschool beheren <span aria-hidden="true">→</span></div>
+      </a>
+    } @empty {
+      <div class="empty-state full-width">
+        <span class="empty-symbol" aria-hidden="true">✳</span>
+        <h2>Hier begint jouw dansschool</h2>
+        <p>Maak een school aan en geef je dansers, groepen en shows een thuis.</p>
+        <button class="button primary" type="button" (click)="editor.set(true)">
+          Eerste dansschool aanmaken
+        </button>
+      </div>
+    }
+  </div>
+  <aside class="tip-panel">
+    <span class="tip-icon" aria-hidden="true">✦</span>
+    <div>
+      <h3>Van studio naar spotlight</h3>
+      <p>
+        Voeg je dansers toe, stel groepen samen en maak alvast een show aan. Zo bouw je stap voor
+        stap aan je volgende optreden.
+      </p>
+    </div>
+  </aside>
+}
+@if (editor()) {
+  <app-entity-editor
+    [target]="{ kind: 'school' }"
+    (closed)="editor.set(false)"
+    (saved)="created()"
+  />
+}