@if (template) {
  <div class="page">
    <header class="page-header">
      <div>
        <h1>{{ template.name }}</h1>
        <p class="subtitle">{{ 'templateEdit.subtitle' | translate }}</p>
      </div>
      <div class="header-actions">
        <button type="button" class="btn-danger" (click)="delete()">{{ 'common.delete' | translate }}</button>
        <button type="button" class="btn-primary" (click)="save()" [disabled]="form.invalid">{{ 'common.save' | translate }}</button>
      </div>
    </header>
    <form [formGroup]="form" class="template-form">
      <!-- Colonne gauche ---------------------------------------------- -->
      <div class="col-left">
        <div class="field">
          <label for="template-edit-name">{{ 'common.name' | translate }}</label>
          <input id="template-edit-name" type="text" formControlName="name" />
        </div>
        <div class="field">
          <label for="template-edit-default-node">{{ 'templateEdit.defaultNodeLabel' | translate }}</label>
          <select id="template-edit-default-node" formControlName="defaultNodeId">
            <option value="">{{ 'templateEdit.noneOption' | translate }}</option>
            @for (node of nodes; track node) {
              <option [value]="node.id">{{ node.name }}</option>
            }
          </select>
          <p class="hint">{{ 'templateEdit.defaultNodeHint' | translate }}</p>
        </div>
        <div class="field">
          <label for="template-edit-description">{{ 'common.description' | translate }}</label>
          <textarea id="template-edit-description" formControlName="description" rows="6"></textarea>
        </div>
      </div>
      <!-- Colonne droite --------------------------------------------- -->
      <div class="col-right">
        <label class="section-label">{{ 'templateEdit.fieldsLabel' | translate }}</label>
        <app-block-grid-builder
          [fields]="fields"
          (fieldsChange)="fields = $event"
          [existingFieldNames]="originalFieldNames">
        </app-block-grid-builder>
      </div>
    </form>
  </div>
}