<div class="page">

  <header class="page-header">
    <h1>{{ 'templateCreate.title' | translate }}</h1>
    <p class="subtitle">{{ 'templateCreate.subtitle' | translate }}</p>
  </header>

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

    <!-- Colonne gauche ---------------------------------------------- -->
    <div class="col-left">

      <div class="field">
        <label for="template-name">{{ 'templateCreate.nameLabel' | translate }}</label>
        <input id="template-name" type="text" formControlName="name" [placeholder]="'templateCreate.namePlaceholder' | translate" />
      </div>

      <div class="field">
        <label for="template-description">{{ 'common.description' | translate }}</label>
        <textarea id="template-description" formControlName="description" rows="4" [placeholder]="'templateCreate.descriptionPlaceholder' | translate"></textarea>
      </div>

      <div class="field">
        <label for="template-default-node">{{ 'templateCreate.defaultNodeLabel' | translate }}</label>

        @if (nodes.length) {
          <select id="template-default-node" formControlName="defaultNodeId">
            <option value="" disabled>{{ 'templateCreate.nodePlaceholder' | translate }}</option>
            @for (node of nodes; track node) {
              <option [value]="node.id">{{ node.name }}</option>
            }
          </select>
          <p class="hint">{{ 'templateCreate.defaultNodeHint' | translate }}</p>
        } @else {
          <p class="empty-hint">
            {{ 'templateCreate.noNodes' | translate }}
            <a [routerLink]="['/lore', loreId, 'nodes', 'create']"
              [queryParams]="{ returnTo: nodeCreateReturnTo }"
            (click)="saveDraft()">{{ 'templateCreate.createNode' | translate }}</a> {{ 'templateCreate.firstSuffix' | translate }}
          </p>
        }

      </div>

    </div>

    <!-- Colonne droite --------------------------------------------- -->
    <div class="col-right">

      <label class="section-label">{{ 'templateCreate.fieldsLabel' | translate }}</label>

      <ul class="fields-list">
        @for (f of fields; track f; let i = $index; let first = $first; let last = $last) {
          <li class="field-row">
            <div class="reorder-stack">
              <button type="button" class="btn-icon btn-reorder"
                (click)="moveField(i, -1)"
                [disabled]="first"
                [attr.aria-label]="'templateCreate.moveUp' | translate" [title]="'templateCreate.moveUp' | translate">
                <lucide-icon [img]="ChevronUp" [size]="12"></lucide-icon>
              </button>
              <button type="button" class="btn-icon btn-reorder"
                (click)="moveField(i, 1)"
                [disabled]="last"
                [attr.aria-label]="'templateCreate.moveDown' | translate" [title]="'templateCreate.moveDown' | translate">
                <lucide-icon [img]="ChevronDown" [size]="12"></lucide-icon>
              </button>
            </div>
            <span class="field-chip"
              [class.field-chip-image]="f.type === 'IMAGE'"
              [class.field-chip-kv]="f.type === 'KEY_VALUE_LIST'"
              [class.field-chip-table]="f.type === 'TABLE'">
              <lucide-icon [img]="iconFor(f.type)" [size]="12"></lucide-icon>
              {{ f.name }}
            </span>
            <select
              class="type-select"
              [ngModel]="f.type"
              [ngModelOptions]="{ standalone: true }"
              (ngModelChange)="setFieldType(i, $event)"
              [title]="'templateCreate.fieldTypeTitle' | translate">
              <option value="TEXT">{{ 'templateCreate.typeText' | translate }}</option>
              <option value="IMAGE">{{ 'templateCreate.typeImage' | translate }}</option>
              <option value="KEY_VALUE_LIST">{{ 'templateCreate.typeKeyValue' | translate }}</option>
              <option value="TABLE">{{ 'templateCreate.typeTable' | translate }}</option>
            </select>
            @if (f.type === 'IMAGE') {
              <select
                class="layout-select"
                [ngModel]="f.layout ?? 'GALLERY'"
                [ngModelOptions]="{ standalone: true }"
                (ngModelChange)="setFieldLayout(i, $event)"
                [title]="'templateCreate.layoutTitle' | translate">
                <option value="GALLERY">{{ 'templateCreate.layoutGallery' | translate }}</option>
                <option value="HERO">{{ 'templateCreate.layoutHero' | translate }}</option>
                <option value="MASONRY">{{ 'templateCreate.layoutMasonry' | translate }}</option>
                <option value="CAROUSEL">{{ 'templateCreate.layoutCarousel' | translate }}</option>
              </select>
            }
            <button type="button" class="btn-icon" (click)="removeField(i)" [attr.aria-label]="'common.delete' | translate">
              <lucide-icon [img]="Trash2" [size]="14"></lucide-icon>
            </button>
          </li>
          <!-- Libelles (lignes d'une liste clé/valeur, ou colonnes d'un tableau) -->
          @if (f.type === 'KEY_VALUE_LIST' || f.type === 'TABLE') {
            <li class="kv-labels-row">
              @for (lbl of f.labels ?? []; track $index; let li = $index) {
                <span class="kv-label-chip">
                  <input
                    type="text"
                    [ngModel]="lbl"
                    [ngModelOptions]="{ standalone: true }"
                    (ngModelChange)="updateLabel(f, li, $event)"
                    [placeholder]="(f.type === 'TABLE' ? 'templateCreate.column' : 'templateCreate.label') | translate"
                    [attr.aria-label]="(f.type === 'TABLE' ? 'templateCreate.columnN' : 'templateCreate.labelN') | translate:{ n: (li + 1) }" />
                  <button type="button" class="kv-label-remove" (click)="removeLabel(f, li)" [attr.aria-label]="'common.remove' | translate">
                    <lucide-icon [img]="X" [size]="11"></lucide-icon>
                  </button>
                </span>
              }
              <button type="button" class="btn-kv-add-label" (click)="addLabel(f)">
                <lucide-icon [img]="Plus" [size]="12"></lucide-icon>
                {{ (f.type === 'TABLE' ? 'templateCreate.column' : 'templateCreate.label') | translate }}
              </button>
              @if (!(f.labels ?? []).length) {
                <span class="kv-labels-hint">
                  {{ (f.type === 'TABLE' ? 'templateCreate.tableLabelsHint' : 'templateCreate.kvLabelsHint') | translate }}
                </span>
              }
            </li>
          }
        }
      </ul>

      <div class="field-row add-row">
        <input
          type="text"
          [(ngModel)]="newFieldName"
          [ngModelOptions]="{ standalone: true }"
          [placeholder]="'templateCreate.addFieldPlaceholder' | translate"
          (keydown.enter)="$event.preventDefault(); addField()" />
        <select
          class="type-select"
          [(ngModel)]="newFieldType"
          [ngModelOptions]="{ standalone: true }"
          [attr.aria-label]="'templateCreate.fieldTypeTitle' | translate">
          <option value="TEXT">{{ 'templateCreate.typeText' | translate }}</option>
          <option value="IMAGE">{{ 'templateCreate.typeImage' | translate }}</option>
          <option value="KEY_VALUE_LIST">{{ 'templateCreate.typeKeyValue' | translate }}</option>
          <option value="TABLE">{{ 'templateCreate.typeTable' | translate }}</option>
        </select>
        <button type="button" class="btn-add" (click)="addField()" [title]="'templateCreate.addFieldTitle' | translate">
          <lucide-icon [img]="Plus" [size]="14"></lucide-icon>
        </button>
      </div>

      <p class="hint">{{ 'templateCreate.fieldsHelp' | translate }}</p>

    </div>

    <!-- Actions ---------------------------------------------------- -->
    <div class="actions-row">
      <button type="button" class="btn-secondary" (click)="cancel()">{{ 'common.cancel' | translate }}</button>
      <button type="submit" class="btn-primary" [disabled]="form.invalid">{{ 'templateCreate.createTemplate' | translate }}</button>
    </div>

  </form>

</div>
