@if (page) {
  <div class="view-page">
    <app-breadcrumb [items]="breadcrumbItems"></app-breadcrumb>
    <header class="view-header">
      <div>
        <h1>{{ page.title }}</h1>
        <p class="view-subtitle">{{ template?.name || 'Page' }}</p>
      </div>
      <div class="view-actions">
        <button type="button" class="btn-primary" (click)="editMode()">
          <lucide-icon [img]="Pencil" [size]="14"></lucide-icon>
          Modifier
        </button>
        <button type="button" class="btn-danger" (click)="deletePage()" title="Supprimer la page">
          <lucide-icon [img]="Trash2" [size]="14"></lucide-icon>
          Supprimer
        </button>
      </div>
    </header>
    <!-- Champs dynamiques du template (seuls les champs TEXT sont rendus ici ;
    le support complet des champs IMAGE arrive a l'etape 5). -->
    @if (template?.fields?.length) {
      @for (field of template!.fields; track field) {
        @if (field.type === 'TEXT') {
          <section class="view-section">
            <h2 class="view-section-title">{{ field.name }}</h2>
            @if (valueOf(field.name)) {
              <p class="view-section-body">{{ valueOf(field.name) }}</p>
            } @else {
              <p class="view-section-empty">Non renseigné</p>
            }
          </section>
        }
        @if (field.type === 'IMAGE') {
          <section class="view-section">
            <h2 class="view-section-title">{{ field.name }}</h2>
            <app-image-gallery
              [imageIds]="imageIdsOf(field.name)"
              [layout]="field.layout ?? 'GALLERY'">
            </app-image-gallery>
          </section>
        }
      }
    }
    <!-- Tags -->
    @if ((page.tags?.length ?? 0) > 0) {
      <section class="view-section">
        <h2 class="view-section-title">Tags</h2>
        <div class="view-chips">
          @for (tag of page.tags; track tag) {
            <span class="view-chip view-chip--tag">{{ tag }}</span>
          }
        </div>
      </section>
    }
    <!-- Pages liées -->
    @if ((page.relatedPageIds?.length ?? 0) > 0) {
      <section class="view-section">
        <h2 class="view-section-title">Pages liées</h2>
        <div class="view-chips">
          @for (relId of page.relatedPageIds; track relId) {
            <a class="view-chip"
              [routerLink]="['/lore', loreId, 'pages', relId]">
              {{ titleOfRelated(relId) }}
            </a>
          }
        </div>
      </section>
    }
    <!-- Notes privées MJ -->
    @if (page.notes?.trim()) {
      <section class="view-section view-section--private">
        <h2 class="view-section-title">
          <span class="view-section-icon">🔒</span>
          Notes privées
        </h2>
        <p class="view-section-body">{{ page.notes }}</p>
      </section>
    }
  </div>
}