<div class="home-card" >
    <!--
    <h2 style="text-align: center; padding: 0; margin: 0;" *ngIf="!isLoading && !hasError">
        Hola {{ username }}, para comenzar, selecciona el módulo al que deseas ingresar
    </h2>
    <div class="flex-container" *ngIf="!isLoading && !hasError">
        <div class="grid-child" *ngFor="let module of modules; let i = index" (click)="navigate(modulesIDS[i])">
            <div class="shadow"></div>
            <img src='{{ "assets/img/modules/" + modulesIDS[i] + ".png"}}' alt="{{ module }}" width="100%">
            <div class="ripple" [id]='modulesIDS[i]'></div>
        </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="flex-container" *ngIf="!isLoading && !hasError && !maintenanceEnabled">
        <div class="connected-users">
            <h4>Usuarios conectados</h4>
            <div class="users-list">
                <div class="user-item" (click)="openUserDetails()">
                    <div class="background">
                        <p>JB</p>
                    </div>
                    <div class="status"></div>
                </div>
            </div>
            <button mat-button (click)="verTodos()">Ver todos</button>
        </div>
    </div>
    <div class="maintenance-container">
        <mat-icon class="gray_primary_font">construction</mat-icon>
        <h2>El sistema actualmente se encuentra en modo de mantenimiento</h2>
        <button mat-raised-button class="green_primary_background white_font" (click)="deactivateMaintenance()">Desactivar modo mantenimiento</button>
    </div>
</div>
