<div class="ne-page">

  <div class="ne-header">
    <button class="btn-back" (click)="back()">
      <lucide-icon [img]="ArrowLeft" [size]="14"></lucide-icon>
      {{ 'enemyEdit.backToEnemies' | translate }}
    </button>
    <div class="header-row">
      <h1>
        <lucide-icon [img]="Skull" [size]="22"></lucide-icon>
        {{ (enemyId ? 'enemyEdit.titleEdit' : 'enemyEdit.titleNew') | translate }}
      </h1>
    </div>
  </div>

  <div class="ne-form">

    <div class="field">
      <label for="enemy-name">{{ 'enemyEdit.nameLabel' | translate }}</label>
      <input
        id="enemy-name"
        type="text"
        [(ngModel)]="name"
        name="name"
        [placeholder]="'enemyEdit.namePlaceholder' | translate"
        />
      </div>

      <div class="field-row image-row">
        <div class="field">
          <label for="enemy-level">{{ 'enemyEdit.level' | translate }}</label>
          <input
            id="enemy-level"
            type="text"
            [(ngModel)]="level"
            name="level"
            [placeholder]="'enemyEdit.levelPlaceholder' | translate"
            />
        </div>
        <div class="field">
          <label for="enemy-folder">{{ 'enemyEdit.folder' | translate }}</label>
          <input
            id="enemy-folder"
            type="text"
            [(ngModel)]="folder"
            name="folder"
            list="enemy-folders"
            [placeholder]="'enemyEdit.folderPlaceholder' | translate"
            />
            <datalist id="enemy-folders">
              @for (f of existingFolders; track f) {
                <option [value]="f"></option>
              }
            </datalist>
          </div>
        </div>

        <div class="field-row image-row">
          <div class="field portrait-field">
            <label>{{ 'enemyEdit.portrait' | translate }}</label>
            <app-single-image-picker
              [imageId]="portraitImageId"
              aspectRatio="1 / 1"
              [hint]="'enemyEdit.portraitHint' | translate"
              (imageIdChange)="portraitImageId = $event">
            </app-single-image-picker>
          </div>
          <div class="field header-field">
            <label>{{ 'enemyEdit.header' | translate }}</label>
            <app-single-image-picker
              [imageId]="headerImageId"
              aspectRatio="3 / 1"
              [hint]="'enemyEdit.headerHint' | translate"
              (imageIdChange)="headerImageId = $event">
            </app-single-image-picker>
          </div>
        </div>

        <div class="template-fields">
          <app-dynamic-fields-form
            [fields]="templateFields"
            [values]="values"
            [imageValues]="imageValues"
            [keyValueValues]="keyValueValues"
            (valuesChange)="values = $event"
            (imageValuesChange)="imageValues = $event"
            (keyValueValuesChange)="keyValueValues = $event">
          </app-dynamic-fields-form>
        </div>

        <div class="actions">
          <button type="button" class="btn-primary" [disabled]="!name.trim()" (click)="submit()">
            <lucide-icon [img]="Save" [size]="16"></lucide-icon>
            {{ (enemyId ? 'common.save' : 'common.create') | translate }}
          </button>
          <button type="button" class="btn-secondary" (click)="back()">{{ 'common.cancel' | translate }}</button>
          <span class="spacer"></span>
          @if (enemyId) {
            <button
              type="button"
              class="btn-danger"
              (click)="deleteEnemy()">
              <lucide-icon [img]="Trash2" [size]="14"></lucide-icon>
              {{ 'common.delete' | translate }}
            </button>
          }
        </div>

      </div>

    </div>
