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

      <div>
        <jhi-alert-error></jhi-alert-error>
        <div class="mb-3">
          <label class="form-label" for="field_parent" jhiTranslate="resilientApp.organization.parent">Parent</label>
          @if (editForm.controls.id.value == null && parentOrganizationDefault == null) {
          <select
            class="form-control"
            id="field_parent"
            data-cy="parent"
            name="parent"
            formControlName="parent"
            [compareWith]="compareOrganization"
          >
            <option [ngValue]="null"></option>
            @for (organizationOption of organizationsSharedCollection; track $index) {
              <option [ngValue]="organizationOption">{{ organizationOption.name }}</option>
            }
          </select>
          } @else if (parentOrganizationDefault != null) {
          <input type="text" class="form-control readonly" name="parentOrganizationDefault" id="parentOrganizationDefault" data-cy="parentOrganizationDefault" formControlName="parentOrganizationDefault" value="{{parentOrganizationDefault.name}}" [readonly]="true"/>
          } @else {
          <input type="text" class="form-control readonly" name="parentOrganizationDefault" id="parentOrganizationDefault" data-cy="parentOrganizationDefault" formControlName="parentOrganizationDefault" value="-- ROOT --" [readonly]="true"/>
          }

        </div>
        <div class="mb-3">
          <label class="form-label" for="field_organizationType" jhiTranslate="resilientApp.organization.organizationType"
            >Organization Type</label
          >
          @if (editForm.controls.id.value == null && organizationTypeDefault == null) {
          <select
            class="form-control"
            id="field_organizationType"
            data-cy="organizationType"
            name="organizationType"
            formControlName="organizationType"
            [compareWith]="compareOrganizationType"
          >
            <option [ngValue]="null"></option>
            @for (organizationTypeOption of organizationTypesSharedCollection; track $index) {
              <option [ngValue]="organizationTypeOption">{{ organizationTypeOption.name }}</option>
            }
          </select>
          } @else if (organizationTypeDefault != null) {
          <input type="text" class="form-control readonly" name="organizationTypeDefault" id="organizationTypeDefault" data-cy="organizationTypeDefault" formControlName="organizationTypeDefault" value="{{organizationTypeDefault.name}}" [readonly]="true"/>
          } @else {
          <input type="text" class="form-control readonly" name="organizationTypeDefault" id="organizationTypeDefault" data-cy="organizationTypeDefault" formControlName="organizationTypeDefault" value="-- ?? --" [readonly]="true"/>
          }

        </div>
        <div class="mb-3">
          <label
            class="form-label"
            for="field_code"
            [ngbTooltip]="'resilientApp.organization.help.code' | translate"
            jhiTranslate="resilientApp.organization.code"
            >Code</label
          >
          <input type="text" class="form-control" name="code" id="field_code" data-cy="code" formControlName="code" />

          @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.organization.help.name' | translate"
            jhiTranslate="resilientApp.organization.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_image" jhiTranslate="resilientApp.organization.image">Image</label>
          <div>
            @if (editForm.get('image')!.value) {
              <img
                [src]="'data:' + editForm.get('imageContentType')!.value + ';base64,' + editForm.get('image')!.value"
                style="max-height: 100px"
                alt="organization"
              />
            }
            @if (editForm.get('image')!.value) {
              <div class="form-text text-danger clearfix">
                <span class="pull-start">{{ editForm.get('imageContentType')!.value }}, {{ byteSize(editForm.get('image')!.value!) }}</span>
                <button
                  type="button"
                  (click)="clearInputImage('image', 'imageContentType', 'file_image')"
                  class="btn btn-secondary btn-xs pull-end"
                >
                  <fa-icon icon="times"></fa-icon>
                </button>
              </div>
            }
            <input
              type="file"
              id="file_image"
              data-cy="image"
              (change)="setFileData($event, 'image', true)"
              accept="image/*"
              jhiTranslate="entity.action.addimage"
            />
          </div>
          <input type="hidden" class="form-control" name="image" id="field_image" data-cy="image" formControlName="image" />
          <input
            type="hidden"
            class="form-control"
            name="imageContentType"
            id="field_imageContentType"
            formControlName="imageContentType"
          />
        </div>
        <div class="mb-3" *ngIf="editForm.get('organizationType')?.value?.nature === organizationNature.ORGANIZATION">
          <label class="form-label" for="field_inputInventory" jhiTranslate="resilientApp.organization.inputInventory"
            >Input Inventory</label
          >
          <input
            type="checkbox"
            class="form-check"
            name="inputInventory"
            id="field_inputInventory"
            data-cy="inputInventory"
            formControlName="inputInventory"
          />
        </div>
        <div class="mb-3" *ngIf="editForm.get('organizationType')?.value?.nature === organizationNature.ORGANIZATION">
          <label class="form-label" for="field_outputInventory" jhiTranslate="resilientApp.organization.outputInventory"
            >Output Inventory</label
          >
          <input
            type="checkbox"
            class="form-check"
            name="outputInventory"
            id="field_outputInventory"
            data-cy="outputInventory"
            formControlName="outputInventory"
          />
        </div>
        
        <div class="mb-3">
          <label
            class="form-label"
            for="field_sort"
            [ngbTooltip]="'resilientApp.organization.help.sort' | translate"
            jhiTranslate="resilientApp.organization.sort"
            >Sort</label
          >
          <input type="number" class="form-control" name="sort" id="field_sort" data-cy="sort" formControlName="sort" />
        </div>
        
        <!-- User property applies only to OrganizationNature.PERSON -->
        <div class="mb-3" *ngIf="editForm.get('organizationType')?.value?.nature === organizationNature.PERSON">
          <label class="form-label" for="field_user" jhiTranslate="resilientApp.organization.user">User</label>
          <!--
          <select 
            class="form-control" 
            id="field_user" 
            data-cy="user" 
            name="user" 
            formControlName="user" 
            [compareWith]="compareUser">
            <option [ngValue]="null"></option>
            @for (userOption of usersSharedCollection; track $index) {
              <option [ngValue]="userOption">{{ userOption.login }}</option>
            }
          </select>
          -->

          <ng-select
            class="form-control drop-down-panel"
            formControlName="user"
            [items]="usersSharedCollection"
            [compareWith]="compareUser"
            [clearable]="true"
            [searchFn]="userSearchFn"
          >
            <ng-template ng-label-tmp let-item="item">
              {{ item.login }} ( {{ item.email }} )
            </ng-template>
            <ng-template ng-option-tmp let-item="item">
              {{ item.login }} ( {{ item.email }} )
            </ng-template>
          </ng-select>
        </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>
