<main class="main-container animated fadeIn">
  <app-btn-navigate navigate="/sam/GIST" nameButton="Gestión de Inventario y/o Stock" />
  <mat-card class="override-card override-elevation-z8">
    <mat-card-header class="card_header">
      <mat-card-title class="align-center">Clasificación de los artículos</mat-card-title>
      <div class="card_actions">
        <div class="card_action_filters">
          <app-search-card [dataSource]="dataSource" [disabled]="isLoading" (dataValue)="dataSource = $event"/>
          @if (!isLoading) {
            <mat-form-field appearance="outline" class="w-400p mr-8">
              <mat-label>Almacen seleccionado</mat-label>
              <mat-select [formControl]="formControl">
                @for (warehouse of arrWarehouse; track warehouse) {
                  <mat-option [value]="warehouse.CODIGO_ALMACEN">{{ warehouse.NOMBRE_ALMACEN }} (Cantidad: {{ warehouse.CANTIDAD_STOCK }})</mat-option>
                }
              </mat-select>
              <mat-icon matSuffix>store</mat-icon>
              @if (formControl.hasError('required')) {
                <mat-error title="El campo Almacen seleccionado es obligatorio">El campo <b>Almacen seleccionado</b> es obligatorio</mat-error>
              }
            </mat-form-field>
          } @else {
            <div class="w-400p container-load-form">
              <mat-progress-bar mode="indeterminate"></mat-progress-bar>
            </div>
          }
        </div>
        <div class="card_action_items">
          <button 
            mat-mini-fab 
            matTooltip="Actualizar datos"
            class="orange_primary_background white_font override_no_shadow ml-8"
            (click)="getArticleClassificateByWarehouse()">
            <mat-icon>refresh</mat-icon>
          </button>
        </div>
      </div>
    </mat-card-header>

    <div class="content_table">
      <table mat-table matSort [dataSource]="dataSource" class="animated fadeIn" [style.display]="isLoading ? 'none' : 'revert'">
        <ng-container matColumnDef="ID_INFORMACION">
          <th mat-header-cell *matHeaderCellDef mat-sort-header> No </th>
          <td mat-cell *matCellDef="let element"> {{ element.ID_INFORMACION }} </td>
        </ng-container>
        <ng-container matColumnDef="PROVEEDOR">
          <th mat-header-cell *matHeaderCellDef mat-sort-header> Proveedor </th>
          <td mat-cell *matCellDef="let element"> {{ element.PROVEEDOR == null || element.PROVEEDOR.trim() == '()' ? '-' : element.PROVEEDOR }} </td>
        </ng-container>
        <ng-container matColumnDef="TIPO_EQUIPAMIENTO">
          <th mat-header-cell *matHeaderCellDef mat-sort-header> Tipo </th>
          <td mat-cell *matCellDef="let element"> {{ element.TIPO_EQUIPAMIENTO }} </td>
        </ng-container>
        <ng-container matColumnDef="MODELO_EQUIPAMIENTO">
          <th mat-header-cell *matHeaderCellDef mat-sort-header> Modelo </th>
          <td mat-cell *matCellDef="let element"> {{ element.MODELO_EQUIPAMIENTO }} </td>
        </ng-container>
        <ng-container matColumnDef="PRECIO">
          <th mat-header-cell *matHeaderCellDef mat-sort-header> Precio </th>
          <td mat-cell *matCellDef="let element"> {{ element.PRECIO }} </td>
        </ng-container>
        <ng-container matColumnDef="CANTIDAD">
          <th mat-header-cell *matHeaderCellDef mat-sort-header> Cantidad </th>
          <td mat-cell *matCellDef="let element"> {{ element.CANTIDAD }} </td>
        </ng-container>
        <ng-container matColumnDef="TASA_ROTACION_MENSUAL">
          <th mat-header-cell *matHeaderCellDef mat-sort-header> Tasa de rotación mensual </th>
          <td mat-cell *matCellDef="let element"> {{ element.TASA_ROTACION_MENSUAL }} </td>
        </ng-container>
        <ng-container matColumnDef="TASA_ROTACION_SEMESTRAL">
          <th mat-header-cell *matHeaderCellDef mat-sort-header> Tasa de rotación semestral </th>
          <td mat-cell *matCellDef="let element"> {{ element.TASA_ROTACION_SEMESTRAL }} </td>
        </ng-container>
        <ng-container matColumnDef="TASA_ROTACION_ANUAL">
          <th mat-header-cell *matHeaderCellDef mat-sort-header> Tasa de rotación anual </th>
          <td mat-cell *matCellDef="let element"> {{ element.TASA_ROTACION_ANUAL }} </td>
        </ng-container>

        <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
        <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
        <tr class="mat-row" *matNoDataRow>
          <td class="mat-cell p-20 align-center" colspan="12">
            <object data="assets/img/empty_data.svg" width="150"></object>
            <h2>Sin datos</h2>
          </td>
        </tr>
      </table>
    </div>
    <mat-paginator [pageSizeOptions]="[10, 20, 50]" class="override-paginator" showFirstLastButtons></mat-paginator>
  </mat-card>
</main>