<div class="nac" [class.created]="status === 'created'">
  <div class="nac-head">
    <lucide-icon [img]="typeIcon" [size]="15"></lucide-icon>
    <span class="nac-type">{{ typeLabel }}</span>
    <span class="nac-name">{{ action.name }}</span>
  </div>

  @if (action.description) {
    <p class="nac-desc">{{ action.description }}</p>
  }

  <!-- Cibles -->
  @if (status !== 'created' && needsArc) {
    <div class="nac-targets">
      <label>
        Arc
        <select [(ngModel)]="selectedArcId" (ngModelChange)="syncChapter()">
          @for (a of arcs; track a) {
            <option [value]="a.id">{{ a.name }}</option>
          }
        </select>
      </label>
      @if (needsChapter) {
        <label>
          Chapitre
          <select [(ngModel)]="selectedChapterId">
            @for (c of targetChapters; track c) {
              <option [value]="c.id">{{ c.name }}</option>
            }
          </select>
        </label>
      }
    </div>
  }

  @if (needsArc && arcs.length === 0) {
    <p class="nac-warn">
      Crée d'abord un arc {{ needsChapter ? 'et un chapitre ' : '' }}dans la campagne pour pouvoir y rattacher cet élément.
    </p>
  }

  <div class="nac-foot">
    @if (status !== 'created') {
      <button class="nac-create" (click)="create()" [disabled]="!canCreate">
        <lucide-icon [img]="Plus" [size]="13"></lucide-icon>
        {{ status === 'creating' ? 'Création…' : 'Créer dans la campagne' }}
      </button>
    }
    @if (status === 'created') {
      <button class="nac-open" (click)="openCreated()">
        <lucide-icon [img]="Check" [size]="13"></lucide-icon> Créé — ouvrir
        <lucide-icon [img]="ExternalLink" [size]="12"></lucide-icon>
      </button>
    }
    @if (status === 'error') {
      <span class="nac-error">{{ errorMsg }}</span>
    }
  </div>
</div>
