<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">Definición de stock mínimo y máximo</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">
            <button 
              mat-mini-fab 
              matTooltip="Actualizar datos"
              (click)="getMaxMinStock()"
              class="orange_primary_background white_font override_no_shadow ml-8">
              <mat-icon>refresh</mat-icon>
            </button>
          </div>
        </div>
      </nav>
      
      <app-loading-card [isLoading]="isLoading" [txtLoading]="'Cargando información de la definición del stock mínimo y máximo.'" />

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

          @for (info of dataSource.data; track info) {
            <div class="card-item">
                <div class="card-section-img">
                    <img [src]="info.IMAGENES[0]">
                </div>
                <div class="card-section-info">
                    <div class="card-section-info-data">
                        <div class="align-center mb-6">
                            <b>{{ info.MODELO }}</b> - <b>{{ info.CODIGO_MODELO }}</b>
                        </div>
                        <div class="align-center mb-12 gray_dark_font">
                            <span>{{ info.FAMILIA }}</span> <br> <span>{{ info.SUBFAMILIA }}</span>
                        </div>

                        <div><b>Stock mínimo definido: </b><span>{{ info.STOCK_MINIMO }}</span></div>
                        <div><b>Stock máximo definido: </b><span>{{ info.STOCK_MAXIMO }}</span></div>
                        <div><b>Cantidad actual: </b><span>{{ info.CANTIDAD_ACTUAL }}</span></div>
                        <div><b>Estado actual: </b><span>{{ info.ESTADO }}</span></div>
                    </div>
                    <div class="card-section-info-footer" align="end">
                        <button mat-button (click)="openDialog(info)">Modificar</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 (info of dataSource.data; track info) {
                  <div class="card-item-small">
                      <div class="mb-6 title_small">{{ info.MODELO }} - {{ info.CODIGO_MODELO }}</div>
                      <div class="card-section-img-small">
                          <img [src]="info.IMAGENES[0]">
                      </div>
                      <div class="align-center mb-8">
                          Estado Actual: {{ info.ESTADO }}
                      </div>
                      <div class="card-section-info-footer mb-15" align="end">
                          <button mat-button (click)="openDialog(info)">Modificar</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>