<div class="chapter-create-page">

  <div class="page-header">
    <h1>{{ isHub ? 'Créer une nouvelle quête' : 'Créer un nouveau chapitre' }}</h1>
    @if (arcName) {
      <p class="arc-ref">{{ isHub ? 'Hub' : 'Arc' }} : {{ arcName }}</p>
    }
  </div>

  <form [formGroup]="form" (ngSubmit)="submit()" class="chapter-form">

    <div class="field">
      <label for="chapter-create-name">{{ isHub ? 'Nom de la quête *' : 'Nom du chapitre *' }}</label>
      <input
        id="chapter-create-name"
        type="text"
        formControlName="name"
        [placeholder]="isHub ? 'Ex: Sauver le marchand disparu' : 'Ex: Chapitre 1: Les Disparitions'"
        [class.invalid]="form.get('name')?.invalid && form.get('name')?.touched"
        />
    </div>

    <div class="field">
      <label for="chapter-create-description">Description</label>
      <textarea
        id="chapter-create-description"
        formControlName="description"
        [placeholder]="isHub ? 'Décrivez cette quête...' : 'Décrivez ce chapitre...'"
        rows="5">
      </textarea>
    </div>

    <div class="field">
      <label>Icône</label>
      <app-icon-picker [options]="campaignIconOptions" [(selected)]="selectedIcon"></app-icon-picker>
    </div>

    <div class="form-actions">
      <button type="submit" class="btn-primary" [disabled]="form.invalid">
        {{ isHub ? 'Créer la quête' : 'Créer le chapitre' }}
      </button>
      <button type="button" class="btn-secondary" (click)="cancel()">Annuler</button>
    </div>

  </form>

</div>
