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

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

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

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

    <div class="field">
      <label>{{ 'loreNodeCreate.parentLabel' | translate }} <span class="optional">{{ 'common.optional' | translate }}</span></label>
      <select formControlName="parentId">
        <option value="">{{ 'loreNodeCreate.rootOption' | translate }}</option>
        @for (parent of availableParents; track parent) {
          <option [value]="parent.id">{{ parent.name }}</option>
        }
      </select>
      <p class="hint">{{ 'loreNodeCreate.parentHint' | translate }}</p>
    </div>

    <div class="field">
      <label>{{ 'loreNodeCreate.iconLabel' | translate }}</label>
      <div class="icon-grid">
        @for (option of iconOptions; track option) {
          <button
            type="button"
            class="icon-btn"
            [class.selected]="selectedIcon === option.key"
            (click)="selectIcon(option.key)">
            <lucide-icon [img]="option.icon" [size]="18"></lucide-icon>
          </button>
        }
      </div>
    </div>

    <div class="field">
      <label>{{ 'common.description' | translate }} <span class="optional">{{ 'common.optional' | translate }}</span></label>
      <textarea
        formControlName="description"
        [placeholder]="'loreNodeCreate.descriptionPlaceholder' | translate"
        rows="4">
      </textarea>
    </div>

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

  </form>

</div>
