<div class="items-container animated fadeIn">
    <div id="navigation" class="mb-8">
        <div class="prev-page prevent-select indigo_primary_background mat-elevation-z8" [routerLink]="['/sam/ADSI']" matRipple>
            <mat-icon style="color: white;">arrow_back</mat-icon>
            <div class="page-name ml-4">Administrador del sistema</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="vertical-flex-container animated fadeIn" *ngIf="!isLoading && !hasError">
        <div class="vertical-flex-container-item mat-elevation-z8">
            <h2 style="text-align: center;">Usuarios conectados <span class="active-users-number">{{ connectedUsers }}</span></h2>
            <div *ngIf="connectedUsers == 0" style="font-weight: bold;">
                No hay usuarios conectados
            </div>
            <div class="users-container" *ngIf="connectedUsers > 0">
                <div class="user-info" *ngFor="let dis of usersConnected; let i = index" [ngClass]="{'pb-8': i == usersDisconnected.length - 1}"
                matTooltip="Ver detalles" matRipple (click)="openConnections(dis)">
                    <h3><span class="active">&bull;</span>{{ getUserName(dis) }}</h3>
                    <p><b>&Uacute;ltima conexi&oacute;n: </b>En l&iacute;nea</p>
                    <mat-divider *ngIf="i < usersDisconnected.length - 1"></mat-divider>
                </div>
            </div>
        </div>
        <div class="vertical-flex-container-item mat-elevation-z8">
            <h2 style="text-align: center;">Usuarios desconectados <span class="inactive-users-number">{{ disconnectedUsers }}</span></h2>
            <div *ngIf="disconnectedUsers == 0" style="font-weight: bold;">
                No hay usuarios desconectados
            </div>
            <div class="users-container" *ngIf="disconnectedUsers > 0">
                <div class="user-info" *ngFor="let dis of usersDisconnected; let i = index" [ngClass]="{'pb-8': i == usersDisconnected.length - 1}"
                matTooltip="Ver detalles" matRipple (click)="openConnections(dis)">
                    <h3><span class="inactive">&bull;</span>{{ getUserName(dis) }}</h3>
                    <p><b>&Uacute;ltima conexi&oacute;n: </b>{{ getLastConnection(dis) }}</p>
                    <mat-divider *ngIf="i < usersDisconnected.length - 1"></mat-divider>
                </div>
            </div>
        </div>
    </div>
</div>
