@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 || ('pageView.pageFallback' | translate) }}</p>
      </div>
      <div class="view-actions">
        <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)="deletePage()" [title]="'pageView.deleteTitle' | translate">
          <lucide-icon [img]="Trash2" [size]="14"></lucide-icon>
          {{ 'common.delete' | translate }}
        </button>
      </div>
    </header>
    <!-- Champs dynamiques du template. Rendus en grille 12 colonnes quand le
    template porte une mise en page (hasLayout) ; sinon empiles (rendu
    historique). Les blocs sont ordonnes par (ligne, colonne). -->
    @if (template?.fields?.length) {
      <div class="view-fields" [class.view-fields--grid]="hasLayout">
        @for (field of orderedFields; track field) {
          @if (field.type === 'TEXT') {
            <section class="view-section"
              [style.grid-column]="hasLayout ? gridColumn(field) : null"
              [style.grid-row]="hasLayout ? gridRow(field) : null">
              <h2 class="view-section-title">{{ field.name }}</h2>
              @if (valueOf(field)) {
                <p class="view-section-body">{{ valueOf(field) }}</p>
              } @else {
                <p class="view-section-empty">{{ 'pageView.notFilled' | translate }}</p>
              }
            </section>
          }
          @if (field.type === 'IMAGE') {
            <section class="view-section"
              [style.grid-column]="hasLayout ? gridColumn(field) : null"
              [style.grid-row]="hasLayout ? gridRow(field) : null">
              <h2 class="view-section-title">{{ field.name }}</h2>
              <app-image-block
                [imageIds]="imageIdsOf(field)"
                [framing]="imageFramingOf(field)"
                [fill]="hasLayout">
              </app-image-block>
            </section>
          }
          @if (field.type === 'KEY_VALUE_LIST') {
            <section class="view-section"
              [style.grid-column]="hasLayout ? gridColumn(field) : null"
              [style.grid-row]="hasLayout ? gridRow(field) : null">
              <h2 class="view-section-title">{{ field.name }}</h2>
              @if (kvHasContent(field)) {
                <div class="view-kv-grid">
                  @for (lbl of field.labels ?? []; track $index) {
                    <div class="view-kv-cell">
                      <span class="view-kv-label">{{ lbl }}</span>
                      <span class="view-kv-value">{{ kvValueOf(field, lbl) || '—' }}</span>
                    </div>
                  }
                </div>
              } @else {
                <p class="view-section-empty">{{ 'pageView.notFilled' | translate }}</p>
              }
            </section>
          }
          @if (field.type === 'TABLE') {
            <section class="view-section"
              [style.grid-column]="hasLayout ? gridColumn(field) : null"
              [style.grid-row]="hasLayout ? gridRow(field) : null">
              <h2 class="view-section-title">{{ field.name }}</h2>
              @if (tableRowsOf(field).length) {
                <table class="view-table">
                  <thead>
                    <tr>
                      @for (col of field.labels ?? []; track $index) {
                        <th>{{ col }}</th>
                      }
                    </tr>
                  </thead>
                  <tbody>
                    @for (row of tableRowsOf(field); track $index) {
                      <tr>
                        @for (col of field.labels ?? []; track $index) {
                          <td>{{ row[col] || '—' }}</td>
                        }
                      </tr>
                    }
                  </tbody>
                </table>
              } @else {
                <p class="view-section-empty">{{ 'pageView.notFilled' | translate }}</p>
              }
            </section>
          }
        }
      </div>
    }
    <!-- Tags -->
    @if ((page.tags?.length ?? 0) > 0) {
      <section class="view-section">
        <h2 class="view-section-title">{{ 'pageView.tags' | translate }}</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">{{ 'pageView.relatedPages' | translate }}</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>
          {{ 'pageView.privateNotes' | translate }}
        </h2>
        <p class="view-section-body">{{ page.notes }}</p>
      </section>
    }
  </div>
}