<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">Lista de artículos sin movimientos</mat-card-title>
          <div class="card_actions">
              <div class="card_action_filters">
                  <app-search-card [dataSource]="dataSource" [disabled]="isLoading" (dataValue)="dataSource = $event"/>
              </div>
              <div class="card_action_items">
                  <button 
                      mat-mini-fab 
                      matTooltip="Actualizar datos"
                      (click)="getArticlesWithoutMovements()"
                      [disabled]="isLoading"
                      class="orange_primary_background white_font override_no_shadow ml-8">
                      <mat-icon>refresh</mat-icon>
                  </button>
              </div>
          </div>
      </mat-card-header>

      <app-loading-card [isLoading]="isLoading" txtLoading="Cargando el menú de inventario y/o stock" />
      @if (!isLoading) {
          <div class="content_table">
              <table mat-table matSort [dataSource]="dataSource" class="animated fadeIn" [style.display]="isLoading ? 'none' : 'revert'">
                  <ng-container matColumnDef="ID_STOCK">
                      <th mat-header-cell *matHeaderCellDef mat-sort-header> No. Stock </th>
                      <td mat-cell *matCellDef="let element">{{ element.ID_STOCK }}</td>
                  </ng-container>
                  <ng-container matColumnDef="DIFERENCIA_ANIOS">
                      <th mat-header-cell *matHeaderCellDef mat-sort-header> Años inactivos </th>
                      <td mat-cell *matCellDef="let element">{{ setTime('Y', element.DIFERENCIA_ANIOS) }}</td>
                  </ng-container>
                  <ng-container matColumnDef="DIFERENCIA_MES">
                      <th mat-header-cell *matHeaderCellDef mat-sort-header> Meses inactivos </th>
                      <td mat-cell *matCellDef="let element">{{ setTime('M', element.DIFERENCIA_MES) }}</td>
                  </ng-container>
                  <ng-container matColumnDef="DIFERENCIA_DIAS">
                      <th mat-header-cell *matHeaderCellDef mat-sort-header> Días inactivos </th>
                      <td mat-cell *matCellDef="let element">{{ setTime('D', element.DIFERENCIA_DIAS) }}</td>
                  </ng-container>
                  <ng-container matColumnDef="FECHA_MODIFICA">
                      <th mat-header-cell *matHeaderCellDef mat-sort-header> Fecha de actualización </th>
                      <td mat-cell *matCellDef="let element">{{ element.FECHA_MODIFICA }}</td>
                  </ng-container>
                  <ng-container matColumnDef="USUARIO_MODIFICA">
                      <th mat-header-cell *matHeaderCellDef mat-sort-header> Última modificación </th>
                      <td mat-cell *matCellDef="let element">{{ element.USUARIO_MODIFICA }}</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>