@if (lore) {
  <div class="graph-page">
    <header class="graph-header">
      <button type="button" class="btn-back" (click)="back()">
        <lucide-icon [img]="ArrowLeft" [size]="14"></lucide-icon>
        {{ 'loreGraph.back' | translate }}
      </button>
      <div class="graph-title">
        <h1>
          <lucide-icon [img]="Network" [size]="20"></lucide-icon>
          {{ 'loreGraph.title' | translate:{ name: lore.name } }}
        </h1>
        <p class="graph-subtitle">
          {{ 'loreGraph.subtitle' | translate:{ pages: (nodes.length - npcCount), npcs: npcCount, edges: edgeCount } }}
        </p>
      </div>
      <div class="graph-legend">
        <span class="legend-item"><span class="legend-dot legend-dot--page"></span> {{ 'loreGraph.legendPage' | translate }}</span>
        <span class="legend-item"><span class="legend-dot legend-dot--npc"></span> {{ 'loreGraph.legendNpc' | translate }}</span>
        <span class="legend-item"><span class="legend-line legend-line--npc"></span> {{ 'loreGraph.legendLink' | translate }}</span>
      </div>
    </header>

    @if (nodes.length === 0) {
      <div class="graph-empty">
        {{ 'loreGraph.empty' | translate }}
      </div>
    } @else {
      <div class="graph-scroll">
        <svg #svgEl
          [attr.width]="svgWidth"
          [attr.height]="svgHeight"
          (pointermove)="onPointerMove($event)"
          (pointerup)="onPointerUp($event)"
          (pointerleave)="onPointerUp($event)">

          <!-- Arêtes (sous les nœuds) -->
          @for (e of edges; track e.key) {
            <line
              [attr.x1]="e.x1" [attr.y1]="e.y1"
              [attr.x2]="e.x2" [attr.y2]="e.y2"
              [class.edge-page]="e.kind === 'page'"
              [class.edge-npc]="e.kind === 'npc'" />
          }

          <!-- Nœuds -->
          @for (n of nodes; track n.id) {
            <g class="node"
              [class.node--npc]="n.kind === 'npc'"
              [class.dragging]="draggingId === n.id"
              (pointerdown)="onPointerDown($event, n)">
              <circle [attr.cx]="n.x" [attr.cy]="n.y" [attr.r]="radiusOf(n)" />
              <text class="node-label"
                [attr.x]="n.x"
                [attr.y]="n.y + radiusOf(n) + 14"
                text-anchor="middle">{{ n.displayLabel }}</text>
              <title>{{ n.label }}</title>
            </g>
          }
        </svg>
      </div>
      @if (edgeCount === 0) {
        <p class="graph-hint">
          {{ 'loreGraph.hint' | translate }}
        </p>
      }
    }
  </div>
}