@if (chapter) {
  <div class="view-page">
    <header class="view-header">
      <div>
        <h1>
          @if (chapter.icon) {
            <lucide-icon [img]="resolveCampaignIcon(chapter.icon)" [size]="22" class="title-icon"></lucide-icon>
          }
          {{ chapter.name }}
        </h1>
        <p class="view-subtitle">
          {{ (parentArc?.type === 'HUB' ? 'chapterView.questHub' : 'chapterView.chapter') | translate }}
          @if ((chapter.prerequisites?.length ?? 0) > 0) {
            <span class="cond-badge"
              [title]="'chapterView.conditionalBadgeTitle' | translate">
              <lucide-icon [img]="Lock" [size]="12"></lucide-icon>
              {{ 'chapterView.conditional' | translate }}
            </span>
          }
        </p>
      </div>
      <div class="view-actions">
        <button type="button" class="btn-secondary" (click)="openGraph()"
          [title]="'chapterView.mapTitle' | translate">
          <lucide-icon [img]="Network" [size]="14"></lucide-icon>
          {{ 'chapterView.map' | translate }}
        </button>
        <button type="button" class="btn-primary" (click)="editMode()">
          <lucide-icon [img]="Pencil" [size]="14"></lucide-icon>
          {{ 'common.edit' | translate }}
        </button>
        <button type="button" class="btn-danger" (click)="deleteChapter()" [title]="'chapterView.deleteTitle' | translate">
          <lucide-icon [img]="Trash2" [size]="14"></lucide-icon>
          {{ 'common.delete' | translate }}
        </button>
      </div>
    </header>
    <!-- Conditions de déblocage (scénario, read-only). Visible pour un arc HUB (quête)
    OU dès qu'un chapitre linéaire porte des conditions. -->
    @if (parentArc?.type === 'HUB' || (chapter.prerequisites?.length ?? 0) > 0) {
      <section class="view-section">
        <h2 class="view-section-title"><span class="view-section-icon">🔒</span> {{ 'chapterView.unlockConditions' | translate }}</h2>
        @if ((chapter.prerequisites?.length ?? 0) > 0) {
          <ul class="view-section-body">
            @for (p of chapter.prerequisites; track p) {
              <li>{{ describePrerequisite(p) }}</li>
            }
          </ul>
          <small class="view-section-empty">
            {{ (parentArc?.type === 'HUB' ? 'chapterView.unlockHintQuest' : 'chapterView.unlockHintChapter') | translate }}
          </small>
        } @else {
          <p class="view-section-empty">
            {{ 'chapterView.noConditionQuest' | translate }}
          </p>
          <p class="view-section-empty" [innerHTML]="'chapterView.noConditionEdit' | translate">
          </p>
        }
      </section>
    }
    <!-- Illustrations (rendu editorial magazine) -->
    @if ((chapter.illustrationImageIds?.length ?? 0) > 0) {
      <section class="view-section">
        <app-image-gallery [imageIds]="chapter.illustrationImageIds ?? []" [layout]="'EDITORIAL'"></app-image-gallery>
      </section>
    }
    <!-- Cartes & plans -->
    @if ((chapter.mapImageIds?.length ?? 0) > 0) {
      <section class="view-section">
        <h2 class="view-section-title"><span class="view-section-icon">🗺️</span> {{ 'chapterView.maps' | translate }}</h2>
        <app-image-gallery [imageIds]="chapter.mapImageIds ?? []" [layout]="'MAPS'"></app-image-gallery>
      </section>
    }
    <section class="view-section">
      <h2 class="view-section-title"><span class="view-section-icon">📖</span> {{ 'chapterView.synopsis' | translate }}</h2>
      @if (chapter.description?.trim()) {
        <p class="view-section-body">{{ chapter.description }}</p>
      } @else {
        <p class="view-section-empty">{{ 'chapterView.notProvided' | translate }}</p>
      }
    </section>
    <div class="view-row">
      <section class="view-section">
        <h2 class="view-section-title"><span class="view-section-icon">🎯</span> {{ 'chapterView.playerObjectives' | translate }}</h2>
        @if (chapter.playerObjectives?.trim()) {
          <p class="view-section-body">{{ chapter.playerObjectives }}</p>
        } @else {
          <p class="view-section-empty">{{ 'chapterView.notProvided' | translate }}</p>
        }
      </section>
      <section class="view-section">
        <h2 class="view-section-title"><span class="view-section-icon">⚡</span> {{ 'chapterView.narrativeStakes' | translate }}</h2>
        @if (chapter.narrativeStakes?.trim()) {
          <p class="view-section-body">{{ chapter.narrativeStakes }}</p>
        } @else {
          <p class="view-section-empty">{{ 'chapterView.notProvided' | translate }}</p>
        }
      </section>
    </div>
    @if (chapter.gmNotes?.trim()) {
      <section class="view-section view-section--private">
        <h2 class="view-section-title">
          <span class="view-section-icon">🔒</span>
          {{ 'chapterView.gmNotes' | translate }}
        </h2>
        <p class="view-section-body">{{ chapter.gmNotes }}</p>
      </section>
    }
    @if (loreId && (chapter.relatedPageIds?.length ?? 0) > 0) {
      <section class="view-section">
        <h2 class="view-section-title"><span class="view-section-icon">🔗</span> {{ 'chapterView.relatedPages' | translate }}</h2>
        <div class="view-chips">
          @for (relId of chapter.relatedPageIds; track relId) {
            <a class="view-chip"
              [routerLink]="['/lore', loreId, 'pages', relId]">
              {{ titleOfRelated(relId) }}
            </a>
          }
        </div>
      </section>
    }
  </div>
}