<form class="space-y-4" (ngSubmit)="onSubmit()" [formGroup]="form">
  <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
    <z-form-field>
      <label z-form-label>Nom du rôle</label>
      <div z-form-control [errorMessage]="errorMessage('name') || ''">
        <input z-input placeholder="Nom" formControlName="name" />
      </div>
    </z-form-field>
    <z-form-field>
      <label z-form-label>Description</label>
      <div z-form-control>
        <input z-input placeholder="Description" formControlName="description" />
      </div>
    </z-form-field>
  </div>

  <div class="space-y-2">
    <div class="text-sm font-medium">Permissions</div>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-2" [formGroup]="form">
      <div formGroupName="permMap" class="contents">
        @for (p of permissions; track p.id) {
          <label class="flex items-center gap-2">
            <z-checkbox [formControlName]="p.name"></z-checkbox>
            <span>
              <span class="font-medium">{{ p.name }}</span>
              <span class="text-muted-foreground text-xs ml-2">{{ p.description }}</span>
            </span>
          </label>
        }
      </div>
    </div>
    @if (submitted && selectedPermissionsCount() === 0) {
      <p class="text-sm text-red-500">Sélectionnez au moins une permission.</p>
    }
  </div>
</form>
