<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">
  <mat-card *ngFor="let functions of arrFunctions" class="animated fadeIn fast centre menu-card-item" (click)="openMenu(functions)">
    <img mat-card-md-image *ngIf="functions.IMAGENFUNCION !== undefined" [src]="'assets/img/' + functions.IMAGENFUNCION + '.svg'">
    <mat-card-content class="p-32" *ngIf="functions.IMAGENFUNCION === undefined"><mat-icon>{{ functions.ICONOFUNCION }}</mat-icon></mat-card-content>
    <mat-card-title class="fz-15"> {{ functions.NOMBREFUNCION }} </mat-card-title>
  </mat-card>

  <div *ngIf="arrFunctions.length === 0 && !isLoading">
    <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 adquisiciones'"
  />

  <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>
</div>
