LoreMind/web/src/app/shared/persona-view/persona-view.component.html

@if (persona) {
  <div class="pv">
    <!-- Bandeau / Header -->
    @if (persona.headerImageId) {
      <div class="pv-banner">
        <img [src]="contentUrl(persona.headerImageId)" alt="" />
        <div class="pv-banner-fade"></div>
      </div>
    }
    <!-- En-tete : portrait + titre -->
    <div class="pv-hero" [class.no-banner]="!persona.headerImageId">
      @if (persona.portraitImageId) {
        <div class="pv-portrait">
          <img [src]="contentUrl(persona.portraitImageId)" alt="" />
        </div>
      }
      <div class="pv-title-block">
        <h1 class="pv-name">{{ persona.name }}</h1>
        @if (subtitle) {
          <p class="pv-subtitle">{{ subtitle }}</p>
        }
        <!-- Badges des NUMBER isoles (rendu compact, evite la grosse card pour 1 valeur) -->
        @if (heroBadges.length) {
          <div class="pv-hero-badges">
            @for (b of heroBadges; track b) {
              <span class="pv-hero-badge">
                <span class="pv-hero-badge-label">{{ b.label }}</span>
                <span class="pv-hero-badge-value">{{ b.value }}</span>
              </span>
            }
          </div>
        }
      </div>
    </div>
    <!-- Sections rendues dans l'ordre du template -->
    <div class="pv-sections">
      @for (s of orderedSections; track s) {
        <!-- TEXT -->
        @if (s.kind === 'TEXT') {
          <section class="pv-section">
            <h2 class="pv-section-title">{{ s.name }}</h2>
            <div class="pv-section-body">
              <p class="pv-paragraph">
                {{ firstParagraph(s.value) }}
              </p>
              @if (restAfterFirstParagraph(s.value)) {
                <p class="pv-paragraph">
                  {{ restAfterFirstParagraph(s.value) }}
                </p>
              }
            </div>
          </section>
        }
        <!-- NUMBER_GROUP : NUMBER consecutifs - table si <=6, sinon liste 2 cols -->
        @if (s.kind === 'NUMBER_GROUP') {
          <section class="pv-section pv-section-number">
            @if (s.entries.length <= 6) {
              <div class="pv-kv-table" [style.--cols]="s.entries.length">
                <div class="pv-kv-row pv-kv-row-labels">
                  @for (e of s.entries; track e) {
                    <div class="pv-kv-cell">{{ e.label }}</div>
                  }
                </div>
                <div class="pv-kv-row pv-kv-row-values">
                  @for (e of s.entries; track e) {
                    <div class="pv-kv-cell">{{ e.value }}</div>
                  }
                </div>
              </div>
            } @else {
              <div class="pv-kv-list">
                @for (e of s.entries; track e) {
                  <div class="pv-kv-list-row">
                    <span class="pv-kv-list-label">{{ e.label }}</span>
                    <span class="pv-kv-list-dots"></span>
                    <span class="pv-kv-list-value">{{ e.value }}</span>
                  </div>
                }
              </div>
            }
          </section>
        }
        <!-- KEY_VALUE_LIST : table style Foundry si <=6, sinon liste 2 cols (skills) -->
        @if (s.kind === 'KEY_VALUE_LIST') {
          <section class="pv-section pv-section-kv">
            <h2 class="pv-section-title">{{ s.name }}</h2>
            @if (s.entries.length <= 6) {
              <div class="pv-kv-table" [style.--cols]="s.entries.length">
                <div class="pv-kv-row pv-kv-row-labels">
                  @for (e of s.entries; track e) {
                    <div class="pv-kv-cell">{{ e.label }}</div>
                  }
                </div>
                <div class="pv-kv-row pv-kv-row-values">
                  @for (e of s.entries; track e) {
                    <div class="pv-kv-cell">{{ e.value || '—' }}</div>
                  }
                </div>
              </div>
            } @else {
              <div class="pv-kv-list">
                @for (e of s.entries; track e) {
                  <div class="pv-kv-list-row">
                    <span class="pv-kv-list-label">{{ e.label }}</span>
                    <span class="pv-kv-list-dots"></span>
                    <span class="pv-kv-list-value">{{ e.value || '—' }}</span>
                  </div>
                }
              </div>
            }
          </section>
        }
        <!-- IMAGE : galerie -->
        @if (s.kind === 'IMAGE') {
          <section class="pv-section pv-section-images">
            <h2 class="pv-section-title">{{ s.name }}</h2>
            <app-image-gallery [imageIds]="s.ids" [layout]="s.layout" [editable]="false">
            </app-image-gallery>
          </section>
        }
      }
      <!-- Etat vide -->
      @if (orderedSections.length === 0) {
        <div class="pv-empty">
          <lucide-icon [img]="BookOpen" [size]="32"></lucide-icon>
          <p>Cette fiche est encore vide.</p>
        </div>
      }
    </div>
  </div>
}