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

      <div>
        <jhi-alert-error></jhi-alert-error>
        <div class="mb-3">
          <label class="form-label" for="field_fromUnit" jhiTranslate="resilientApp.unitConverter.fromUnit">From Unit</label>
          @if (editForm.controls.id.value == null) {
          <select
            class="form-control"
            id="field_fromUnit"
            data-cy="fromUnit"
            name="fromUnit"
            formControlName="fromUnit"
            [compareWith]="compareUnit"
          >
            <option [ngValue]="null"></option>
            @for (unitOption of unitsSharedCollection; track $index) {
              <option [ngValue]="unitOption">{{ unitOption.unitType?.name }} » {{ unitOption.name }}</option>
            }
          </select>
          } @else {
          <input type="text" class="form-control readonly" [readonly]="true" value="{{ unitConverter?.fromUnit?.unitType?.name }} » {{unitConverter?.fromUnit?.name}}"/>
          }

        </div>
        <div class="mb-3">
          <label class="form-label" for="field_toUnit" jhiTranslate="resilientApp.unitConverter.toUnit">To Unit</label>
          @if (editForm.controls.id.value == null) {
          <select
            class="form-control"
            id="field_toUnit"
            data-cy="toUnit"
            name="toUnit"
            formControlName="toUnit"
            [compareWith]="compareUnit"
          >
            <option [ngValue]="null"></option>
            @for (unitOption of unitsSharedCollection; track $index) {
              <option [ngValue]="unitOption">{{ unitOption.unitType?.name }} » {{ unitOption.name }}</option>
            }
          </select>
          } @else {
          <input type="text" class="form-control readonly" [readonly]="true" value="{{ unitConverter?.toUnit?.unitType?.name }} » {{unitConverter?.toUnit?.name}}"/>
          }

        </div>
        <div class="mb-3">
          <label class="form-label" for="field_name" jhiTranslate="resilientApp.unitConverter.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.unitConverter.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">
          <div>
          <label
            class="form-label"
            for="field_convertionFormula"
            [ngbTooltip]="'resilientApp.unitConverter.help.convertionFormula' | translate"
            jhiTranslate="resilientApp.unitConverter.convertionFormula"
          >Convertion Formula</label>
          
          {{ '' // Add fa-icon 'faCaretDown' to /app/config/font-awesome-icons.ts }}
          {{ '' // Add fa-icon 'faCaretUp' to /app/config/font-awesome-icons.ts }}
          <span
              class="help-formula-toggle" 
              (click)="isCollapsed = !isCollapsed"
            [attr.aria-expanded]="!isCollapsed"
            aria-controls="collapseSection"
            >help <fa-icon *ngIf="isCollapsed" icon="caret-down"></fa-icon><fa-icon *ngIf="!isCollapsed" icon="caret-up"></fa-icon></span>
          </div>
          <!-- Collapsible Section -->
          <div [ngbCollapse]="isCollapsed" id="collapseSection">
            <div class="card card-body">
              <h5>Formula helper</h5>
              <p>Formula fields provide a powerfull way of configuration and calculation. Use any of SpEL language anf funtions.</p>
              <p>In this context, the following functions are added:</p>
              <ul>
                <li>#value - the value to be converted</li>
                <li>#fromUnit - the Unit in wich the value is expressed</li>
                <li>#toUnit - the target Unit, that the value will be converted</li>
                <li>#variable - the current Variable instance</li>
                <li>#classCode - the class code selected, if any. (might be empty)</li>
              </ul>
            </div>
          </div>
          
          <code-mirror-field formControlName="convertionFormula"></code-mirror-field>

        </div>

<!-- HIDDEN Properties 
        @if (editForm.controls.id.value !== null) {
          <div class="mb-3">
            <label class="form-label" for="field_id" jhiTranslate="resilientApp.unitConverter.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.unitConverter.help.version' | translate"
            jhiTranslate="resilientApp.unitConverter.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>
