<div class="module-container prevent-select">
  <div class="row-tools-bar">
    <button mat-raised-button class="raised-button-background mb-16" [routerLink]="['/sam/home']">
      Regresar<mat-icon>arrow_back</mat-icon>
    </button>
  </div>

  <div class="menu-title animated fadeIn">
    <span>Administrador del sistema</span>
  </div>

  <div class="menu-card" *ngIf="!isLoading && !hasError">
    <mat-card class="animated fadeIn fast centre menu-card-item" *ngFor="let function of functions" (click)="openFunction(function.IDFUNCION)">
      <mat-card-content>
        <mat-icon >{{ function.ICONOFUNCION }}</mat-icon>
      </mat-card-content>
      <mat-card-title class="fz-15 ph-8">
        {{ function.NOMBREFUNCION }}
      </mat-card-title>
    </mat-card>
  </div>

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