<div class="view-page" *ngIf="chapter">

  <header class="view-header">
    <div>
      <h1>{{ chapter.name }}</h1>
      <p class="view-subtitle">Chapitre</p>
    </div>
    <div class="view-actions">
      <button type="button" class="btn-secondary" (click)="openGraph()"
              title="Voir l'organigramme des scènes et de leurs branches">
        <lucide-icon [img]="Network" [size]="14"></lucide-icon>
        Carte du chapitre
      </button>
      <button type="button" class="btn-primary" (click)="editMode()">
        <lucide-icon [img]="Pencil" [size]="14"></lucide-icon>
        Modifier
      </button>
    </div>
  </header>

  <!-- Illustrations -->
  <section class="view-section" *ngIf="(chapter.illustrationImageIds?.length ?? 0) > 0">
    <app-image-gallery [imageIds]="chapter.illustrationImageIds ?? []"></app-image-gallery>
  </section>

  <section class="view-section">
    <h2 class="view-section-title"><span class="view-section-icon">📖</span> Synopsis</h2>
    <p class="view-section-body" *ngIf="chapter.description?.trim(); else emptyDesc">{{ chapter.description }}</p>
    <ng-template #emptyDesc><p class="view-section-empty">Non renseigné</p></ng-template>
  </section>

  <div class="view-row">
    <section class="view-section">
      <h2 class="view-section-title"><span class="view-section-icon">🎯</span> Objectifs des joueurs</h2>
      <p class="view-section-body" *ngIf="chapter.playerObjectives?.trim(); else emptyObj">{{ chapter.playerObjectives }}</p>
      <ng-template #emptyObj><p class="view-section-empty">Non renseigné</p></ng-template>
    </section>

    <section class="view-section">
      <h2 class="view-section-title"><span class="view-section-icon">⚡</span> Enjeux narratifs</h2>
      <p class="view-section-body" *ngIf="chapter.narrativeStakes?.trim(); else emptyNs">{{ chapter.narrativeStakes }}</p>
      <ng-template #emptyNs><p class="view-section-empty">Non renseigné</p></ng-template>
    </section>
  </div>

  <section class="view-section view-section--private" *ngIf="chapter.gmNotes?.trim()">
    <h2 class="view-section-title">
      <span class="view-section-icon">🔒</span>
      Notes du Maître de Jeu
    </h2>
    <p class="view-section-body">{{ chapter.gmNotes }}</p>
  </section>

  <section class="view-section" *ngIf="loreId && (chapter.relatedPageIds?.length ?? 0) > 0">
    <h2 class="view-section-title"><span class="view-section-icon">🔗</span> Pages Lore associées</h2>
    <div class="view-chips">
      <a class="view-chip"
         *ngFor="let relId of chapter.relatedPageIds"
         [routerLink]="['/lore', loreId, 'pages', relId]">
        {{ titleOfRelated(relId) }}
      </a>
    </div>
  </section>

</div>
