@if (canOpenGuide()) {
<a mat-button routerLink="../"><mat-icon>arrow_back</mat-icon>Mehr</a>

<header class="guide-header">
  <p class="eyebrow">Team verwalten</p>
  <h1>Anleitung für Verantwortliche</h1>
  <p>Ein praktischer Leitfaden für Kassenwarte, Kapitäne, Trainer und ihre Vertretung.</p>
</header>

<mat-card class="handover-card">
  <mat-card-content>
    <p class="eyebrow">Schnellstart</p>
    <h2>Neu in der Verantwortung?</h2>
    <p>Gehe diese Punkte gemeinsam mit der bisherigen verantwortlichen Person durch.</p>
    <ol>
      @for (item of handoverChecklist; track item) {
        <li>{{ item }}</li>
      }
    </ol>
  </mat-card-content>
</mat-card>

<nav class="guide-nav" aria-label="Inhalt der Anleitung">
  <strong>Direkt zu einem Thema</strong>
  <div>
    @for (section of sections; track section.id) {
      <a [routerLink]="[]" [fragment]="section.id">{{ section.title }}</a>
    }
  </div>
</nav>

<div class="guide-sections">
  @for (section of sections; track section.id) {
    <section [id]="section.id" class="guide-section">
      <p class="eyebrow">{{ $index + 1 | number: '2.0' }}</p>
      <h2>{{ section.title }}</h2>
      <p class="guide-section__intro">{{ section.intro }}</p>

      @if (section.id === 'roles') {
        <div class="role-grid">
          @for (role of roleGuide; track role.role) {
            <article>
              <strong>{{ role.role }}</strong>
              <span>{{ role.description }}</span>
            </article>
          }
        </div>
      }

      <ul>
        @for (point of section.points; track point) {
          <li>{{ point }}</li>
        }
      </ul>
      @if (section.note) {
        <p class="guide-note"><strong>Wichtig:</strong> {{ section.note }}</p>
      }
    </section>
  }
</div>
}