<div class="module-container">
  <div id="navigation" class="mb-8 animated fadeIn" style="float: left; margin: 20px;">
    <div class="prev-page prevent-select indigo_primary_background mat-elevation-z8"
    [routerLink]="['/sam/home']" matRipple>
      <mat-icon style="color: white;">arrow_back</mat-icon>
      <div class="page-name ml-4">Regresar</div>
    </div>
  </div>
  
  <div class="menu-title animated fadeIn">
    <span>Contadores y activadores</span>
  </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 class="menu-card" *ngIf="!isLoading && !hasError">
    <mat-card class="animated fadeIn fast centre menu-card-item" *ngFor="let submodule of submodules" (click)="openMenu(submodule)">
      <img mat-card-md-image [src]="'assets/img/' + submodule.IMAGENSUBMODULO + '.svg'">
      <mat-card-title class="fz-15">{{ submodule.NOMBRESUBMODULO }}</mat-card-title>
    </mat-card>
  </div>
</div>