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

    <div class="d-flex justify-content-end">
      <button class="btn btn-info me-2" (click)="load()" [disabled]="isLoading">
        <fa-icon icon="sync" [spin]="isLoading"></fa-icon>
        <span jhiTranslate="resilientApp.emissionFactor.home.refreshListLabel">Refresh list</span>
      </button>

      <button
        id="jh-create-entity"
        data-cy="entityCreateButton"
        class="btn btn-primary jh-create-entity create-emission-factor"
        [routerLink]="['/emission-factor/new']"
      >
        <fa-icon icon="plus"></fa-icon>
        <span jhiTranslate="resilientApp.emissionFactor.home.createLabel">Criar novo(a) Emission Factor</span>
      </button>
    </div>
  </h2>

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

  <jhi-alert></jhi-alert>

  @if (emissionFactors && emissionFactors.length >= 0) {
  <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" jhiSortBy="year">
              <div class="d-flex">
                <span jhiTranslate="resilientApp.emissionFactor.year">Year</span>

                <fa-icon class="p-1" icon="sort"></fa-icon>
              </div>
            </th>
            <th scope="col" jhiSortBy="variableScope.name">
              <div class="d-flex">
                <span jhiTranslate="resilientApp.emissionFactor.variableScope">Variable Scope</span>
                <fa-icon class="p-1" icon="sort"></fa-icon>
              </div>
            </th>
            <th scope="col" jhiSortBy="variableCategory.name">
              <div class="d-flex">
                <span jhiTranslate="resilientApp.emissionFactor.variableCategory">Variable Category</span>
                <fa-icon class="p-1" icon="sort"></fa-icon>
              </div>
            </th>
            <th scope="col" jhiSortBy="code">
              <div class="d-flex">
                <span jhiTranslate="resilientApp.emissionFactor.code">Code</span>

                <fa-icon class="p-1" icon="sort"></fa-icon>
              </div>
            </th>
            <th scope="col" jhiSortBy="name">
              <div class="d-flex">
                <span jhiTranslate="resilientApp.emissionFactor.name">Name</span>

                <fa-icon class="p-1" icon="sort"></fa-icon>
              </div>
            </th>
            <th scope="col" jhiSortBy="unit">
              <div class="d-flex">
                <span jhiTranslate="resilientApp.emissionFactor.unit">Unit</span>

                <fa-icon class="p-1" icon="sort"></fa-icon>
              </div>
            </th>
            <th scope="col" jhiSortBy="value">
              <div class="d-flex">
                <span jhiTranslate="resilientApp.emissionFactor.value">Value</span>

                <fa-icon class="p-1" icon="sort"></fa-icon>
              </div>
            </th>

            <th scope="col"></th>
          </tr>
          
          {{ ' ' // Search row }}
          <tr>
            <th>
              <input type="text" class="form-control" name="year" id="field_year" data-cy="year" formControlName="year" [placeholder]="'resilientApp.emissionFactor.search.year' | translate" title="{{ 'resilientApp.emissionFactor.search.year' | translate }}" />
            </th>
            <th>
              <select
                class="form-control"
                id="field_variableScopeId"
                data-cy="variableScopeId"
                name="variableScopeId"
                formControlName="variableScopeId"
                [compareWith]="compareVariableScope"
                title="{{ 'resilientApp.emissionFactor.search.variableScope' | translate }}"
              >
                <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>
            </th>
            <th>
              <select
                class="form-control"
                id="field_variableCategoryId"
                data-cy="variableCategoryId"
                name="variableCategoryId"
                formControlName="variableCategoryId"
                [compareWith]="compareVariableCategory"
                title="{{ 'resilientApp.emissionFactor.search.variableCategory' | translate }}"
              >
                <option [ngValue]="null" selected style="color: gray;" jhiTranslate="resilientApp.emissionFactor.search.variableCategory">Filter by Category</option>
                @for (variableCategoryOption of variableCategoriesSharedCollection; track $index) {
                  <option [ngValue]="variableCategoryOption.id">{{ variableCategoryOption.name }}</option>
                }
              </select>
            </th>
            <th>
              <input type="text" class="form-control" name="code" id="field_code" data-cy="code" formControlName="code" [placeholder]="'resilientApp.emissionFactor.search.code' | translate" title="{{ 'resilientApp.emissionFactor.search.code' | translate }}" />
            </th>
            <th>
              <input type="text" class="form-control" name="name" id="field_name" data-cy="name" formControlName="name" [placeholder]="'resilientApp.emissionFactor.search.name' | translate" title="{{ 'resilientApp.emissionFactor.search.name' | translate }}" />
            </th>

            <th>
              <input type="text" class="form-control" name="unit" id="field_unit" data-cy="unit" formControlName="unit" [placeholder]="'resilientApp.emissionFactor.search.unit' | translate" title="{{ 'resilientApp.emissionFactor.search.unit' | translate }}" />
            </th>
            <th></th>
            <th> 
              <button class="btn btn-info me-2 w-100" type="submit" form="searchForm" jhiTranslate="entity.action.filter">Filter</button> 
            </th>
          </tr>
        </thead>
        <tbody>
          @for (emissionFactor of emissionFactors; track trackId) {
            <tr data-cy="entityTable">

              <td>{{ emissionFactor.year }}</td>
              <td>
                @if (emissionFactor.variableScope) {
                  <div>
                    <a [routerLink]="['/variable-scope', emissionFactor.variableScope.id, 'view']">{{
                      emissionFactor.variableScope.name
                    }}</a>
                  </div>
                }
              </td>
              <td>
                @if (emissionFactor.variableCategory) {
                  <div>
                    <a [routerLink]="['/variable-category', emissionFactor.variableCategory.id, 'view']">{{
                      emissionFactor.variableCategory.name
                    }}</a>
                  </div>
                }
              </td>
              <td>{{ emissionFactor.code }}</td>
              <td>{{ emissionFactor.name }}</td>
              <td>{{ emissionFactor.unit }}</td>
              <td>{{ emissionFactor.value }}</td>
  <!--
              <td>{{ emissionFactor.source }}</td>
              <td>{{ emissionFactor.comments }}</td>
  -->
              <td class="text-end">
                <div class="btn-group">
                  <a
                    [routerLink]="['/emission-factor', emissionFactor.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>

                  <a
                    [routerLink]="['/emission-factor', emissionFactor.id, 'edit']"
                    class="btn btn-primary btn-sm"
                    data-cy="entityEditButton"
                  >
                    <fa-icon icon="pencil-alt"></fa-icon>
                    <span class="d-none d-md-inline" jhiTranslate="entity.action.edit">Editar</span>
                  </a>

                  <button type="submit" (click)="delete(emissionFactor)" class="btn btn-danger btn-sm" data-cy="entityDeleteButton">
                    <fa-icon icon="times"></fa-icon>
                    <span class="d-none d-md-inline" jhiTranslate="entity.action.delete">Eliminar</span>
                  </button>
                </div>
              </td>
            </tr>
          }
        </tbody>
      </table>
    
    </form>
  </div>
  }
  
  @if (emissionFactors?.length === 0) {
  <div class="alert alert-warning" id="no-result">
    <span jhiTranslate="resilientApp.emissionFactor.home.notFound">Nenhum Emission Factors encontrado</span>
  </div>
  }  
</div>
