<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">Artículos como objetos con propiedades</span>
        </div>

        <div class="override-actions">
          <mat-form-field appearance="outline" class="w-300p ml-70">
            <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">
            <button 
              mat-mini-fab 
              matTooltip="Actualizar datos"
              (click)="getObjectProperties()"
              class="orange_primary_background white_font override_no_shadow mr-70">
              <mat-icon>refresh</mat-icon>
            </button>
          </div>
        </div>
      </nav>
      
      <app-loading-card [isLoading]="isLoading" txtLoading="Cargando información." />

      @if (resourcesService.innerWidth() >= 1760 && !isLoading) {
        <div class="container-cards">

          @for (article of dataSource.data; track article) {
            <div class="card-item">
              <div class="card-section-img">
                <img [src]="article.IMAGENES[0]">
              </div>
              <div class="card-section-info">
                <div class="card-section-info-data">
                  <div class="code">{{ article.CODIGO_EQUIPAMIENTO }}</div>
                  <div class="align-center mt-12">
                    <b>{{ article.FAMILIA }}</b>
                  </div>
                  <div class="align-center mb-12">
                    <span>{{ article.SUBFAMILIA }}</span>
                  </div>
                  <div class="align-center mb-12 gray_dark_font">
                    <span>{{ article.MODELO }}</span> - <span>{{ article.CODIGO_MODELO }}</span>
                  </div>
                  <div class="align-center mb-8">
                    <b>Número de stock: </b> <span>#{{ article.ID_STOCK }}</span>
                  </div>
                </div>
                <div class="card-section-info-footer" align="end">
                  <button mat-button (click)="getDetailsObjectProperties(article)">Ver detalles</button>
                </div>
              </div>
            </div>
          } @empty {
            <div class="w-100 align-center">
              <object data="assets/img/empty_data.svg" width="150"></object>
              <h2>Sin datos</h2>
            </div>
          }
        </div>
      }
      
      @if (resourcesService.innerWidth() < 1760 && !isLoading) {
          <div class="container-cards-small">
              @for (article of dataSource.data; track article) {
                  <div class="card-item-small">
                      <div class="code">{{ article.CODIGO_EQUIPAMIENTO }}</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-small">
                          <img [src]="article.IMAGENES[0]">
                      </div>
                      <div class="card-section-info-footer" align="end">
                          <button mat-button (click)="getDetailsObjectProperties(article)">Ver detalles</button>
                      </div>
                  </div>
              } @empty {
                  <div>
                      <object data="assets/img/empty_data.svg" width="150"></object>
                      <h2>Sin datos</h2>
                  </div>
              }
          </div>
      }
    </section>
  </mat-card>
</main>