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

      <div>
        <jhi-alert-error></jhi-alert-error>

<!-- BEGIN NEW FORM -->
        @if (false && editForm.controls.id.value !== null) {
        <div class="row">   
          <div class="col-4 mb-3">
            <div class="mb-3">
              <label class="form-label" for="field_id" jhiTranslate="resilientApp.inputData.id">ID</label>
              <input type="number" class="form-control" name="id" id="field_id" data-cy="id" formControlName="id" [readonly]="true" />
            </div>
          </div>
        </div>
        }
        <div class="row"> {{ '' // Period | Owner }}
          <div class="col-4 mb-3">
            <label class="form-label" for="field_period" 
              jhiTranslate="resilientApp.inputData.period"
              [ngbTooltip]="'resilientApp.inputData.help.period' | translate"
            >Period</label>
            @if (editForm.controls.id.value == null) {
              <select
                class="form-control"
                id="field_period"
                data-cy="period"
                name="period"
                formControlName="period"
                [compareWith]="comparePeriod"
              >
                @for (periodOption of periodsSharedCollection; track $index) {
                  <option [ngValue]="periodOption">{{ periodOption.name }}</option>
                }
              </select>
            } @else {
              <span class="form-control readonly">{{ inputData?.period?.name }}</span>
            }
          </div>
          <div class="col-8 mb-3">
            <label class="form-label" for="field_owner" 
              jhiTranslate="resilientApp.inputData.owner"
              [ngbTooltip]="'resilientApp.inputData.help.owner' | translate">Owner</label>
            @if (editForm.controls.id.value == 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 {
              <span class="form-control readonly">{{ inputData?.owner?.name }}</span>
            }
          </div>
        </div>
        <div class="row"> {{ '' // Variable }}
          <div class="col-12 mb-3">
            <div class="mb-3">
              <label class="form-label" for="field_variable" 
                jhiTranslate="resilientApp.inputData.variable"
                [ngbTooltip]="'resilientApp.inputData.help.variable' | translate">Variable</label>
              @if (editForm.controls.id.value == null) {
                {{'' // It's creating, make the variable editable}}
                <div class="select-with-spinner">
                  <select
                    class="form-control"
                    id="field_variable"
                    data-cy="variable"
                    name="variable"
                    formControlName="variable"
                    [compareWith]="compareVariable"
                  >
                    <option [ngValue]="null"></option>
                    @for (variableOption of variablesSharedCollection; track $index) {
                      <option [ngValue]="variableOption">{{ variableOption.name }}</option>
                    }
                  </select>
                  <span *ngIf="isLoadingVariables" class="spinner">
                    <mat-spinner diameter="16" strokeWidth="2"></mat-spinner>
                  </span>
                </div>
              } @else {
                {{'' // Can't change the variable}}
                <span class="form-control readonly">{{ inputData?.variable?.name }}</span>
              }
            </div>
          </div>
        </div>
        <div class="row"> {{ '' // Source Unit | Base Unit }}
          <div class="col-4 mb-3">
            <label class="form-label" for="field_sourceUnit" 
              jhiTranslate="resilientApp.inputData.sourceUnit"
              [ngbTooltip]="'resilientApp.inputData.help.sourceUnit' | translate">Source Unit</label>
            <select
              class="form-control"
              id="field_sourceUnit"
              data-cy="sourceUnit"
              name="sourceUnit"
              formControlName="sourceUnit"
              [compareWith]="compareUnit"
            >
              @for (unitOption of unitsSharedCollection; track $index) {
                <option [ngValue]="unitOption">{{ unitOption.name }}</option>
              }
            </select>
          </div>
          <div class="col-8 mb-3">
            <label class="form-label" for="field_unit" 
              jhiTranslate="resilientApp.inputData.unit"
              [ngbTooltip]="'resilientApp.inputData.help.unit' | translate">Unit</label>
            @if (editForm.controls.id.value == null) {
              {{'' // It's creating, bind to editForm value}}
              <span class="form-control readonly">&nbsp;{{ editForm.get('unit')?.value?.name }}</span>
            } @else {
              {{'' // It's editing, bind to inputdata value}}
              <span class="form-control readonly">&nbsp;{{ inputData?.unit?.name }}</span>
            }
          </div>
        </div>
        <div class="row" [hidden]="selectedVariableUnitType?.valueType!=='DECIMAL'"> {{ '' // Source Value | Variable Value | Imputed Value }}
          <div class="col-4 mb-3">
            <div class="mb-3">
              <label
                class="form-label"
                for="field_sourceValue"
                [ngbTooltip]="'resilientApp.inputData.help.sourceValue' | translate"
                jhiTranslate="resilientApp.inputData.sourceValue"
                >Source Value</label
              >
              <input
                type="number"
                class="form-control no-spinner"
                name="sourceValue"
                id="field_sourceValue"
                data-cy="sourceValue"
                formControlName="sourceValue"
              />
              @if (editForm.get('sourceValue')!.invalid && (editForm.get('sourceValue')!.dirty || editForm.get('sourceValue')!.touched)) {
                <div>
                  @if (editForm.get('sourceValue')?.errors?.required) {
                    <small class="form-text text-danger" jhiTranslate="entity.validation.required">O campo é obrigatório.</small>
                  }
                  <small
                    class="form-text text-danger"
                    [hidden]="!editForm.get('sourceValue')?.errors?.number"
                    jhiTranslate="entity.validation.number"
                    >Este campo é do tipo número.</small
                  >
                </div>
              }
            </div>
          </div>
          <div class="col-4">
            <div class="mb-3 mb-3">
              {{ '' // AUTOMATIC. Not user editable. Value calculated from sourceValue }}
              <label
                class="form-label"
                for="field_variableValue"
                [ngbTooltip]="'resilientApp.inputData.help.variableValue' | translate"
                jhiTranslate="resilientApp.inputData.variableValue"
                >Variable Value</label
              >
              <input
                type="number"
                name="variableValue"
                id="field_variableValue"
                data-cy="variableValue"
                formControlName="variableValue"
                hidden
              />
              <span class="form-control spinner-container readonly" [ngClass]="{'ng-invalid': variableValueHasError}">
                {{ editForm.get('variableValue')?.value }}&nbsp;
                <mat-spinner *ngIf="isVariableValueCalculating" diameter="16" strokeWidth="2"></mat-spinner>
              </span>
              @if (variableValueHasError) {
                <div>
                  <small
                    class="form-text text-danger"
                    >Ocorreu um erro na conversão do valor para a unidade base.</small
                  >
                </div>
              }
            </div>
          </div>
          <div class="col-4">
            <div class="mb-3 mb-3">
              {{ '' // AUTOMATIC. Not user editable. Value calculated from variableValue deducted of distribution }}
              <label
                class="form-label"
                for="field_imputedValue"
                [ngbTooltip]="'resilientApp.inputData.help.imputedValue' | translate"
                jhiTranslate="resilientApp.inputData.imputedValue"
                >Imputed Value</label
              >
              <input
                type="number"
                class="form-control"
                name="imputedValue"
                id="field_imputedValue"
                data-cy="imputedValue"
                formControlName="imputedValue"
                hidden
              />
              <span class="form-control readonly">{{ editForm.get('imputedValue')?.value }}&nbsp;</span>
            </div>
          </div>
        </div>
        <div class="row" [hidden]="selectedVariableUnitType?.valueType!=='STRING'"> {{ '' // String Value }}
          <div class="col-12 mb-3">
            <div class="mb-3">
              <label class="form-label" for="field_stringValue" 
                jhiTranslate="resilientApp.inputData.stringValue"
                [ngbTooltip]="'resilientApp.inputData.help.stringValue' | translate">String Value</label>
             
             <input
                type="text"
                class="form-control"
                name="stringValue"
                id="field_stringValue"
                data-cy="stringValue"
                formControlName="stringValue"
              />
            </div>
          </div>
        </div>   
        <div class="row" [hidden]="variableClassesSharedCollection.length === 0"> {{ '' // Variable Class }}
          <div class="col-12 mb-3">
            <div class="mb-3">
              <label class="form-label" for="field_variableClassCode" 
                jhiTranslate="resilientApp.inputData.variableClassName"
                [ngbTooltip]="'resilientApp.inputData.help.variableClassName' | translate">Variable Class</label>
              <div class="select-with-spinner">
                <select
                    class="form-control"
                    id="field_variableClassCode"
                    data-cy="variableClassCode"
                    name="variableClassCode"
                    formControlName="variableClassCode"
                    (change)="onVariableClassSelectionChange($event)"
                >
                  <option [ngValue]="null"></option>
                  @for (variableClassOption of variableClassesSharedCollection; track $index) {
                    <option [ngValue]="variableClassOption.code">{{ variableClassOption.name }}</option>
                  }
                </select>
                <span *ngIf="showSpinnerForVariableClasses" class="spinner">
                  <mat-spinner diameter="16" strokeWidth="2"></mat-spinner>
                </span>
              </div>  
            </div>
          </div>
        </div>
        <div class="row"> {{ '' // Source | Comments }}
          <div class="col-4 mb-3">
            <div class="mb-3">
              <label
                class="form-label"
                for="field_dataSource"
                [ngbTooltip]="'resilientApp.inputData.help.dataSource' | translate"
                jhiTranslate="resilientApp.inputData.dataSource"
                >Data Source</label
              >
              <input
                type="text"
                class="form-control"
                name="dataSource"
                id="field_dataSource"
                data-cy="dataSource"
                formControlName="dataSource"
              />
            </div>
          </div>
          <div class="col-8 mb-3">
            <div class="mb-3">
              <label class="form-label" for="field_dataComments" 
                jhiTranslate="resilientApp.inputData.dataComments"
                [ngbTooltip]="'resilientApp.inputData.help.dataComments' | translate"
                >Comments</label>
              <input
                type="text"
                class="form-control"
                name="dataComments"
                id="field_dataComments"
                data-cy="dataComments"
                formControlName="dataComments"
              />
            </div>
          </div>
        </div>
        <div class="row"> {{ '' // Source Type | Input Data Upload | Input Data }}
          <div class="col-4 mb-3">
            <div class="mb-3">
              <label
                class="form-label"
                for="field_sourceType"
                [ngbTooltip]="'resilientApp.inputData.help.sourceType' | translate"
                jhiTranslate="resilientApp.inputData.sourceType"
                >Source Type</label
              >
              @if (editForm.controls.id.value == null) {
                {{'' // It's creating, bind to editForm value}}
                <span class="form-control readonly">{{ 'resilientApp.DataSourceType.' + editForm.get('sourceType')?.value | translate }}</span>
              } @else {
                {{'' // It's editing, bind to inputData value}}
                <span class="form-control readonly">{{ 'resilientApp.DataSourceType.' + inputData?.sourceType | translate }}</span>
              }
            </div>
          </div>
          <div class="col-4">
            <div class="mb-3 mb-3">
              <label 
                class="form-label" 
                for="field_sourceInputDataUpload" 
                [ngbTooltip]="'resilientApp.inputData.help.sourceInputDataUpload' | translate"
                jhiTranslate="resilientApp.inputData.sourceInputDataUpload"
                >Source Input Data Upload</label
              >
              {{'' // Can't change the InputDataUpload reference }}
              <span class="form-control readonly">{{ inputData?.sourceInputDataUpload?.id }}&nbsp;</span>
            </div>
          </div>
          <div class="col-4">
            <div class="mb-3 mb-3">
              <label 
                class="form-label" 
                for="field_sourceInputData" 
                [ngbTooltip]="'resilientApp.inputData.help.sourceInputData' | translate"
                jhiTranslate="resilientApp.inputData.sourceInputData"
                >Source Input Data</label
              >
              {{'' // Can't change the InputData reference }}
              <span class="form-control readonly">{{ inputData?.sourceInputData?.id }}&nbsp;</span>
            </div>
          </div>
        </div>
        <div class="row"> {{ '' // Data Reference Date | Creation Date | Change Date }}
          <div class="col-4 mb-3">
            <div class="mb-3">
              <label
                class="form-label"
                for="field_dataDate"
                [ngbTooltip]="'resilientApp.inputData.help.dataDate' | translate"
                jhiTranslate="resilientApp.inputData.dataDate"
                >Data Date</label
              >
              <div class="input-group">
                <input
                  id="field_dataDate"
                  data-cy="dataDate"
                  type="text"
                  class="form-control"
                  name="dataDate"
                  ngbDatepicker
                  #dataDateDp="ngbDatepicker"
                  formControlName="dataDate"
                />
                <button type="button" class="btn btn-secondary" (click)="dataDateDp.toggle()"><fa-icon icon="calendar-alt"></fa-icon></button>
              </div>
            </div>
          </div>
          <div class="col-4 mb-3">
            <div class="mb-3">
              {{ '' // AUTOMATIC. Not user editable}}
              <label
                class="form-label"
                for="field_creationDate"
                [ngbTooltip]="'resilientApp.inputData.help.creationDate' | translate"
                jhiTranslate="resilientApp.inputData.creationDate"
                >Creation Date</label
              >
              @if (editForm.controls.id.value == null) {
                {{'' // It's creating, bind to editForm value}}
                <span class="form-control readonly">{{ editForm.get('creationDate')?.value }}</span>
              } @else {
                {{'' // It's editing, bind to inputData value}}
                <span class="form-control readonly">{{ inputData?.creationDate }}</span>
              }
            </div>
          </div>
          <div class="col-4 mb-3">
            <div class="mb-3">
              {{ '' // AUTOMATIC. Not user editable}}
              <label
                class="form-label"
                for="field_changeDate"
                [ngbTooltip]="'resilientApp.inputData.help.changeDate' | translate"
                jhiTranslate="resilientApp.inputData.changeDate"
                >Change Date</label
              >
              <span class="form-control readonly">{{ inputData?.changeDate }}&nbsp;</span>
            </div>
          </div>
        </div>
        <div class="row"> {{ '' // Aquired By | Created By | Changed By }}
          <div class="col-4 mb-3">
            <div class="mb-3">
              <label
                class="form-label"
                for="field_dataUser"
                [ngbTooltip]="'resilientApp.inputData.help.dataUser' | translate"
                jhiTranslate="resilientApp.inputData.dataUser"
                >Data User</label
              >
              <input type="text" class="form-control" name="dataUser" id="field_dataUser" data-cy="dataUser" formControlName="dataUser" />
            </div>
          </div>
          <div class="col-4 mb-3">
            <div class="mb-3">
              {{ '' // AUTOMATIC. Not user editable}}
              <label
                class="form-label"
                for="field_creationUsername"
                [ngbTooltip]="'resilientApp.inputData.help.creationUsername' | translate"
                jhiTranslate="resilientApp.inputData.creationUsername"
                >Criation Username</label
              >
              <span class="form-control readonly">{{ editForm.get('creationUsername')?.value }}</span>
            </div>
          </div>
          <div class="col-4 mb-3">
            <div class="mb-3">
              {{ '' // AUTOMATIC. Not user editable}}
              <label
                class="form-label"
                for="field_changeUsername"
                [ngbTooltip]="'resilientApp.inputData.help.changeUsername' | translate"
                jhiTranslate="resilientApp.inputData.changeUsername"
                >Change Username</label
              >
              <span class="form-control readonly">{{ editForm.get('changeUsername')?.value }}</span>
            </div>
          </div>
        </div>

<!-- END   NEW FORM -->

      <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"
          class="btn btn-primary"

          *ngIf="hasCreatePermission(Resources.INPUT_DATA)"
          [class.disabled]="!canCreate()"
          [disabled]="!canCreate() || editForm.invalid || isSaving"
        >
          <fa-icon icon="save"></fa-icon>&nbsp;<span jhiTranslate="entity.action.save">Guardar</span>
        </button>
      </div>
      </div>
    </form>
  </div>
</div>
