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

      <div>
        <jhi-alert-error></jhi-alert-error>
        <div class="mb-3">
          <label class="form-label" for="field_owner" jhiTranslate="resilientApp.inputDataUpload.owner">Owner</label>
          @if (editForm.controls.id.value == null && ownerOrganizationDefault == null) {
          <select
            class="form-control"
            id="field_owner"
            data-cy="owner"
            name="owner"
            formControlName="owner"
            [compareWith]="compareOrganization"
          >
            <option [ngValue]="null"></option>
            @for (organizationOption of organizationsSharedCollection; track $index) {
              <option [ngValue]="organizationOption">{{ organizationOption.name }}</option>
            }
          </select>
          } @else if (ownerOrganizationDefault != null) {
          <input type="text" class="form-control readonly" name="ownerOrganizationDefault" id="ownerOrganizationDefault" value="{{ownerOrganizationDefault.name}}" [readonly]="true"/>
          } 
        </div>
        <div class="mb-3">
          <label class="form-label" for="field_period" jhiTranslate="resilientApp.inputDataUpload.period">Period</label>
          @if (periodsSharedCollection.length==1) {
            <input type="text" class="form-control readonly" name="period" id="period" value="{{editForm.get('period')!.value?.name}}" [readonly]="true"/>
          } @else {
            <select
              class="form-control"
              id="field_period"
              data-cy="period"
              name="period"
              formControlName="period"
              [compareWith]="comparePeriod"
            >
              <option [ngValue]="null"></option>
              @for (periodOption of periodsSharedCollection; track $index) {
                <option [ngValue]="periodOption">{{ periodOption.name }}</option>
              }
            </select>
          }
        </div>
        <div class="mb-3">
          <label
            class="form-label"
            for="field_title"
            [ngbTooltip]="'resilientApp.inputDataUpload.help.title' | translate"
            jhiTranslate="resilientApp.inputDataUpload.title"
            >Title</label
          >
          <input type="text" class="form-control" name="title" id="field_title" data-cy="title" formControlName="title" />
          @if (editForm.get('title')!.invalid && (editForm.get('title')!.dirty || editForm.get('title')!.touched)) {
            <div>
              @if (editForm.get('title')?.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_type"
            [ngbTooltip]="'resilientApp.inputDataUpload.help.type' | translate"
            jhiTranslate="resilientApp.inputDataUpload.type"
            >Type</label
          >
          @if (uploadTypeValues.length==1) {
            <input type="text" class="form-control readonly" name="type" id="tyle" value="{{'resilientApp.UploadType.' + editForm.get('type')!.value | translate}}" [readonly]="true"/>
          } @else {
            <select class="form-control" name="type" formControlName="type" id="field_type" data-cy="type">
              <option [ngValue]="null">{{ 'resilientApp.UploadType.null' | translate }}</option>
              @for (uploadType of uploadTypeValues; track $index) {
                <option [value]="uploadType">{{ 'resilientApp.UploadType.' + uploadType | translate }}</option>
              }
            </select>
            @if (editForm.get('type')!.invalid && (editForm.get('type')!.dirty || editForm.get('type')!.touched)) {
              <div>
                @if (editForm.get('type')?.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_dataFile"
            [ngbTooltip]="'resilientApp.inputDataUpload.help.dataFile' | translate"
            jhiTranslate="resilientApp.inputDataUpload.dataFile"
            >Data File</label
          >
          <div>
            @if (editForm.get('dataFile')!.value) {
              <div class="form-text text-danger clearfix">
                <a
                  class="pull-start"
                  (click)="openFile(editForm.get('dataFile')!.value!, editForm.get('dataFileContentType')!.value!)"
                  jhiTranslate="entity.action.open"
                  >Abrir</a
                ><br />
                <span class="pull-start"
                  >{{ editForm.get('dataFileContentType')!.value }}, {{ byteSize(editForm.get('dataFile')!.value!) }}</span
                >
                <button
                  type="button"
                  (click)="editForm.patchValue({ dataFile: undefined, dataFileContentType: undefined })"
                  class="btn btn-secondary btn-xs pull-end"
                >
                  <fa-icon icon="times"></fa-icon>
                </button>
              </div>
            }
            <input
              type="file"
              accept=".xls,.xlsx,application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
              id="file_dataFile"
              data-cy="dataFile"
              (change)="setFileData($event, 'dataFile', false)"
              jhiTranslate="entity.action.addblob"
            />
          </div>
          <input type="hidden" class="form-control" name="dataFile" id="field_dataFile" data-cy="dataFile" formControlName="dataFile" />
          <input
            type="hidden"
            class="form-control"
            name="dataFileContentType"
            id="field_dataFileContentType"
            formControlName="dataFileContentType"
          />
          @if (editForm.get('dataFile')!.invalid && (editForm.get('dataFile')!.dirty || editForm.get('dataFile')!.touched)) {
            <div>
              @if (editForm.get('dataFile')?.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_comments"
            [ngbTooltip]="'resilientApp.inputDataUpload.help.comments' | translate"
            jhiTranslate="resilientApp.inputDataUpload.comments"
            >Comments</label
          >
          <input type="text" class="form-control" name="comments" id="field_comments" data-cy="comments" formControlName="comments" />
        </div>
        
        @if (editForm.controls.id.value !== null) {
        <div class="mb-3">
          <dl class="row-md jh-entity-details">
            <dt>
              <span [ngbTooltip]="'resilientApp.inputDataUpload.help.state' | translate" jhiTranslate="resilientApp.inputDataUpload.state">State</span>
            </dt>
            <dd>
              <span [jhiTranslate]="'resilientApp.UploadStatus.' + (inputDataUpload!.state ?? 'null')">{{ inputDataUpload!.state }}</span>
            </dd>
          </dl>
        </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>
