<!-- GUIPropertiesViewAndSortCustomizer -->
<div class="d-flex justify-content-center">
  <div class="col-8">
    <form name="editForm" novalidate (ngSubmit)="save()" [formGroup]="editForm">
      <h2
        id="jhi-organization-type-heading"
        data-cy="OrganizationTypeCreateUpdateHeading"
        jhiTranslate="resilientApp.organizationType.home.createOrEditLabel"
      >
        Criar ou editar Organization Type
      </h2>

      <div>
        <jhi-alert-error></jhi-alert-error>
        <div class="mb-3">
          <label
            class="form-label"
            for="field_code"
            [ngbTooltip]="'resilientApp.organizationType.help.code' | translate"
            jhiTranslate="resilientApp.organizationType.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"
            [ngbTooltip]="'resilientApp.organizationType.help.name' | translate"
            jhiTranslate="resilientApp.organizationType.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>
              }
              @if (editForm.get('name')?.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_description"
            [ngbTooltip]="'resilientApp.organizationType.help.description' | translate"
            jhiTranslate="resilientApp.organizationType.description"
            >Description</label
          >
          <input
            type="text"
            class="form-control"
            name="description"
            id="field_description"
            data-cy="description"
            formControlName="description"
          />
          @if (editForm.get('description')!.invalid && (editForm.get('description')!.dirty || editForm.get('description')!.touched)) {
            <div>
              @if (editForm.get('description')?.errors?.required) {
                <small class="form-text text-danger" jhiTranslate="entity.validation.required">O campo é obrigatório.</small>
              }
              @if (editForm.get('description')?.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_nature"
            [ngbTooltip]="'resilientApp.organizationType.help.nature' | translate"
            jhiTranslate="resilientApp.organizationType.nature"
            >Nature</label
          >
          @if (editForm.controls.id.value == null) {
          <select class="form-control" name="nature" formControlName="nature" id="field_nature" data-cy="nature">
            <option [ngValue]="null">{{ 'resilientApp.OrganizationNature.null' | translate }}</option>
            @for (organizationNature of organizationNatureValues; track $index) {
              <option [value]="organizationNature">{{ 'resilientApp.OrganizationNature.' + organizationNature | translate }}</option>
            }
          </select>
          } @else {
          <input type="text" class="form-control readonly" name="nature" id="field_nature" data-cy="nature" formControlName="nature" [readonly]="true"/>
          }

          @if (editForm.get('nature')!.invalid && (editForm.get('nature')!.dirty || editForm.get('nature')!.touched)) {
            <div>
              @if (editForm.get('nature')?.errors?.required) {
                <small class="form-text text-danger" jhiTranslate="entity.validation.required">O campo é obrigatório.</small>
              }
            </div>
          }
        </div>
        <div class="mb-3">
          <label
            class="form-label"
            for="field_icon"
            [ngbTooltip]="'resilientApp.organizationType.help.icon' | translate"
            jhiTranslate="resilientApp.organizationType.icon"
            >Icon</label
          >
          <div>
            @if (editForm.get('icon')!.value) {
              <img
                [src]="'data:' + editForm.get('iconContentType')!.value + ';base64,' + editForm.get('icon')!.value"
                style="max-height: 100px"
                alt="organizationType"
              />
            }
            @if (editForm.get('icon')!.value) {
              <div class="form-text text-danger clearfix">
                <span class="pull-start">{{ editForm.get('iconContentType')!.value }}, {{ byteSize(editForm.get('icon')!.value!) }}</span>
                <button
                  type="button"
                  (click)="clearInputImage('icon', 'iconContentType', 'file_icon')"
                  class="btn btn-secondary btn-xs pull-end"
                >
                  <fa-icon icon="times"></fa-icon>
                </button>
              </div>
            }
            <input
              type="file"
              id="file_icon"
              data-cy="icon"
              (change)="setFileData($event, 'icon', true)"
              accept="image/*"
              jhiTranslate="entity.action.addimage"
            />
          </div>
          <input type="hidden" class="form-control" name="icon" id="field_icon" data-cy="icon" formControlName="icon" />
          <input type="hidden" class="form-control" name="iconContentType" id="field_iconContentType" formControlName="iconContentType" />
        </div>
        <div class="mb-3">
          <label for="field_metadataProperties" jhiTranslate="resilientApp.organizationType.metadataProperties">Metadata Properties</label>
          <select
            class="form-control"
            id="field_metadataProperties"
            data-cy="metadataProperties"
            multiple
            name="metadataProperties"
            formControlName="metadataProperties"
            [compareWith]="compareMetadataProperty"
          >
            @for (metadataPropertyOption of metadataPropertiesSharedCollection; track $index) {
              <option [ngValue]="metadataPropertyOption">{{ metadataPropertyOption.name }}</option>
            }
          </select>
        </div>

<!-- HIDDEN Properties 
        @if (editForm.controls.id.value !== null) {
          <div class="mb-3">
            <label class="form-label" for="field_id" jhiTranslate="resilientApp.organizationType.id">ID</label>
            <input type="number" class="form-control" name="id" id="field_id" data-cy="id" formControlName="id" [readonly]="true" />
          </div>
        }
        <div class="mb-3">
          <label
            class="form-label"
            for="field_version"
            [ngbTooltip]="'resilientApp.organizationType.help.version' | translate"
            jhiTranslate="resilientApp.organizationType.version"
            >Version</label
          >
          <input type="number" class="form-control" name="version" id="field_version" data-cy="version" formControlName="version" />
        </div>
--> 

      </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>
