<div style="display: flex; justify-content: space-between;">
  <app-btn-navigate [navigate]="'/sam/home'" [nameButton]="'Regresar'" [widthPosition]="'14px'" />
  <button mat-raised-button color="primary raised-button-background white_font mr-40 mt-14" ass="m-16" [matMenuTriggerFor]="menu">
    <mat-icon>construction</mat-icon> Herramienta de análisis
  </button>

  <mat-menu #menu="matMenu">
    <button mat-menu-item (click)="registerArtitlesToEquipment()">Registro de artículos existentes</button>
    <button mat-menu-item [routerLink]="['/sam/GIST/analysis-tool/article-clasificate']">Clasificación de artículos</button>
    <button mat-menu-item [routerLink]="['/sam/GIST/analysis-tool/value-stock']">Valor de inventarios por naturaleza y periodo</button>
    <button mat-menu-item [routerLink]="['/sam/GIST/analysis-tool/without-movements-article']">Lista de artículos sin movimientos</button>
    <button mat-menu-item [routerLink]="['/sam/GIST/analysis-tool/reset-articles']">Lista de artículos a restablecer</button>
  </mat-menu>
</div>

<div class="menu-title">
  <span>Gestión de inventario y/o stock</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>
  }

  <app-loading-card [isLoading]="isLoading" txtLoading="Cargando el menú de inventario y/o stock" />

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