<app-btn-navigate [navigate]="'/sam/forms-management'" [nameButton]="'Regresar'" [widthPosition]="'14px'" />

<div class="menu-title">
  <span>Gestión de Adquisiciones</span>
</div>

<div class="menu-card">

  <mat-card *ngFor="let submodule of arrSubmodules" class="animated fadeIn fast centre menu-card-item" (click)="openMenu(submodule)">
    <img mat-card-md-image *ngIf="submodule.IMAGENSUBMODULO !== null" [src]="'assets/img/' + submodule.IMAGENSUBMODULO + '.svg'">
    <mat-card-content class="p-32" *ngIf="submodule.IMAGENSUBMODULO === null"><mat-icon>{{ submodule.ICONOSUBMODULO }}</mat-icon></mat-card-content>
    <mat-card-title class="fz-15"> {{ submodule.NOMBRESUBMODULO }} </mat-card-title>
  </mat-card>

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