<div>
  <h2 id="page-heading" data-cy="InventoryHeading">
    <span jhiTranslate="resilientApp.inventory.home.title">Activity 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-inventory-data 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">
        <!-- Period -->
        <div class="col-md-3 form-group">
          <label for="periodId" jhiTranslate="resilientApp.inventory.period">Period</label>
          <select
            class="form-control"
            id="field_periodId"
            data-cy="periodId"
            name="periodId"
            formControlName="periodId"
            [compareWith]="comparePeriod"
          >
            <option *ngFor="let periodOption of periodsSharedCollection; let i = index" 
                    [ngValue]="periodOption.id" 
                    [selected]="i === 0">
              {{ periodOption.name }}
            </option>
          </select>
        </div>
        
        <!-- Scope -->
        <div class="col-md-3 form-group">
          <label for="scopeId" jhiTranslate="resilientApp.inventory.scope">Scope</label>
          <select
            class="form-control"
            id="field_scopeId"
            data-cy="scopeId"
            name="scopeId"
            formControlName="scopeId"
            [compareWith]="compareScope"
          >
            <option [ngValue]="null" selected style="color: gray;">Filtrar por âmbito</option>
            @for (scopeOption of scopesSharedCollection; track $index) {
              <option [ngValue]="scopeOption.id">{{ scopeOption.name }}</option>
            }
          </select>
        </div>
        
        <!-- Category -->
        <div class="col-md-3 form-group">
          <label for="categoryId" jhiTranslate="resilientApp.inventory.category">Category</label>
          <select
            class="form-control"
            id="field_categoryId"
            data-cy="categoryId"
            name="categoryId"
            formControlName="categoryId"
            [compareWith]="compareCategory"
          >
            <option [ngValue]="null" selected style="color: gray;">Filtrar por categoria</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="resilientApp.inventory.home.filter">Filtrar</span>
          </button>
        </div>
      </form>
    </div>
  </div>

  @if (inventory) {
    <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>
            <th scope="col">
              <div class="d-flex">
                <span jhiTranslate="resilientApp.inventory.variable">Variable</span>
              </div>
            </th>
            <th scope="col">
              <div class="d-flex">
                <span jhiTranslate="resilientApp.inventory.variableClass">Classe</span>
              </div>
            </th>
            <th scope="col">
              <div class="d-flex">
                <span class="ms-auto" jhiTranslate="resilientApp.inventory.imputedValue">Valor</span>
              </div>
            </th>
            <th scope="col">
              <div class="d-flex">
                <span jhiTranslate="resilientApp.inventory.unit">Unidade</span>
              </div>
            </th>
            <th scope="col"></th>
          </tr>
        </thead>
        <tbody>
          @for (inventory of inventory; track trackId) {
            <tr data-cy="entityTable">
              <td>
                @if (inventory.variable) {
                    <span>{{ inventory.variable.name }}</span>
                }
              </td>
              <td>
                @if (inventory.variableClassName) {
                    <span>{{ inventory.variableClassName }}</span>
                }
              </td>
              <td [ngClass]="{'text-end': !(inventory.stringValue)}">
                @if (inventory.stringValue) {
                  <span>{{ inventory.stringValue }}</span>
                } @else {
                  @if (inventory.value) {
                    <span>{{ formatValue(inventory.value) }}</span>
                  }
                }
              </td>
              <td>
                @if (inventory.unit) {
                    <span>{{ inventory.unit.symbol }}</span>
                }
              </td>
            </tr>
          }
        </tbody>
      </table>
	  
	  </form>
    </div>
  }
  
  @if (inventory?.length === 0) {
    <div class="alert alert-warning" id="no-result">
      <span jhiTranslate="resilientApp.inventory.home.notFound">Nenhum Inventory encontrado</span>
    </div>
  }
</div>
