<!-- GUIPropertiesViewAndSortCustomizer -->
<div class="d-flex justify-content-center">
  <div class="col-8">
    @if (variable()) {
      <div>
        <h2 data-cy="variableDetailsHeading"><span jhiTranslate="resilientApp.variable.detail.title">Variable</span></h2>

        <hr />

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

        <jhi-alert></jhi-alert>

        <dl class="row-md jh-entity-details">
          <dt><span jhiTranslate="resilientApp.variable.variableScope">Variable Scope</span></dt>
          <dd>
            @if (variable()!.variableScope) {
              <div>
                <a [routerLink]="['/variable-scope', variable()!.variableScope?.id, 'view']">{{ variable()!.variableScope?.name }}</a>
              </div>
            }
          </dd>
          <dt><span jhiTranslate="resilientApp.variable.variableCategory">Variable Category</span></dt>
          <dd>
            @if (variable()!.variableCategory) {
              <div>
                <a [routerLink]="['/variable-category', variable()!.variableCategory?.id, 'view']">{{
                  variable()!.variableCategory?.name
                }}</a>
              </div>
            }
          </dd>
          <dt><span [ngbTooltip]="'resilientApp.variable.help.code' | translate" jhiTranslate="resilientApp.variable.code">Code</span></dt>
          <dd>
            <span>{{ variable()!.code }}</span>
          </dd>
          <dt><span [ngbTooltip]="'resilientApp.variable.help.name' | translate" jhiTranslate="resilientApp.variable.name">Name</span></dt>
          <dd>
            <span>{{ variable()!.name }}</span>
          </dd>
          <dt><span jhiTranslate="resilientApp.variable.baseUnit">Base Unit</span></dt>
          <dd>
            @if (variable()!.baseUnit) {
              <div>
                <a [routerLink]="['/unit', variable()!.baseUnit?.id, 'view']">{{ variable()!.baseUnit?.name }}</a>
              </div>
            }
          </dd>
          <dt>
            <span [ngbTooltip]="'resilientApp.variable.help.description' | translate" jhiTranslate="resilientApp.variable.description"
              >Description</span
            >
          </dt>
          <dd>
            <span>{{ variable()!.description }}</span>
          </dd>
          <dt>
            <span [ngbTooltip]="'resilientApp.variable.help.valueScale' | translate" jhiTranslate="resilientApp.variable.valueScale"
              >Value Scale</span
            >
          </dt>
          <dd>
            <span>{{ variable()!.valueScale }}</span>
          </dd>
        </dl>

        <!-- 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')"
              jhiTranslate="resilientApp.variable.tabInput.title"
              >Input</a
            >
          </li>
          <li class="nav-item" role="presentation">
            <a
              class="nav-link"
              [class.active]="currentTab === 'output'"
              (click)="setTab('output')"
              jhiTranslate="resilientApp.variable.tabOutput.title"
              >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"
              >Class</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'"
          >
            <dl class="row-md jh-entity-details">
              <dt><span jhiTranslate="resilientApp.variable.input">Input</span></dt>
              <dd>{{ variable()!.input }}</dd>
              
              <dt><span jhiTranslate="resilientApp.variable.hiddenForMain">Hidden for main ?</span></dt>
              <dd>{{ variable()!.hiddenForMain }}</dd>
              
              <dt><span jhiTranslate="resilientApp.variable.inputMode">Input Mode</span></dt>
              <dd>{{ variable()!.inputMode }}</dd>
            </dl>
          </div>
        
          <div
            class="tab-pane fade"
            [class.active]="currentTab === 'output'"
            [class.show]="currentTab === 'output'"
          >
            <dl class="row-md jh-entity-details">
              <dt><span jhiTranslate="resilientApp.variable.output">Output</span></dt>
              <dd>{{ variable()!.output }}</dd>
              
              <dt><span jhiTranslate="resilientApp.variable.outputFormula">Output Formula</span></dt>
              <dd>{{ variable()!.outputFormula }}</dd>
            </dl>
          </div>
          
          <div
            class="tab-pane fade"
            [class.active]="currentTab === 'class'"
            [class.show]="currentTab === 'class'"
          >
            <dl class="row-md jh-entity-details">
              <dt><span jhiTranslate="resilientApp.variable.variableClassType">Class Type</span></dt>
              <dd>{{ variable()!.variableClassType?.name }}</dd>
              
              <dt><span jhiTranslate="resilientApp.variable.variableClassLabel">Class Label</span></dt>
              <dd>{{ variable()!.variableClassLabel }}</dd>
              
              <dt><span jhiTranslate="resilientApp.variable.variableClassMandatory">Mandatory ?</span></dt>
              <dd>{{ variable()!.variableClassMandatory }}</dd>
            </dl>
          </div>
          
          <div
            class="tab-pane fade"
            [class.active]="currentTab === 'units'"
            [class.show]="currentTab === 'units'"
          >
            <table class="table">
              <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>
                </tr>
              </thead>
              <tbody>
                <tr *ngFor="let variableUnit of variable()!.variableUnits; let i=index">
                  <td>{{i+1}}</td>
                  <td>
                    {{ variableUnit.unit?.name }}
                  </td>
                  <td>
                    {{ variableUnit.unitConverter?.name }}
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        <!-- Tabs content -->

        <button type="submit" (click)="previousState()" class="btn btn-info" data-cy="entityDetailsBackButton">
          <fa-icon icon="arrow-left"></fa-icon>&nbsp;<span jhiTranslate="entity.action.back">Voltar</span>
        </button>

        <button type="button" [routerLink]="['/variable', variable()!.id, 'edit']" class="btn btn-primary">
          <fa-icon icon="pencil-alt"></fa-icon>&nbsp;<span jhiTranslate="entity.action.edit">Editar</span>
        </button>
      </div>
    }
  </div>
</div>
