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

      <div>
        <jhi-alert-error></jhi-alert-error>
        <div class="mb-3">
          <label class="form-label" for="field_variableScope" jhiTranslate="resilientApp.variable.variableScope">Variable Scope</label>
          @if (true || editForm.controls.id.value == null) {
          <select
            class="form-control"
            id="field_variableScope"
            data-cy="variableScope"
            name="variableScope"
            formControlName="variableScope"
            [compareWith]="compareVariableScope"
          >
            <option [ngValue]="null"></option>
            @for (variableScopeOption of variableScopesSharedCollection; track $index) {
              <option [ngValue]="variableScopeOption">{{ variableScopeOption.name }}</option>
            }
          </select>
          } @else {
          <input type="text" class="form-control readonly" name="variableScope" id="field_variableScope" [readonly]="true" value="{{variable?.variableScope?.name}}"/>
          }

        </div>
        <div class="mb-3">
          <label class="form-label" for="field_variableCategory" jhiTranslate="resilientApp.variable.variableCategory"
            >Variable Category</label
          >
          @if (true || editForm.controls.id.value == null) {
          <select
            class="form-control"
            id="field_variableCategory"
            data-cy="variableCategory"
            name="variableCategory"
            formControlName="variableCategory"
            [compareWith]="compareVariableCategory"
          >
            <option [ngValue]="null"></option>
            @for (variableCategoryOption of variableCategoriesSharedCollection; track $index) {
              <option [ngValue]="variableCategoryOption">{{ variableCategoryOption.name }}</option>
            }
          </select>
          } @else {
          <input type="text" class="form-control readonly" name="variableCategory" [readonly]="true" value="{{variable?.variableCategory?.name}}"/>
          }

        </div>
        <div class="mb-3">
          <label
            class="form-label"
            for="field_code"
            [ngbTooltip]="'resilientApp.variable.help.code' | translate"
            jhiTranslate="resilientApp.variable.code"
            >Code</label
          >
          @if (editForm.controls.id.value == null) {
          <input type="text" class="form-control" name="code" id="field_code" data-cy="code" formControlName="code" />
          } @else {
          <input type="text" class="form-control readonly" name="code" id="field_code" data-cy="code" formControlName="code"  [readonly]="true" />
          }

          @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?.pattern) {
                <small class="form-text text-danger" jhiTranslate="entity.validation.pattern" [translateValues]="{ pattern: 'Code' }"
                  >Este campo deve estar dentro do seguinte padrão Code.</small
                >
              }
            </div>
          }
        </div>
        <div class="mb-3">
          <label
            class="form-label"
            for="field_name"
            [ngbTooltip]="'resilientApp.variable.help.name' | translate"
            jhiTranslate="resilientApp.variable.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_baseUnit" jhiTranslate="resilientApp.variable.baseUnit">Base Unit</label>
          <select
            class="form-control"
            id="field_baseUnit"
            data-cy="baseUnit"
            name="baseUnit"
            formControlName="baseUnit"
            [compareWith]="compareUnit" 
          >
            <option [ngValue]="null"></option>
            @for (unitOption of unitsSharedCollection; track $index) {
              <option [ngValue]="unitOption">{{ unitOption.unitType?.name }} » {{ unitOption.name }}</option>
            }
          </select>
        </div>
        <div class="mb-3">
          <label
            class="form-label"
            for="field_description"
            [ngbTooltip]="'resilientApp.variable.help.description' | translate"
            jhiTranslate="resilientApp.variable.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_valueScale"
            [ngbTooltip]="'resilientApp.variable.help.valueScale' | translate"
            jhiTranslate="resilientApp.variable.valueScale"
            >Value Scale</label
          >
          <input type="number" class="form-control" name="valueScale" id="field_valueScale" data-cy="valueScale" formControlName="valueScale" />
        </div>
        
		<!-- Tabs navs -->
		<ul class="nav nav-tabs mb-3"role="tablist">
		  <li class="nav-item" role="presentation">
			<a
			  class="nav-link"
			  [class.active]="currentTab === 'input'"
			  (click)="setTab('input')"
			  >Input</a
			>
		  </li>
		  <li class="nav-item" role="presentation">
			<a
			  class="nav-link"
			  [class.active]="currentTab === 'output'"
			  (click)="setTab('output')"
			  >Output</a
			>
		  </li>
		  <li class="nav-item" role="presentation">
			<a
			  class="nav-link"
			  [class.active]="currentTab === 'class'"
			  (click)="setTab('class')"
        jhiTranslate="resilientApp.variable.tabClasses.title"
			  >Classe</a
			>
		  </li>
		  <li class="nav-item" role="presentation">
			<a
			  class="nav-link"
			  [class.active]="currentTab === 'units'"
			  (click)="setTab('units')"
        jhiTranslate="resilientApp.variable.tabOtherUnits.title"
			  >Other Units</a
			>
		  </li>
		</ul>
		<!-- Tabs navs -->

		<!-- Tabs content -->
		<div class="tab-content">
		  <div
			class="tab-pane fade"
			[class.active]="currentTab === 'input'"
			[class.show]="currentTab === 'input'"
		  >
		  <div class="mb-3">
			  <div class="form-check form-switch">
          <input type="checkbox" class="form-check-input" name="input" id="field_input" data-cy="input" formControlName="input" />
          @if (editForm.get('input')!.invalid && (editForm.get('input')!.dirty || editForm.get('input')!.touched)) {
            <div>
            @if (editForm.get('input')?.errors?.required) {
            <small class="form-text text-danger" jhiTranslate="entity.validation.required">O campo é obrigatório.</small>
            }
            </div>
          }

          <label
            class="form-label"
            for="field_input"
            [ngbTooltip]="'resilientApp.variable.help.input' | translate"
            jhiTranslate="resilientApp.variable.input"
            >Input</label>
			  </div>
			</div>

      <div class="mb-3">
        <div class="form-check form-switch">
          <input type="checkbox" class="form-check-hiddenForMain" name="hiddenForMain" id="field_hiddenForMain" data-cy="hiddenForMain" formControlName="hiddenForMain" />
          @if (editForm.get('hiddenForMain')!.invalid && (editForm.get('hiddenForMain')!.dirty || editForm.get('hiddenForMain')!.touched)) {
            <div>
            @if (editForm.get('hiddenForMain')?.errors?.required) {
            <small class="form-text text-danger" jhiTranslate="entity.validation.required">O campo é obrigatório.</small>
            }
            </div>
          }

          <label
            class="form-label"
            for="field_hiddenForMain"
            [ngbTooltip]="'resilientApp.variable.help.hiddenForMain' | translate"
            jhiTranslate="resilientApp.variable.hiddenForMain"
            >Hidden for main</label>
        </div>
      </div>

			<div class="mb-3">
			  <label
				class="form-label"
				for="field_inputMode"
				[ngbTooltip]="'resilientApp.variable.help.inputMode' | translate"
				jhiTranslate="resilientApp.variable.inputMode"
				>Input Mode</label
			  >
			  <select class="form-control" name="inputMode" formControlName="inputMode" id="field_inputMode" data-cy="inputMode">
          <option [ngValue]="null">{{ 'resilientApp.InputMode.null' | translate }}</option>
          @for (inputMode of inputModeValues; track $index) {
            <option [value]="inputMode">{{ 'resilientApp.InputMode.' + inputMode | translate }}</option>
          }
			  </select>
			  @if (editForm.get('inputMode')!.invalid && (editForm.get('inputMode')!.dirty || editForm.get('inputMode')!.touched)) {
				<div>
				  @if (editForm.get('inputMode')?.errors?.required) {
					<small class="form-text text-danger" jhiTranslate="entity.validation.required">O campo é obrigatório.</small>
				  }
				</div>
			  }
			</div>
		  </div>
		
		  <div
			class="tab-pane fade"
			[class.active]="currentTab === 'output'"
			[class.show]="currentTab === 'output'"
		  >
		    <div class="mb-3">
			  <div class="form-check form-switch">
				<input type="checkbox" class="form-check-input" name="output" id="field_output" data-cy="output" formControlName="output" />
				@if (editForm.get('output')!.invalid && (editForm.get('output')!.dirty || editForm.get('output')!.touched)) {
				  <div>
				  @if (editForm.get('output')?.errors?.required) {
					<small class="form-text text-danger" jhiTranslate="entity.validation.required">O campo é obrigatório.</small>
				  }
				  </div>
				}

				<label
					class="col-sm-2 form-label"
					for="field_output"
					[ngbTooltip]="'resilientApp.variable.help.output' | translate"
					jhiTranslate="resilientApp.variable.output"
					>Output</label>
			  </div>
			</div>
			
		    <div class="mb-3">
				<div class="form-check form-switch">
				  <input type="checkbox" class="form-check-input" name="outputSingle" id="field_outputSingle" data-cy="outputSingle" formControlName="outputSingle" />  
				  <label
					  class="col-sm-2 form-label"
					  for="field_outputSingle"
					  [ngbTooltip]="'resilientApp.variable.help.outputSingle' | translate"
					  jhiTranslate="resilientApp.variable.outputSingle"
					  >Output Single</label>
				</div>
			</div>

			<div class="mb-3">
				<label class="form-label" for="field_outputOwner" jhiTranslate="resilientApp.variable.outputOwner">Output Owner</label>
				<select
				  class="form-control"
				  id="field_outputOwner"
				  data-cy="outputOwner"
				  name="outputOwner"
				  formControlName="outputOwner"
				  [compareWith]="compareOrganization"
				>
				  <option [ngValue]="null"></option>
				  @for (organizationOption of organizationsSharedCollection; track $index) {
					<option [ngValue]="organizationOption">{{ organizationOption.name }}</option>
				  }
				</select>
			</div>

			<div class="mb-3">
			  <div>
			    <label
				  class="form-label"
				  for="field_outputFormula"
				  [ngbTooltip]="'resilientApp.variable.help.outputFormula' | translate"
				  jhiTranslate="resilientApp.variable.outputFormula"
				  >Output 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"
            >{{ 'resilientApp.variable.outputFormulaHelp' | translate : { default: '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 and funtions.</p>
            <p>In this context, the following variables are added:</p>
            <ul>
              <li>variable - the Variable</li>
              <li>period - the Period</li>
              <li>periodVersion - the Period Version</li>
              <li>owner - the Owner of the information, this is an Organization level</li>
            </ul>
            <p>In this context, the following functions are added:</p>
            <ul>
              <li>fe(EmissionFactorCode) - Searches for the emission factor by its code, and the closest to the Year of the current Period (&lt;=Period.Year).</li>
              <li>fe(EmissionFactorCode, Year) - Searches for the emission factor by its code, and the closest to the given Year (&lt;=Year).</li>
              <li>in(VariableCode) - Searches for inputs for this variable code, without class restriction. Restricted by the current Period.</li>
              <li>in(VariableCode, ClassCode) - Searches for inputs for this variable code, restricted by class. Restricted by the current Period.</li>
			  <li>in(VariableCode, ClassCode, OwnerCode) - Searches for inputs for this variable code, restricted by class and Owner code. Restricted by the current Period.</li>
			  <li>NOTE: the ClassCode can be filled with the value "*ALL", this will ignore the class code restriction. Usefull when using the function: in(VariableCode, ClassCode, OwnerCode), to get all values for a OwnerCode without Class restriction.</li>
              <li>out(VariableCode) - Searches for calculated outputs for this variable code. Restricted by the current Owner and Period Version.</li>
			  <li>out(VariableCode, OwnerCode) - Searches for calculated outputs for this variable code, for the given Owner Code. Restricted by the current Period Version.</li>
              <li>outByUnit(UnitCode) - Searches for calculated outputs for this unit code. Restricted by the current Owner and Period Version.</li>
			  <li>outByUnit(UnitCode, OwnerCode) - Searches for calculated outputs for this unit code, for the given Owner Code. Restricted by the current Period Version.</li>
            </ul>
          </div>
			  </div>
			  
        <code-mirror-field formControlName="outputFormula"></code-mirror-field>
			  <!--
        <textarea
				class="form-control"
				name="outputFormula"
				id="field_outputFormula"
				data-cy="outputFormula"
				formControlName="outputFormula"
			  ></textarea>
        -->
			</div>
		  </div>
		  
		  <div
			class="tab-pane fade"
			[class.active]="currentTab === 'class'"
			[class.show]="currentTab === 'class'"
		  >
		    <div class="mb-3">
			  <label class="form-label" for="field_variableClassType" jhiTranslate="resilientApp.variable.variableClassType">Variable Class Type</label>
			  <select
				class="form-control"
				id="field_variableClassType"
				data-cy="variableClassType"
				name="variableClassType"
				formControlName="variableClassType"
				[compareWith]="compareVariableClassType" 
			  >
				<option [ngValue]="null"></option>
				@for (variableClassTypeOption of variableClassTypesSharedCollection; track $index) {
				  <option [ngValue]="variableClassTypeOption">{{ variableClassTypeOption.name }}</option>
				}
			  </select>
			</div>

			<div class="mb-3">
			  <label
				class="form-label"
				for="field_variableClassLabel"
				[ngbTooltip]="'resilientApp.variable.help.variableClassLabel' | translate"
				jhiTranslate="resilientApp.variable.variableClassLabel"
				>Variable Class Label</label
			  >
			  <input
				type="text"
				class="form-control"
				name="variableClassLabel"
				id="field_variableClassLabel"
				data-cy="variableClassLabel"
				formControlName="variableClassLabel"
			  />
			  @if (editForm.get('variableClassLabel')!.invalid && (editForm.get('variableClassLabel')!.dirty || editForm.get('variableClassLabel')!.touched)) {
				<div>
				  @if (editForm.get('variableClassLabel')?.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_variableClassMandatory"
				[ngbTooltip]="'resilientApp.variable.help.variableClassMandatory' | translate"
				jhiTranslate="resilientApp.variable.variableClassMandatory"
				>Variable Class Mandatory</label
			  >
			  <input 
				type="checkbox" 
				class="form-check" 
				name="variableClassMandatory" 
				id="field_variableClassMandatory" 
				data-cy="variableClassMandatory" 
				formControlName="variableClassMandatory" 
			  />
			  @if (editForm.get('variableClassMandatory')!.invalid && (editForm.get('variableClassMandatory')!.dirty || editForm.get('variableClassMandatory')!.touched)) {
				<div>
				  @if (editForm.get('variableClassMandatory')?.errors?.required) {
					<small class="form-text text-danger" jhiTranslate="entity.validation.required">O campo é obrigatório.</small>
				  }
				</div>
			  }
			</div>
		  </div>
		  
		  <div
			class="tab-pane fade"
			[class.active]="currentTab === 'units'"
			[class.show]="currentTab === 'units'"
		  >
			<button 
				class="btn btn-primary" 
				type="button" 
				(click)="addVariableUnit(null)" 
				[disabled]="editForm.get('baseUnit')?.value==null"
        jhiTranslate="resilientApp.variable.tabOtherUnits.add"
			>Add Unit</button>
			
			<table class="table" formArrayName="variableUnits">
			  <thead class="thead bg-info">
				<tr>
				  <th scope="col"></th>
				  <th scope="col" jhiTranslate="resilientApp.variable.tabOtherUnits.unit">Unit</th>
				  <th scope="col" jhiTranslate="resilientApp.variable.tabOtherUnits.converter">Converter</th>
				  <th scope="col"></th>
				</tr>
			  </thead>
			  <tbody>
				<tr *ngFor="let variableUnit of variableUnits.controls; let i=index" [formGroupName]="i">
				  <td>{{i+1}}</td>
				  <td>
					  <select
						class="form-control"
						formControlName="unit"
						[compareWith]="compareUnit"
					  >
						<option [ngValue]="null"></option>
						@for (unitOption of unitsSharedCollection; track $index) {
						  <option [ngValue]="unitOption">{{ unitOption.unitType?.name }} » {{ unitOption.name }}</option>
						}
					  </select>
				  </td>
				  <td>
				  	  <select
						class="form-control"
						formControlName="unitConverter"
						[compareWith]="compareUnitConverter"
					  >
						<option [ngValue]="null"></option>
						@for (unitConverterOption of variableUnit.get('unitConverterOptions')?.value; track $index) {
						  <option [ngValue]="unitConverterOption">{{ unitConverterOption?.name }}</option>
						}					  
					  </select>
				  </td>
				  <td>
				    <button type="button" (click)="removeVariableUnit(i)" class="btn btn-danger btn-sm">
					  <fa-icon icon="times"></fa-icon>
					</button>
				  </td>
				</tr>
			  </tbody>
			</table>
		  </div>
		</div>
		<!-- Tabs content -->
		
      </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>
