@if (node) {
  <div class="page">
    <header class="page-header">
      <div>
        <h1>{{ 'loreNodeEdit.title' | translate }}</h1>
        <p class="subtitle">
          {{ 'loreNodeEdit.summary' | translate:{ folders: childFolderCount, pages: pageCount } }}
        </p>
      </div>
      <div class="header-actions">
        <button type="button" class="btn-secondary" (click)="cancel()">{{ 'common.cancel' | translate }}</button>
        <button
          type="submit"
          class="btn-primary"
          [disabled]="form.invalid"
          (click)="save()">
          {{ 'common.save' | translate }}
        </button>
      </div>
    </header>
    <form [formGroup]="form" class="edit-form">
      <div class="field">
        <label>{{ 'loreNodeEdit.nameLabel' | translate }}</label>
        <input type="text" formControlName="name" />
      </div>
      <div class="field">
        <label>{{ 'loreNodeEdit.parentLabel' | translate }} <span class="optional">{{ 'common.optional' | translate }}</span></label>
        <select formControlName="parentId">
          <option value="">{{ 'loreNodeEdit.rootOption' | translate }}</option>
          @for (parent of availableParents; track parent) {
            <option [value]="parent.id">{{ parent.name }}</option>
          }
        </select>
        <p class="hint">{{ 'loreNodeEdit.parentHint' | translate }}</p>
      </div>
      <div class="field">
        <label>{{ 'loreNodeEdit.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>
    </form>
  </div>
}