<main class="main-container animated fadeIn">
  <app-btn-navigate navigate="/sam/GEAD/DESP/REPE" nameButton="Recepción de Pedidos"/>
  <mat-card class="override-card override-elevation-z8">
    @if (isLoadingForm) {
      <mat-progress-bar mode="indeterminate"></mat-progress-bar>
    }
    <section class="override-section">
      <nav class="override-nav">
        <mat-card-title class="mat-card-title centre">Lista de Artículos en Recepción</mat-card-title>
        <div class="override-actions">
          <div style="display: flex; align-items: center;">
            <app-search-card
              [dataSource]="dataSource"
              [disabled]="isLoading || isLoadingForm"
              (dataValue)="dataSource = $event"/>

            <button
              mat-mini-fab
              class="teal_dark_background white_font override_no_shadow mb-22"
              [disabled]="validateRegister()"
              matTooltip="Seleccionar todos mismos artículos"
              (click)="checkSelected()"
            >
              <mat-icon>check_box</mat-icon>
              <!-- Seleccionar todos -->
            </button>
          </div>
          <div class="override-buttons">
            <button 
              mat-flat-button 
              color="primary" 
              class="ml-8" 
              [disabled]="validateRegister() || isLoading || isLoadingForm"
              (click)="registerArtitlesToEquipment()"
              matTooltip="Solo se pueden registrar artículos del mismo modelo">
              <mat-icon>add</mat-icon>
              Registrar 
              @if (!validateRegister()) {
                <span>
                  {{ selection.selected.length }} {{ selection.selected.length === 1 ? ' artículo' : ' artículos' }}
                </span>
              }
            </button>

            <button
              mat-mini-fab
              matTooltip="Actualizar datos"
              class="cyan_dark_background white_font override_no_shadow ml-8"
              (click)="getListArtitleReception()">
              <mat-icon>refresh</mat-icon>
            </button>
          </div>
        </div>
      </nav>

      <app-loading-card
        [isLoading]="isLoading"
        [txtLoading]="'Cargando los artículos del proveedor'"
      />

      <div class="override-table">
        <table mat-table matSort [dataSource]="dataSource" class="animated fadeIn" [style.display]="isLoading ? 'none' : 'revert'">

          <ng-container matColumnDef="SELECT">
            <th mat-header-cell *matHeaderCellDef>
              <mat-checkbox (change)="$event ? toggleAllRows() : null"
                            [checked]="selection.hasValue() && isAllSelected()"
                            [indeterminate]="selection.hasValue() && !isAllSelected()"
                            [aria-label]="checkboxLabel()">
              </mat-checkbox>
            </th>
            <td mat-cell *matCellDef="let row">
              <mat-checkbox (click)="$event.stopPropagation()"
                            (change)="$event ? selection.toggle(row) : null"
                            [checked]="selection.isSelected(row)"
                            [aria-label]="checkboxLabel(row)">
              </mat-checkbox>
            </td>
          </ng-container>

          <ng-container matColumnDef="IMAGEN">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> Imagen </th>
            <td mat-cell *matCellDef="let element">
              <img [src]="element.IMAGEN" class="img-table">
            </td>
          </ng-container>
          <ng-container matColumnDef="CODIGO_ARTICULO">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> Código del Artículo </th>
            <td mat-cell *matCellDef="let element"> {{ element.CODIGO_ARTICULO }} </td>
          </ng-container>
          <ng-container matColumnDef="NOMBRE_ARTICULO">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> Artículo </th>
            <td mat-cell *matCellDef="let element"> {{ element.NOMBRE_ARTICULO }} </td>
          </ng-container>
          <ng-container matColumnDef="CODIGO_INFORMACION">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> Código </th>
            <td mat-cell *matCellDef="let element"> {{ element.CODIGO_INFORMACION }} </td>
          </ng-container>
          <ng-container matColumnDef="MODELO_INFORMACION">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> Modelo </th>
            <td mat-cell *matCellDef="let element"> {{ element.MODELO_INFORMACION }} </td>
          </ng-container>
         <!--  <ng-container matColumnDef="ACCIONES">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> Acciones </th>
            <td mat-cell *matCellDef="let element"> 
              
            </td>
          </ng-container> -->

          <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
          <tr mat-row *matRowDef="let row; columns: displayedColumns" (click)="selection.toggle(row)" class="row-item"></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>
  </section>
  <mat-paginator [pageSizeOptions]="[10, 50, 100]" class="override-paginator"></mat-paginator>
</mat-card>