@if (playthrough) {
  <div class="playthrough-page">
    <header class="page-header">
      <button type="button" class="btn-secondary" (click)="back()">
        <lucide-icon [img]="ArrowLeft" [size]="14"></lucide-icon>
        Retour
      </button>
      <div class="header-info">
        <h1>{{ playthrough.name }}</h1>
        @if (playthrough.description) {
          <p class="subtitle">{{ playthrough.description }}</p>
        }
      </div>
      <div class="header-actions">
        <button type="button" class="btn-danger" (click)="delete()">
          <lucide-icon [img]="Trash2" [size]="14"></lucide-icon>
          Supprimer
        </button>
      </div>
    </header>
    <!-- Bloc action principal : démarrer ou reprendre la session -->
    <section class="play-action">
      @if (!activeOnThis) {
        <button type="button" class="btn-primary big"
          [disabled]="startingSession"
          (click)="startSession()">
          <lucide-icon [img]="Play" [size]="16"></lucide-icon>
          Lancer une session
        </button>
      }
      @if (activeOnThis) {
        <button type="button" class="btn-primary big"
          (click)="openSession(activeOnThis)">
          <lucide-icon [img]="Play" [size]="16"></lucide-icon>
          Reprendre la session en cours
        </button>
      }
      <button type="button" class="btn-secondary" (click)="openFlags()">
        <lucide-icon [img]="Flag" [size]="14"></lucide-icon>
        Faits de la partie
      </button>
    </section>
    <!-- PJ -->
    <section class="block">
      <div class="block-header">
        <h2><lucide-icon [img]="Users" [size]="18"></lucide-icon> Personnages joueurs</h2>
        <button type="button" class="btn-add" (click)="createCharacter()">
          <lucide-icon [img]="Plus" [size]="14"></lucide-icon>
          Nouveau PJ
        </button>
      </div>
      @if (characters.length === 0) {
        <p class="empty">Aucun PJ pour cette partie.</p>
      }
      @if (characters.length > 0) {
        <ul class="character-list">
          @for (c of characters; track c) {
            <li>
              <a [routerLink]="['/campaigns', campaignId, 'playthroughs', playthroughId, 'characters', c.id]">{{ c.name }}</a>
            </li>
          }
        </ul>
      }
    </section>
    <!-- Sessions -->
    <section class="block">
      <h2>Sessions</h2>
      @if (sessions.length === 0) {
        <p class="empty">Aucune session encore. Lancez la première !</p>
      }
      @if (sessions.length > 0) {
        <ul class="session-list">
          @for (s of sessions; track s) {
            <li (click)="openSession(s)">
              <span class="session-name">{{ s.name }}</span>
              <span class="session-status" [class.active]="s.active">{{ s.active ? 'En cours' : 'Terminée' }}</span>
            </li>
          }
        </ul>
      }
    </section>
  </div>
}