<app-form-page
  *ngIf="node"
  [formGroup]="form"
  [isUpdate]="isUpdate"
  (onSave)="save()"
  (onClose)="close()">
  <ng-template formPageHeader let-isUpdate>
    <h2>
      {{ 'common.role' | translate }}
      {{
        (isUpdate ? 'sidebar.header.update' : 'sidebar.header.create')
          | translate
      }}
    </h2>
  </ng-template>

  <ng-template formPageContent>
    <div class="form-page-input">
      <p class="label">{{ 'common.id' | translate }}</p>
      <input pInputText class="value" type="number" formControlName="id"/>
    </div>
    <div class="form-page-input">
      <p class="label">{{ 'common.name' | translate }}</p>
      <input pInputText class="value" type="text" formControlName="name"/>
    </div>
    <div class="form-page-input">
      <p class="label">{{ 'common.description' | translate }}</p>
      <input
        pInputText
        class="value"
        type="text"
        formControlName="description"/>
    </div>
    <div class="divider"></div>

    <div class="flex flex-col gap-5">
      <div *ngFor="let group of Object.keys(permissionGroups)">
        <div class="flex flex-col gap-2">
          <div class="flex justify-between">
            <label class="flex-1" for="roles.permission_groups.{{ group }}">
              <h3>
                {{ 'permissions.' + group | translate }}
              </h3>
            </label>
            <form #form="ngForm">
              <p-inputSwitch
                name="roles.permission_groups.{{ group }}"
                (onChange)="toggleGroup($event, group)"
                [ngModel]="isGroupChecked(group)"></p-inputSwitch>
            </form>
          </div>

          <div
            *ngFor="let permission of permissionGroups[group]"
            class="flex flex-col">
            <div class="flex items-center justify-between w-full">
              <label class="flex-1" for="{{ permission.name }}">
                {{ 'permissions.' + permission.name | translate }}
              </label>
              <p-inputSwitch class="flex items-center justify-center" [formControlName]="permission.name">
              </p-inputSwitch>
            </div>
            <div *ngIf="permission.description">
              <p class="text-sm text-gray-500">
                {{ permission.description }}
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </ng-template>
</app-form-page>
