<div class="items-container animated fadeIn prevent-select" (window:resize)="onResize()">
  <div id="navigation" class="mb-8">
    <div class="prev-page prevent-select raised-button-background mat-elevation-z8" (click)="goBack(1)" matRipple>
      <mat-icon style="color: white;">arrow_back</mat-icon>
      <div class="page-name ml-4">Gestión de equipamientos</div>
    </div>
  </div>
  <div class="equipment-types-container">
    <h1 mat-card-title style="text-align: center;">Cantidad de tipos de equipamientos</h1>
    <div class="equipment-types-body">
      <div class="loader-container" *ngIf="isLoading">
        <mat-spinner></mat-spinner>
        <h2 class="loader-label">Cargando...</h2>
      </div>
      
      <div class="error-container" *ngIf="!isLoading && hasError">
        <mat-icon style="color: #e53935; transform: scale(5); margin-bottom: 48px;">error</mat-icon>
        <h1 style="color: #e53935;">¡Error!</h1>
        <p style="font-style: italic; font-size: 16px; overflow-wrap: anywhere; text-align: center;">{{ errorStr }}</p>
      </div>

      <p *ngIf="equipmentTypesArr.length == 0" style="font-weight: 500; text-align: center;">
        Aún no se han registrado equipamientos.
      </p>

      <mat-accordion *ngIf="equipmentTypesArr.length > 0">
        <mat-expansion-panel *ngFor="let equipmentType of equipmentTypesArr; let i = index" (opened)="searchEquipments(i)">
          <mat-expansion-panel-header class="example-headers-align">
            <mat-panel-title>{{ equipmentType.TIPO_EQUIPAMIENTO }}</mat-panel-title>
            <mat-panel-description>
              Cantidad de equipamientos registrados: {{ equipmentType.CANTIDAD_EQUIPAMIENTOS }}
              <button mat-icon-button matTooltip="Registrar equipamiento" (click)="openEquipmentForm(equipmentType.TIPO_EQUIPAMIENTO)">
                <mat-icon>add</mat-icon>
              </button>
            </mat-panel-description>
          </mat-expansion-panel-header>
          <div class="equipments-loader animated fadeIn" *ngIf="searchingEquipments">
            <mat-progress-bar mode="indeterminate" class="w-100"></mat-progress-bar>
            <p class="mt-8 loader-label">Buscando equipaimientos...</p>
          </div>
          <div class="equipments-type-list-item animated fadeIn pv-8" *ngFor="let equipment of equipmentsByType; let j = index"
          [ngClass]="{item_divider: j < equipmentsByType.length - 2}">
            <div class="item-label">{{ equipment.TIPO }} - {{ equipment.MODELO }}</div>
            <button mat-mini-fab class="override_no_shadow ml-4 white_font pink_primary_background" matTooltip="Ver detalles" color="primary"  
            (click)="openEquipmentDetails(equipment.CODIGO)">
              <mat-icon>visibility</mat-icon>
            </button>
          </div>
        </mat-expansion-panel>
      </mat-accordion>
    </div>
  </div>
</div>