<h1 mat-dialog-title class="prevent-select">{{ action }} grupo de equipos en revisión</h1>
<div mat-dialog-content class="prevent-select">
  <div class="is-loading animated fadeIn fast" *ngIf="isLoading">
    <mat-spinner align="center"></mat-spinner>
    <h3>Cargando datos ...</h3>
  </div>
  <div class="has-error animated fadeIn pt-64" *ngIf="!isLoading && hasError">
    <mat-icon class="red_primary_font">error</mat-icon>
    <h2>{{ errorStr }}</h2>
  </div>
  <div class="dialog_details_column animated fadeIn" *ngIf="!isLoading && !hasError">
    <h3>Seleccione el grupo que desea procesar</h3>
    <mat-radio-group class="example-radio-group" [(ngModel)]="selectedGroup">
      @for(equipment of pendingGroups; track equipment) {
        <mat-radio-button class="example-radio-button" [value]="equipment.CODIGO">
          {{ equipment.TIPO_EQUIPAMIENTO }} - {{ equipment.MODELO_EQUIPAMIENTO }}: <b>{{ equipment.TOTAL }}</b> elementos.
        </mat-radio-button>
        <div class="gallery-container">
          <button mat-icon-button class="backward-button" [disabled]="images.get(equipment.CODIGO)!.length < 2" (click)="backward(equipment.CODIGO)">
            <mat-icon>chevron_left</mat-icon>
          </button>
          <button mat-icon-button class="forward-button" [disabled]="images.get(equipment.CODIGO)!.length < 2" (click)="forward(equipment.CODIGO)">
            <mat-icon>chevron_right</mat-icon>
          </button>
          <img *ngIf="images.get(equipment.CODIGO)!.length > 0" [src]="images.get(equipment.CODIGO)![imagesIndexes.get(equipment.CODIGO)!]" [alt]="'IMG' + imagesIndexes.get(equipment.CODIGO)!">
          <div *ngIf="images.get(equipment.CODIGO)!.length < 1">
            <b>Sin imágenes.</b>
          </div>
        </div>
      }
    </mat-radio-group>
  </div>
</div>
<div mat-dialog-actions align="end">
  <button mat-button mat-dialog-close>Cerrar</button>
  <button mat-button [disabled]="selectedGroup == ''" (click)="alertProcessPendingEquipments()">Continuar</button>
</div>