<div>
  <h2 id="page-heading" data-cy="OutputDataHeading">
    <span jhiTranslate="resilientApp.outputData.home.title">Output Data</span>

    <div class="d-flex justify-content-end">
      <button
        id="jh-export-entity"
        data-cy="entityExportButton"
        class="btn btn-primary jh-export-entity export-output-data spinner-container d-flex align-items-center justify-content-between"
        (click)="export()"
        [disabled]="isExporting"
      >
        <fa-icon icon="file-excel"></fa-icon>&nbsp;
        <span jhiTranslate="entity.action.export">Exportar</span>
        <mat-spinner *ngIf="isExporting" diameter="16" strokeWidth="2"></mat-spinner>
      </button>
    </div>
  </h2>

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

  <jhi-alert></jhi-alert>


  {{ ' ' // Search form }}
  <div class="container-fluid">
    <form id="searchForm" class="search-form mb-5" name="searchForm" novalidate (ngSubmit)="onSearch()" [formGroup]="searchForm">
      <div class="row justify-content-end">
        <!-- Period -->
        <div class="col" style="flex: 0 0 20%;">
          <div class="form-group">
            <label for="periodId" jhiTranslate="resilientApp.outputData.search.period.label">Period</label>
            <select
              class="form-control"
              id="field_periodId"
              data-cy="periodId"
              name="periodId"
              formControlName="periodId"
              [compareWith]="comparePeriod"
              title="{{'resilientApp.outputData.search.period.placeholder' | translate}}"
            >
              <option *ngFor="let periodOption of periodsSharedCollection; let i = index" 
                      [ngValue]="periodOption.id" 
                      [selected]="i === 0">
                {{ periodOption.name }}
              </option>
            </select>
          </div>
        </div>

        <!-- Period Version -->
        <div class="col" style="flex: 0 0 20%;">
          <div class="form-group">
            <label for="periodVersionId" jhiTranslate="resilientApp.outputData.search.periodVersion.label">Version</label>
            <select
              class="form-control"
              id="field_periodVersionId"
              data-cy="periodVersionId"
              name="periodVersionId"
              formControlName="periodVersionId"
              [compareWith]="comparePeriodVersion"
              title="{{'resilientApp.outputData.search.periodVersion.placeholder' | translate}}"
            >
              <option *ngFor="let periodVersionOption of periodVersionsSharedCollection; let i = index" 
                      [ngValue]="periodVersionOption.id" 
                      [selected]="i === 0">
                {{ periodVersionOption.name }}
              </option>
            </select>
          </div>
        </div>
        
        <!-- Scope -->
        <div class="col" style="flex: 0 0 20%;">
          <div class="form-group">
            <label for="variableScopeId" jhiTranslate="resilientApp.outputData.search.variableScope.label">Scope</label>
            <select
              class="form-control"
              id="field_variableScopeId"
              data-cy="variableScopeId"
              name="variableScopeId"
              formControlName="variableScopeId"
              [compareWith]="compareScope"
              title="{{'resilientApp.outputData.search.variableScope.placeholder' | translate}}"
            >
              <option [ngValue]="null" selected style="color: gray;" jhiTranslate="resilientApp.outputData.search.variableScope.placeholder">Filtrar por âmbito</option>
              @for (scopeOption of scopesSharedCollection; track $index) {
                <option [ngValue]="scopeOption.id">{{ scopeOption.name }}</option>
              }
            </select>
          </div>
        </div>
        
        <!-- Category -->
        <div class="col" style="flex: 0 0 20%;">
          <div class="form-group">
            <label for="variableCategoryId" jhiTranslate="resilientApp.outputData.search.variableCategory.label">Category</label>
            <select
              class="form-control"
              id="field_variableCategoryId"
              data-cy="variableCategoryId"
              name="variableCategoryId"
              formControlName="variableCategoryId"
              [compareWith]="compareCategory"
              title="{{'resilientApp.outputData.search.variableCategory.placeholder' | translate}}"
            >
              <option [ngValue]="null" selected style="color: gray;" jhiTranslate="resilientApp.outputData.search.variableCategory.placeholder">Filtrar por categoria</option>
              @for (categoryOption of categoriesSharedCollection; track $index) {
                <option [ngValue]="categoryOption.id">{{ categoryOption.name }}</option>
              }
            </select>
          </div>
        </div>
        
        <!-- Search Button -->
        <div class="col align-self-end" style="flex: 0 0 20%;">
          <div class="form-group">
            <button class="btn-refresh btn btn-info me-2 m-0" (click)="load()" [disabled]="isLoading || searchForm.invalid">
              <fa-icon icon="sync" [spin]="isLoading"></fa-icon>
              <span jhiTranslate="resilientApp.outputData.search.filter">Filtrar</span>
            </button>
          </div>
        </div>
      </div>
    </form>
  </div>


  @if (outputData || true) {
    <div class="table-responsive table-entities" id="entities">
    
    {{ ' ' // Wrap the all table in a form. This is the only way reactiveforms will work }}
	  <form id="searchForm" name="searchForm" novalidate (ngSubmit)="onSearch()" [formGroup]="searchForm">
    
      <table class="table table-striped" aria-describedby="page-heading">
        <thead>
          {{ ' ' // Header Row }}
          <tr jhiSort [sortState]="sortState" (sortChange)="navigateToWithComponentValues($event)">
            <th scope="col" colspan="2" jhiSortBy="variable.name">
              <div class="d-flex">
                <span jhiTranslate="resilientApp.outputData.variable">Variable</span>
                <fa-icon class="p-1" icon="sort"></fa-icon>
              </div>
            </th>
            <th scope="col" jhiSortBy="value">
              <div class="d-flex">
                <span jhiTranslate="resilientApp.outputData.value">Value</span>

                <fa-icon class="p-1" icon="sort"></fa-icon>
              </div>
            </th>
            <th scope="col" jhiSortBy="baseUnit.name">
              <div class="d-flex">
                <span jhiTranslate="resilientApp.outputData.baseUnit">Base Unit</span>
                <fa-icon class="p-1" icon="sort"></fa-icon>
              </div>
            </th>
            <th scope="col"></th>
          </tr>

          {{ ' ' // Search Fields Row }}
          <tr class="search">
            <th colspan="2">
              <input type="text" class="form-control" name="variableNameOrCode" id="field_variableNameOrCode" data-cy="variableNameOrCode" formControlName="variableNameOrCode" [placeholder]="'resilientApp.outputData.search.variable.placeholder' | translate" title="{{'resilientApp.outputData.search.variable.placeholder' | translate}}"/>
            </th>
            <th></th>
            <th></th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          @for (outputData of outputData; track trackId) {
            <tr data-cy="entityTable">
              <td>
                @if (outputData.variable) {
                  <div>
                    <a [routerLink]="['/variable', outputData.variable.id, 'view']">{{ outputData.variable.code }}</a>
                  </div>
                }
              </td>
              <td>
                @if (outputData.variable) {
                  <div>
                    <span>{{ outputData.variable.name }}</span>
                  </div>
                }
              </td>
              <td class="text-end">{{ outputData.value }}</td>
              <td>
                @if (outputData.baseUnit) {
                  <div>
                    <span>{{ outputData.baseUnit.symbol }}</span>
                  </div>
                }
              </td>
              <td class="text-end">
                <div class="btn-group">
                  <a [routerLink]="['/output-data', outputData.id, 'view']" class="btn btn-info btn-sm" data-cy="entityDetailsButton">
                    <fa-icon icon="eye"></fa-icon>
                    <span class="d-none d-md-inline" jhiTranslate="entity.action.view">Visualizar</span>
                  </a>
                </div>
              </td>
            </tr>
          }
        </tbody>
      </table>

    </form>
    </div>
  }
  
  <div class="loading-warning" [hidden]="!isLoading">Loading ...</div>
  @if (outputData?.length === 0) {
    <div class="alert alert-warning" id="no-result">
      <span jhiTranslate="resilientApp.outputData.home.notFound">Nenhum Output Data encontrado</span>
    </div>
  }
</div>
