@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 (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">{{ 'pageView.notFilled' | translate }}</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>
        }
        @if (field.type === 'KEY_VALUE_LIST') {
          <section class="view-section">
            <h2 class="view-section-title">{{ field.name }}</h2>
            @if (kvHasContent(field.name, field.labels)) {
              <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.name, lbl) || '—' }}</span>
                  </div>
                }
              </div>
            } @else {
              <p class="view-section-empty">{{ 'pageView.notFilled' | translate }}</p>
            }
          </section>
        }
        @if (field.type === 'TABLE') {
          <section class="view-section">
            <h2 class="view-section-title">{{ field.name }}</h2>
            @if (tableRowsOf(field.name).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.name); 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>
        }
      }
    }
    <!-- 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>
}