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

      <div>
        <jhi-alert-error></jhi-alert-error>
        <div class="mb-3">
          <label class="form-label" for="field_name" jhiTranslate="resilientApp.unitType.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>
        <div class="mb-3">
          <label class="form-label" for="field_description" jhiTranslate="resilientApp.unitType.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>
              }
            </div>
          }
        </div>
        <div class="mb-3">
          <label class="form-label" for="field_valueType" jhiTranslate="resilientApp.unitType.valueType">Value Type</label>
          <select class="form-control" name="valueType" formControlName="valueType" id="field_valueType" data-cy="valueType">
            <option [ngValue]="null">{{ 'resilientApp.UnitValueType.null' | translate }}</option>
            @for (unitValueType of unitValueTypeValues; track $index) {
              <option [value]="unitValueType">{{ 'resilientApp.UnitValueType.' + unitValueType | translate }}</option>
            }
          </select>
          @if (editForm.get('valueType')!.invalid && (editForm.get('valueType')!.dirty || editForm.get('valueType')!.touched)) {
            <div>
              @if (editForm.get('valueType')?.errors?.required) {
                <small class="form-text text-danger" jhiTranslate="entity.validation.required">O campo é obrigatório.</small>
              }
            </div>
          }
        </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>

        @if (editForm.controls.id.value !== null) {
        }
        <button
          *ngIf="(editForm.controls.id.value!=null && hasUpdatePermission(Resources.UNIT_TYPE))
                  ||
                 (editForm.controls.id.value==null && hasCreatePermission(Resources.UNIT_TYPE))"
          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>
