<div class="modal-backdrop" (click)="onCancel()">
  <div class="modal" (click)="$event.stopPropagation()">

    <div class="modal-header">
      <h2>{{ 'campaignCreate.title' | translate }}</h2>
      <button class="btn-close" (click)="onCancel()">
        <lucide-icon [img]="X" [size]="18"></lucide-icon>
      </button>
    </div>

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

      <div class="field">
        <label for="campaign-name">{{ 'campaignCreate.nameLabel' | translate }}</label>
        <input
          id="campaign-name"
          type="text"
          formControlName="name"
          [placeholder]="'campaignCreate.namePlaceholder' | translate"
          [class.invalid]="form.get('name')?.invalid && form.get('name')?.touched"
          />
        </div>

        <div class="field">
          <label for="campaign-description">{{ 'campaignCreate.descriptionLabel' | translate }}</label>
          <textarea
            id="campaign-description"
            formControlName="description"
            [placeholder]="'campaignCreate.descriptionPlaceholder' | translate"
            rows="5"
          ></textarea>
        </div>

        <div class="field">
          <label for="campaign-player-count">{{ 'campaignCreate.playerCountLabel' | translate }}</label>
          <input id="campaign-player-count" type="number" formControlName="playerCount" min="1" />
        </div>

        <div class="field">
          <label for="campaign-lore">{{ 'campaignCreate.loreLabel' | translate }}</label>
          <select id="campaign-lore" formControlName="loreId">
            <option value="">{{ 'campaignCreate.noLoreOption' | translate }}</option>
            @for (lore of availableLores; track lore) {
              <option [value]="lore.id">{{ lore.name }}</option>
            }
          </select>
          <p class="hint">{{ 'campaignCreate.loreHint' | translate }}</p>
        </div>

        <div class="field">
          <label for="campaign-game-system">{{ 'campaignCreate.gameSystemLabel' | translate }}</label>
          @if (!creatingGameSystem) {
            <select id="campaign-game-system" formControlName="gameSystemId">
              <option value="">{{ 'campaignCreate.noGameSystemOption' | translate }}</option>
              @for (gs of availableGameSystems; track gs) {
                <option [value]="gs.id">{{ gs.name }}</option>
              }
              <option [value]="CREATE_GAMESYSTEM_SENTINEL">{{ 'campaignCreate.createGameSystemOption' | translate }}</option>
            </select>
          }

          <!-- Mode creation inline : remplace temporairement le select. -->
          @if (creatingGameSystem) {
            <div class="inline-create">
              <input
                type="text"
                [(ngModel)]="newGameSystemName"
                [ngModelOptions]="{ standalone: true }"
                [placeholder]="'campaignCreate.gameSystemNamePlaceholder' | translate"
                (keydown.enter)="$event.preventDefault(); submitCreateGameSystem()"
                (keydown.escape)="cancelCreateGameSystem()"
                autofocus
                />
                <div class="inline-create-actions">
                  <button type="button" class="btn-inline-primary"
                    [disabled]="!newGameSystemName.trim() || creatingGameSystemInFlight"
                    (click)="submitCreateGameSystem()">
                    <lucide-icon [img]="Check" [size]="14"></lucide-icon>
                    {{ 'common.create' | translate }}
                  </button>
                  <button type="button" class="btn-inline-secondary" (click)="cancelCreateGameSystem()">
                    {{ 'common.cancel' | translate }}
                  </button>
                </div>
                <p class="hint">{{ 'campaignCreate.gameSystemCreateHint' | translate }}</p>
              </div>
            }

            @if (!creatingGameSystem) {
              <p class="hint">{{ 'campaignCreate.gameSystemHint' | translate }}</p>
            }
            @if (!creatingGameSystem) {
              <p class="hint hint-warning" [innerHTML]="'campaignCreate.gameSystemWarning' | translate"></p>
            }
          </div>

          <div class="info-box">
            <p [innerHTML]="'campaignCreate.orgIntro' | translate"></p>
            <ul>
              <li [innerHTML]="'campaignCreate.orgArcs' | translate"></li>
              <li [innerHTML]="'campaignCreate.orgChapters' | translate"></li>
              <li [innerHTML]="'campaignCreate.orgScenes' | translate"></li>
            </ul>
          </div>

          <div class="modal-actions">
            <button type="submit" class="btn-primary" [disabled]="form.invalid">
              <lucide-icon [img]="BookCopy" [size]="16"></lucide-icon>
              {{ 'campaignCreate.submit' | translate }}
            </button>
            <button type="button" class="btn-secondary" (click)="onCancel()">{{ 'common.cancel' | translate }}</button>
          </div>

        </form>

      </div>
    </div>
