<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">Intercambio de artículos entre almacenes</span>
        </div>

        <div class="override-actions">
          <app-search-card [dataSource]="dataSource" [disabled]="isLoading || isLoadingForm" (dataValue)="dataSource = $event" />
          <div class="override-buttons">
            <button mat-mini-fab matTooltip="Actualizar datos" (click)="getExchangeArticles()"
            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 ubicació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 }}</div>
                  <div class="align-center mb-8 gray_dark_font">
                    <span>{{ article.MODELO }}</span> - <span>{{ article.CODIGO_MODELO }}</span>
                  </div>
                  <div class="mb-4">
                    <b>Número de Stock: </b> <span>#{{ article.ID_STOCK }}</span>
                  </div>
                  <div><b>Almacén: </b><span>{{ article.NOMBRE_ALMACEN }}</span></div>
                  <div><b>Área:    </b><span>{{ article.NOMBRE_AREA    }}</span></div>
                  <div><b>Nivel:   </b><span>{{ article.NOMBRE_NIVEL   }}</span></div>
                  <div><b>Zona:    </b><span>{{ article.NOMBRE_ZONA    }}</span></div>
                </div>
                <div class="card-section-info-footer">
                  <button mat-button (click)="openDialog(article)">Intercambiar</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 }}</div>
                      <div class="align-center mb-12 gray_dark_font code_desc">
                          <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)="openDialog(article)">Intercambiar</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>