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

      <button
        id="jh-create-entity"
        data-cy="entityCreateButton"
        class="btn btn-primary jh-create-entity create-variable"
        [routerLink]="['/variable/new']"
      >
        <fa-icon icon="plus"></fa-icon>
        <span jhiTranslate="resilientApp.variable.home.createLabel">Criar novo(a) Variable</span>
      </button>
    </div>
    <div class="d-flex justify-content-end">
      <button
        id="jh-export-entity"
        data-cy="entityExportButton"
        class="btn btn-primary jh-export-entity export-variable spinner-container d-flex align-items-center justify-content-between"
        (click)="export()"
        [disabled]="isExporting || isLoading"
      >
        <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>


  <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" jhiSortBy="code">
              <div class="d-flex">
                <span jhiTranslate="resilientApp.variable.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.variable.name">Name</span>

                <fa-icon class="p-1" icon="sort"></fa-icon>
              </div>
            </th>
            <th scope="col" jhiSortBy="description" class="d-none">
              <div class="d-flex">
                <span jhiTranslate="resilientApp.variable.description">Description</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.variable.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.variable.variableCategory">Variable Category</span>
                <fa-icon class="p-1" icon="sort"></fa-icon>
              </div>
            </th>
            <th scope="col" jhiSortBy="input">
              <div class="d-flex">
                <span jhiTranslate="resilientApp.variable.input">Input</span>

                <fa-icon class="p-1" icon="sort"></fa-icon>
              </div>
            </th>
            <th scope="col" jhiSortBy="output">
              <div class="d-flex">
                <span jhiTranslate="resilientApp.variable.output">Output</span>

                <fa-icon class="p-1" icon="sort"></fa-icon>
              </div>
            </th>
            <th scope="col"></th>
          </tr>
		  <tr class="search">
		  <th>
			  <input type="text" class="form-control" name="code" id="field_code" data-cy="code" formControlName="code" [placeholder]="'resilientApp.variable.search.code' | translate"/>
			</th>
			<th>
			  <input type="text" class="form-control" name="name" id="field_name" data-cy="name" formControlName="name" [placeholder]="'resilientApp.variable.search.name' | translate"/>
			</th>
			<th class="d-none">
			  <input type="text" class="form-control" name="description" id="field_description" data-cy="description" formControlName="description" />
			</th>
			<th>
			  <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.variable.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"
			  >
				<option [ngValue]="null" selected style="color: gray;" jhiTranslate="resilientApp.variable.search.variableCategory">Filter by category</option>
				@for (variableCategoryOption of variableCategoriesSharedCollection; track $index) {
				  <option [ngValue]="variableCategoryOption.id">{{ variableCategoryOption.name }}</option>
				}
			  </select>
			</th>
			<th>
				<div class="form-check form-check-tristate">
				  <input type="hidden" name="input" id="field_input" data-cy="input" formControlName="input" />
				  
				  <fa-icon icon="check"    *ngIf="isChecked(searchForm.get('input'))"      (click)="toggleState(searchForm.get('input'))" title="True"></fa-icon>
				  <fa-icon icon="xmark"    *ngIf="isUnChecked(searchForm.get('input'))"    (click)="toggleState(searchForm.get('input'))" title="False"></fa-icon>
				  <fa-icon icon="question" *ngIf="isUndetermined(searchForm.get('input'))" (click)="toggleState(searchForm.get('input'))" title="No Restriction"></fa-icon>
				</div>
			</th>
			<th>
				<div class="form-check form-check-tristate">
				  <input type="hidden" name="output" id="field_output" data-cy="output" formControlName="output" />
				  
				  <fa-icon icon="check"    *ngIf="isChecked(searchForm.get('output'))"      (click)="toggleState(searchForm.get('output'))" title="True"></fa-icon>
				  <fa-icon icon="xmark"    *ngIf="isUnChecked(searchForm.get('output'))"    (click)="toggleState(searchForm.get('output'))" title="False"></fa-icon>
				  <fa-icon icon="question" *ngIf="isUndetermined(searchForm.get('output'))" (click)="toggleState(searchForm.get('output'))" title="No Restriction"></fa-icon>
				</div>
			</th>
			<th>
			  <button class="btn btn-info me-2 w-100" type="submit" form="searchForm">Filter</button>
			</th>
		  </tr>
        </thead>
        <tbody>
          @for (variable of variables; track trackId) {
            <tr data-cy="entityTable">
              <td>{{ variable.code }}</td>
              <td>{{ variable.name }}</td>
              <td class="d-none">{{ variable.description }}</td>
              <td>
                @if (variable.variableScope) {
                  <div>
                    <a [routerLink]="['/variable-scope', variable.variableScope.id, 'view']">{{ variable.variableScope.name }}</a>
                  </div>
                }
              </td>
              <td>
                @if (variable.variableCategory) {
                  <div>
                    <a [routerLink]="['/variable-category', variable.variableCategory.id, 'view']">{{ variable.variableCategory.name }}</a>
                  </div>
                }
              </td>
              <td class="text-center">
                <fa-icon icon="check" *ngIf="variable.input"></fa-icon>
                <fa-icon icon="xmark" *ngIf="!variable.input"></fa-icon>
                </td>
              <td class="text-center">
                <fa-icon icon="check" *ngIf="variable.output"></fa-icon>
                <fa-icon icon="xmark" *ngIf="!variable.output"></fa-icon>
              </td>
              <td class="text-end">
                <div class="btn-group">
                  <a [routerLink]="['/variable', variable.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]="['/variable', variable.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(variable)" 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 (variables == null) {
    <div class="alert alert-warning" id="no-result">
      <span>Seleccionar opções de filtro e executar pesquisa.</span>
    </div>
  }
  
  @if (variables?.length === 0) {
    <div class="alert alert-warning" id="no-result">
      <span jhiTranslate="resilientApp.variable.home.notFound">Nenhum Variables encontrado</span>
    </div>
  }
</div>
