<div class="d-flex justify-content-center">
  <div class="col-8">
    <form name="editForm" novalidate (ngSubmit)="save()" [formGroup]="editForm">
      <h2 id="jhi-security-group-heading" data-cy="DashboardComponentCreateUpdateHeading" jhiTranslate="resilientApp.securityGroup.home.createOrEditLabel">
        Criar ou editar Security Group
      </h2>

      <div>
        <jhi-alert-error></jhi-alert-error>
        <div class="mb-3">
          <label
            class="form-label"
            for="field_code"
            [ngbTooltip]="'resilientApp.securityGroup.help.code' | translate"
            jhiTranslate="resilientApp.securityGroup.code"
            >Code</label
          >
          @if (editForm.controls.id.value == null) {
          <input type="text" class="form-control" name="code" id="field_code" data-cy="code" formControlName="code" />
          } @else {
          <input type="text" class="form-control readonly" name="code" id="field_code" data-cy="code" formControlName="code"  [readonly]="true" />
          }

          @if (editForm.get('code')!.invalid && (editForm.get('code')!.dirty || editForm.get('code')!.touched)) {
            <div>
              @if (editForm.get('code')?.errors?.required) {
                <small class="form-text text-danger" jhiTranslate="entity.validation.required">O campo é obrigatório.</small>
              }
              @if (editForm.get('code')?.errors?.minlength) {
                <small class="form-text text-danger" jhiTranslate="entity.validation.minlength" [translateValues]="{ min: '3' }"
                  >Este campo deve ter pelo menos 3 caracteres.</small
                >
              }
            </div>
          }
        </div>
        
        <div class="mb-3">
          <label class="form-label" for="field_name" jhiTranslate="resilientApp.securityGroup.name">Name</label>
          <input type="text" class="form-control" name="name" id="field_name" data-cy="name" formControlName="name" />
          @if (editForm.get('name')!.invalid && (editForm.get('name')!.dirty || editForm.get('name')!.touched)) {
            <div>
              @if (editForm.get('name')?.errors?.required) {
                <small class="form-text text-danger" jhiTranslate="entity.validation.required">O campo é obrigatório.</small>
              }
            </div>
          }
        </div>
        
        <!-- Tabs navs -->
        <ul class="nav nav-tabs mb-3"role="tablist">
          <li class="nav-item" role="presentation">
          <a
            class="nav-link"
            [class.active]="currentTab === 'permissions'"
            (click)="setTab('permissions')"
            >Permissions</a
          >
          </li>
        </ul>
        <!-- Tabs navs -->
    
        <!-- Tabs content -->
        <div class="tab-content">
          <div
          class="tab-pane fade"
          [class.active]="currentTab === 'permissions'"
          [class.show]="currentTab === 'permissions'"
          >

          <table class="table table-security-group-permissions" formArrayName="securityGroupPermissions">
            <thead class="thead bg-info">
            <tr>
              <th scope="col" jhiTranslate="resilientApp.securityGroup.tabPermissions.resource">Resource</th>
              <th scope="col" jhiTranslate="resilientApp.securityGroup.tabPermissions.createPermissison">Create</th>
              <th scope="col" jhiTranslate="resilientApp.securityGroup.tabPermissions.readPermissison">Read</th>
              <th scope="col" jhiTranslate="resilientApp.securityGroup.tabPermissions.updatePermissison">Update</th>
              <th scope="col" jhiTranslate="resilientApp.securityGroup.tabPermissions.deletePermissison">Delete</th>
            </tr>
            </thead>
            <tbody>
            <tr *ngFor="let permission of securityGroupPermissions.controls; let i=index" [formGroupName]="i">
              <td>
                {{ permission.get('securityResource')?.value?.name }}
                <!-- input type="text" class="form-control" placeholder="securityResource" formControlName="securityResource" -->
              </td>
              <td style="max-width:70px;">
                <select class="form-control" name="createPermission" formControlName="createPermission" id="field_createPermission" data-cy="createPermission">
                  <option [ngValue]="null">{{ 'resilientApp.SecurityPermission.null' | translate }}</option>
                  @for (securityPermission of securityPermissions; track $index) {
                    <option [value]="securityPermission">{{ 'resilientApp.SecurityPermission.' + securityPermission | translate }}</option>
                  }
                </select>
              </td>
              <td style="max-width:70px;">
                <select class="form-control" name="readPermission" formControlName="readPermission" id="field_readPermission" data-cy="readPermission">
                  <option [ngValue]="null">{{ 'resilientApp.SecurityPermission.null' | translate }}</option>
                  @for (securityPermission of securityPermissions; track $index) {
                    <option [value]="securityPermission">{{ 'resilientApp.SecurityPermission.' + securityPermission | translate }}</option>
                  }
                </select>
              </td>
              <td style="max-width:70px;">
                <select class="form-control" name="updatePermission" formControlName="updatePermission" id="field_updatePermission" data-cy="updatePermission">
                  <option [ngValue]="null">{{ 'resilientApp.SecurityPermission.null' | translate }}</option>
                  @for (securityPermission of securityPermissions; track $index) {
                    <option [value]="securityPermission">{{ 'resilientApp.SecurityPermission.' + securityPermission | translate }}</option>
                  }
                </select>
              </td>
              <td style="max-width:70px;">
                <select class="form-control" name="deletePermission" formControlName="deletePermission" id="field_deletePermission" data-cy="deletePermission">
                  <option [ngValue]="null">{{ 'resilientApp.SecurityPermission.null' | translate }}</option>
                  @for (securityPermission of securityPermissions; track $index) {
                    <option [value]="securityPermission">{{ 'resilientApp.SecurityPermission.' + securityPermission | translate }}</option>
                  }
                </select>
              </td>
            </tr>
            </tbody>
          </table>
          </div>
        </div>
        <!-- Tabs content -->
      </div>

      <div>
        <button type="button" id="cancel-save" data-cy="entityCreateCancelButton" class="btn btn-secondary" (click)="previousState()">
          <fa-icon icon="ban"></fa-icon>&nbsp;<span jhiTranslate="entity.action.cancel">Cancelar</span>
        </button>

        <button
          type="submit"
          id="save-entity"
          data-cy="entityCreateSaveButton"
          [disabled]="editForm.invalid || isSaving"
          class="btn btn-primary"
        >
          <fa-icon icon="save"></fa-icon>&nbsp;<span jhiTranslate="entity.action.save">Guardar</span>
        </button>
      </div>
    </form>
  </div>
</div>
