<div>
  <h2 id="page-heading" data-cy="InputDataHeading">
    <span jhiTranslate="resilientApp.inputData.home.title">Input Data</span>

    <div class="d-flex justify-content-end">
      <button
        id="jh-create-entity"
        data-cy="entityCreateButton"
        class="btn btn-primary jh-create-entity create-input-data"

        *ngIf="hasCreatePermission(Resources.INPUT_DATA)"
        [routerLink]="!canCreate() ? null : ['/input-data/new']"
        [class.disabled]="!canCreate()"
        [disabled]="!canCreate()"
      >
        <fa-icon icon="plus"></fa-icon>
        <span jhiTranslate="resilientApp.inputData.home.createLabel">Criar novo(a) Input Data</span>
      </button>


      <button
        id="jh-export-entity"
        data-cy="entityExportButton"
        class="btn btn-primary jh-export-entity export-input-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 25%;">
            <div class="form-group">
              <label for="periodId" jhiTranslate="resilientApp.inputData.search.period.label">Period</label>
              <select
                class="form-control"
                id="field_periodId"
                data-cy="periodId"
                name="periodId"
                formControlName="periodId"
                [compareWith]="comparePeriod"
                title="{{'resilientApp.inputData.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>
          <!-- Scope -->
          <div class="col" style="flex: 0 0 25%;">
            <div class="form-group">
              <label for="variableScopeId" jhiTranslate="resilientApp.inputData.search.variableScope.label">Scope</label>
              <select
                class="form-control"
                id="field_variableScopeId"
                data-cy="variableScopeId"
                name="variableScopeId"
                formControlName="variableScopeId"
                [compareWith]="compareScope"
                title="{{'resilientApp.inputData.search.variableScope.placeholder' | translate}}"
              >
                <option [ngValue]="null" selected style="color: gray;" jhiTranslate="resilientApp.inputData.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 25%;">
            <div class="form-group">
              <label for="variableCategoryId" jhiTranslate="resilientApp.inputData.search.variableCategory.label">Category</label>
              <select
                class="form-control"
                id="field_variableCategoryId"
                data-cy="variableCategoryId"
                name="variableCategoryId"
                formControlName="variableCategoryId"
                [compareWith]="compareCategory"
                title="{{'resilientApp.inputData.search.variableCategory.placeholder' | translate}}"
              >
                <option [ngValue]="null" selected style="color: gray;" jhiTranslate="resilientApp.inputData.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 25%;">
            <div class="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="resilientApp.inventory.home.filter">Filtrar</span>
              </button>
            </div>
          </div>
        </div>
      </form>
  </div>


  @if (inputData) {
    <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>
          <tr jhiSort [sortState]="sortState" (sortChange)="navigateToWithComponentValues($event)">
            <th scope="col" colspan="2" jhiSortBy="variable.name">
              <div class="d-flex">
                <span jhiTranslate="resilientApp.inputData.variable">Variable</span>
                <fa-icon class="p-1" icon="sort"></fa-icon>
              </div>
            </th>
            <th scope="col" jhiSortBy="variableClassName">
              <div class="d-flex">
                <span jhiTranslate="resilientApp.inputData.variableClassName">Class</span>
                <fa-icon class="p-1" icon="sort"></fa-icon>
              </div>
            </th>
            <th scope="col" jhiSortBy="imputedValue">
              <div class="d-flex">
                <span jhiTranslate="resilientApp.inputData.imputedValue">Value</span>
                <fa-icon class="p-1" icon="sort"></fa-icon>
              </div>
            </th>
            <th scope="col" jhiSortBy="unit.symbol">
              <div class="d-flex">
                <span jhiTranslate="resilientApp.inputData.unit">Unit</span>
                <fa-icon class="p-1" icon="sort"></fa-icon>
              </div>
            </th>
            
            <th scope="col"></th>
          </tr>
		  
          {{ ' ' // Search 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.inputData.search.variable.placeholder' | translate" title="{{ 'resilientApp.inputData.search.variable.title' | translate }}"/>
            </th>
            <th>
              <input type="text" class="form-control" name="variableClassNameOrCode" id="field_variableClassNameOrCode" data-cy="variableClassNameOrCode" formControlName="variableClassNameOrCode" [placeholder]="'resilientApp.inputData.search.variableClassName.placeholder' | translate" title="{{ 'resilientApp.inputData.search.variableClassName.title' | translate }}"/>
            </th>
            <th></th>
            <th></th>
          </tr>

        </thead>
        <tbody>
          @for (inputData of inputData; track trackId) {
            <tr data-cy="entityTable">
              <td>
                @if (inputData.variable) {
                  <div>
                    <a [routerLink]="['/variable', inputData.variable.id, 'view']">{{ inputData.variable.code }}</a>
                  </div>
                }
              </td>
              <td>
                @if (inputData.variable) {
                  <div>
                    <span>{{ inputData.variable.name }}</span>
                  </div>
                }
              </td>
              <td>
                @if (inputData.variableClassName) {
                  <div>
                    <span>{{ inputData.variableClassName }}</span>
                  </div>
                }
              </td>
              <td>
                @if (inputData.imputedValue) {
                  <div>
                    <span>{{ inputData.imputedValue }}</span>
                  </div>
                }
              </td>
              <td>
                @if (inputData.unit) {
                  <div>
                    <span>{{ inputData.unit.symbol }}</span>
                  </div>
                }
              </td>
              
              <td class="text-end">
                <div class="btn-group">
                  <a 
                    class="btn btn-info btn-sm" 
                    data-cy="entityDetailsButton"
                    *ngIf="hasReadPermission(Resources.INPUT_DATA)"
                    [routerLink]="!canRead(inputData) ? null : ['/input-data', inputData.id, 'view']" 
                    [class.disabled]="!canRead(inputData)"
                    [attr.disabled]="!canRead(inputData) ? true : null"
                  >
                    <fa-icon icon="eye"></fa-icon>
                    <span class="d-none d-md-inline" jhiTranslate="entity.action.view">Visualizar</span>
                  </a>

                  <a
                    class="btn btn-primary btn-sm" 
                    data-cy="entityEditButton"
                    *ngIf="hasUpdatePermission(Resources.INPUT_DATA)"
                    [routerLink]="!canUpdate(inputData) ? null : ['/input-data', inputData.id, 'edit']" 
                    [class.disabled]="!canUpdate(inputData)"
                    [attr.disabled]="!canUpdate(inputData) ? true : null"
                  >
                    <fa-icon icon="pencil-alt"></fa-icon>
                    <span class="d-none d-md-inline" jhiTranslate="entity.action.edit">Editar</span>
                  </a>

                  <button 
                    type="submit" 
                    class="btn btn-danger btn-sm" 
                    data-cy="entityDeleteButton"
                    *ngIf="hasDeletePermission(Resources.INPUT_DATA)"
                    (click)="!canDelete(inputData) ? null : delete(inputData)" 
                    [class.disabled]="!canDelete(inputData)"
                    [disabled]="!canDelete(inputData)"
                  >
                    <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 (inputData?.length === 0) {
    <div class="alert alert-warning" id="no-result">
      <span jhiTranslate="resilientApp.inputData.home.notFound" [translateValues]="{ name: selectedOrganization?.name }">Nenhum Input Data encontrado para os critérios e para a {{selectedOrganization?.name}}</span>
    </div>
  }
</div>
