<!-- GUIPropertiesViewAndSortCustomizer -->
<div>
  <h2 id="page-heading" data-cy="UnitHeading">
    <span jhiTranslate="resilientApp.unit.home.title">Units</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.unit.home.refreshListLabel">Refresh list</span>
      </button>

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

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

  <jhi-alert></jhi-alert>

  @if (units && units.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="unitType.name">
              <div class="d-flex">
                <span jhiTranslate="resilientApp.unit.unitType">Unit Type</span>
                <fa-icon class="p-1" icon="sort"></fa-icon>
              </div>
            </th>
            <th scope="col" jhiSortBy="symbol">
              <div class="d-flex">
                <span jhiTranslate="resilientApp.unit.symbol">Symbol</span>

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

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

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

            <th scope="col"></th>
          </tr>

          {{ ' ' // Search row }}
          <tr class="search">
            <th>
              <select
                class="form-control"
                id="field_unitTypeId"
                data-cy="unitTypeId"
                name="unitTypeId"
                formControlName="unitTypeId"
                [compareWith]="compareUnitType"
              >
                <option [ngValue]="null" selected style="color: gray;">Filter by unit type</option>
                @for (unitTypeOption of unitTypesSharedCollection; track $index) {
                  <option [ngValue]="unitTypeOption.id">{{ unitTypeOption.name }}</option>
                }
              </select>
            </th>
            <th>
              <input type="text" class="form-control" name="symbol" id="field_symbol" data-cy="symbol" formControlName="symbol" placeholder="Filter by symbol"/>
            </th>
            <th>
              <input type="text" class="form-control" name="name" id="field_name" data-cy="name" formControlName="name" placeholder="Filter by name"/>
            </th>
            <th>
              <input type="text" class="form-control" name="description" id="field_description" data-cy="description" formControlName="description" placeholder="Filter by description"/>
            </th>
            <th> <button class="btn btn-info me-2 w-100" type="submit" form="searchForm">Filter</button> </th>
          </tr>
        </thead>
        <tbody>
          @for (unit of units; track trackId) {
            <tr data-cy="entityTable">
              <td>
                @if (unit.unitType) {
                  <div>
                    <a [routerLink]="['/unit-type', unit.unitType.id, 'view']">{{ unit.unitType.name }}</a>
                  </div>
                }
              </td>
              <td>{{ unit.symbol }}</td>
              <td>{{ unit.name }}</td>
              <td>{{ unit.description }}</td>

<!-- HIDDEN Columns 
              <td>
                <a [routerLink]="['/unit', unit.id, 'view']">{{ unit.id }}</a>
              </td>
              <td>{{ unit.code }}</td>
              <td>{{ unit.convertionRate }}</td>
              <td>{{ unit.version }}</td>
--> 

              <td class="text-end">
                <div class="btn-group">
                  <a [routerLink]="['/unit', unit.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]="['/unit', unit.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(unit)" 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 (units?.length === 0) {
  <div class="alert alert-warning" id="no-result">
    <span jhiTranslate="resilientApp.unit.home.notFound">Nenhum Units encontrado</span>
  </div>
  }
</div>
