<div>
  <h2 id="page-heading" data-cy="InventoryHeading">
    <span jhiTranslate="resilientApp.emissionFactor.home.title">Emission Factors</span>

    <div class="d-flex justify-content-end">
      <button
        id="jh-export-entity"
        data-cy="entityExportButton"
        class="btn btn-primary jh-export-entity export-emission-factor spinner-container d-flex align-items-center justify-content-between"
        (click)="export()"
        [disabled]="isExporting || isLoading || searchForm.invalid"
      >
        <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">
    <div class="row g-3">
      <form id="searchForm" class="search-form" name="searchForm" novalidate (ngSubmit)="onSearch()" [formGroup]="searchForm">
        <!-- Year -->
        <div class="col-md-3 form-group">
          <label for="year" jhiTranslate="resilientApp.emissionFactor.year">Year</label>
          <select
            class="form-control"
            id="field_year"
            data-cy="year"
            name="year"
            formControlName="year"
          >
            <option *ngFor="let yearOption of periodYears; let i = index" 
                    [ngValue]="yearOption" >
              {{ yearOption }}
            </option>
          </select>
        </div>

        <!-- Scope -->
        <div class="col-md-3 form-group">
          <label for="variableCategoryId" jhiTranslate="resilientApp.emissionFactor.variableScope">Scope</label>
          <select
            class="form-control"
            id="field_variableScopeId"
            data-cy="variableScopeId"
            name="variableScopeId"
            formControlName="variableScopeId"
            [compareWith]="compareVariableScope"
          >
            <option [ngValue]="null" selected style="color: gray;" jhiTranslate="resilientApp.emissionFactor.search.variableScope">Filter by scope</option>
            @for (variableScopeOption of variableScopesSharedCollection; track $index) {
              <option [ngValue]="variableScopeOption.id">{{ variableScopeOption.name }}</option>
            }
          </select>
        </div>
        
        <!-- Category -->
        <div class="col-md-3 form-group">
          <label for="variableCategoryId" jhiTranslate="resilientApp.emissionFactor.variableCategory">Category</label>
          <select
            class="form-control"
            id="field_variableCategoryId"
            data-cy="variableCategoryId"
            name="variableCategoryId"
            formControlName="variableCategoryId"
            [compareWith]="compareCategory"
          >
            <option [ngValue]="null" selected style="color: gray;" jhiTranslate="resilientApp.emissionFactor.search.variableCategory">Filter by category</option>
            @for (categoryOption of categoriesSharedCollection; track $index) {
              <option [ngValue]="categoryOption.id">{{ categoryOption.name }}</option>
            }
          </select>
        </div>
        
        <!-- Search Button -->
        <div class="col-md-3 form-group">
          <button class="btn-refresh btn btn-info me-2" (click)="load()" [disabled]="isLoading || searchForm.invalid">
            <fa-icon icon="sync" [spin]="isLoading"></fa-icon>
            <span jhiTranslate="entity.action.filter">Filtrar</span>
          </button>
        </div>
      </form>
    </div>
  </div>

  @if (emissionFactors) {
    <div class="table-responsive table-entities" id="entities">
      <table class="table table-striped" aria-describedby="page-heading">
        <thead>
          <tr>
            <th scope="col">
              <div class="d-flex">
                <span jhiTranslate="resilientApp.emissionFactor.variableCategory">Category</span>
              </div>
            </th>
            <th scope="col">
              <div class="d-flex">
                <span jhiTranslate="resilientApp.emissionFactor.name">Name</span>
              </div>
            </th>
            <th scope="col">
              <div class="d-flex">
                <span class="ms-auto" jhiTranslate="resilientApp.emissionFactor.value">Valor</span>
                &nbsp;&nbsp;
                <fa-icon icon="circle-question" [ngbPopover]="'Em cada Fator de Emissão, manter o cursor sobre Valor para conhecer a respetiva fonte de informação.'" ></fa-icon>
              </div>
            </th>
            <th scope="col">
              <div class="d-flex">
                <span jhiTranslate="resilientApp.emissionFactor.unit">Unidade</span>
              </div>
            </th>
            <th scope="col"></th>
          </tr>
        </thead>
        <tbody>
          @for (emissionFactor of emissionFactors; track trackId) {
            <tr data-cy="entityTable">
              <td>
                @if (emissionFactor.variableCategory) {
                    <span>{{ emissionFactor.variableCategory.name }}</span>
                }
              </td>
              <td>
                @if (emissionFactor.name) {
                    <span>{{ emissionFactor.name }}</span>
                }
              </td>
              <td class="text-end">
                @if (emissionFactor.value) {
                    <span title="{{ emissionFactor.source }}">{{ emissionFactor.value }}</span>
                }
              </td>
              <td>
                @if (emissionFactor.unit) {
                    <span>{{ emissionFactor.unit }}</span>
                }
              </td>
            </tr>
          }
        </tbody>
      </table>
    </div>
  }
  
  @if (emissionFactors?.length === 0) {
    <div class="alert alert-warning" id="no-result">
      <span jhiTranslate="resilientApp.emissionFactor.home.notFound">Nenhum Fator de Emissão encontrado</span>
    </div>
  }
</div>
