<!--<mat-card style="width: 75%; margin: 16px auto;" class="mat-elevation-z8">
    <mat-card-title style="text-align: center;">Administración de Usuarios y Perfiles</mat-card-title>
    <mat-card-content>
        <mat-tab-group mat-align-tabs="center" animationDuration="1500ms">
            <mat-tab label="Usuarios">
                <app-users-admin></app-users-admin>
            </mat-tab>
            <mat-tab label="Perfiles">
                <app-profiles-admin></app-profiles-admin>
            </mat-tab>
        </mat-tab-group>
    </mat-card-content>
</mat-card>-->
<div class="menu-container">
    <div class="route-container">
        <div class="back-element" (click)="goBack(1)">
            <mat-icon class="icon">home</mat-icon>
            <p>Inicio</p>
            <mat-icon class="arrow">chevron_right</mat-icon>
        </div>
        <div class="actual-element">
            <mat-icon class="icon">group</mat-icon>
            <p>Usuarios y perfiles</p>
        </div>
    </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-items" *ngIf="!isLoading && !hasError">
        <div class="menu-item-border" *ngFor="let submodule of submodules" (click)="openSubmodule(submodule.IDSUBMODULO)">
            <div class="menu-item">
                <mat-icon>{{ submodule.ICONOSUBMODULO }}</mat-icon>
                <p>{{ submodule.NOMBRESUBMODULO }}</p>
            </div>
        </div>
    </div>
</div>
