<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">
    <section class="override-section">
      <nav class="override-nav">
        <div class="w-100 align-center pv-15">
          <span class="title-card">Búsquedas multicriterios</span>
        </div>

        <div class="override-actions">
          <mat-form-field appearance="outline" class="w-300p mr-8">
            <mat-label>Buscador</mat-label>
            <input 
              matInput 
              [(ngModel)]="txtSearch" 
              placeholder="Ingrese la palabra a buscar"
              (keyup)="applyFilter()" 
              [disabled]="isLoading || isLoadingForm"
            />
            <mat-icon matSuffix *ngIf="txtSearch.length === 0" >search</mat-icon>
            <mat-icon 
              matSuffix 
              *ngIf="txtSearch.length > 0" 
              class="clickable" 
              matTooltip="Eliminar filtro" 
              (click)="txtSearch = ''; applyFilter()"
            >close</mat-icon>
          </mat-form-field>

          <div class="override-buttons">
            <app-btn-resize 
            class="mr-8 "
            (click)="openDialogDetails('search')"
            [disabled]="isLoading || isLoadingForm"
            [backgroundColor]="'primary raised-button-background'" 
            [textColor]="'white_font'" 
            [nameButton]="'Buscar'" 
            [icon]="'search'"/>
          </div>
        </div>
      </nav>

      <app-loading-card 
        [isLoading]="isLoading" 
        [txtLoading]="'Cargando formulario'"
      />

      @if (!isLoading) {
        <div class="container-cards">

          @for (article of dataSource.data; track article) {
            <div class="card-item">
              <div class="code">{{ article.CODIGO }}</div>
              <div class="align-center mb-12 gray_dark_font">
                <span>{{ article.MODELO }}</span> - <span>{{ article.CODIGO_MODELO }}</span>
              </div>
              <div class="card-section-img">
                <img [src]="article.IMAGENES[0]">
              </div>
              <div class="card-section-info-footer">
                <button mat-button (click)="openDialogDetails('readonly', article)">Ver detalles</button>
              </div>
            </div>
          } @empty {
            <div>
              <object data="assets/img/empty_data.svg" width="150"></object>
              <h2>Sin resultados</h2>
            </div>
          }
        </div>
      }
    </section>
  </mat-card>
</main>