<app-btn-navigate navigate="/sam/home" nameButton="Regresar" widthPosition="14px" />

<div class="menu-title">
  <span>Análisis de fallas</span>
</div>

<div class="menu-card">
  @for (functions of arrFunctions; track functions) {
    <mat-card class="animated fadeIn fast centre menu-card-item" (click)="openMenu(functions)">
      @if (functions.IMAGENFUNCION !== undefined) {
        <img mat-card-md-image [src]="'assets/img/' + functions.IMAGENFUNCION + '.svg'">
      } @else {
        <mat-card-content class="p-32">
          <mat-icon>{{ functions.ICONOFUNCION }}</mat-icon>
        </mat-card-content>
      }
      <mat-card-title class="fz-15"> {{ functions.NOMBREFUNCION }} </mat-card-title>
    </mat-card>
  } @empty {
    @if (!isLoading) {
      <div>
        <object data="assets/img/empty_data.svg" width="150"></object>
        <h1>No existen funciones</h1>
      </div>
    }
  }

  <app-loading-card [isLoading]="isLoading"  txtLoading="Cargando el menú de análisis de fallas" />

  @if (!isLoading && hasError) {
    <div class="error-container">
      <mat-icon class="icon-error">error</mat-icon>
      <h1 class="color-error">¡Error!</h1>
      <p class="p-error">{{ errorStr }}</p>
    </div>
  }
</div>
