<div class="items-container animated fadeIn prevent-select">
  <div class="row-tools-bar no-padding">
    <button mat-raised-button class="raised-button-background mb-16" [routerLink]="['/sam/ADSI']">
      Administrador del sistema<mat-icon>arrow_back</mat-icon>
    </button>
  </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" *ngIf="!isLoading && !hasError">
    <div class="vertical-flex-container-item mat-elevation-z8 animated fadeIn" *ngIf="monitoringConnectionsEnabled">
      <h2 style="text-align: center;">Usuarios conectados <span class="active-users-number">{{ connectedUsers }}</span></h2>
      <div *ngIf="connectedUsers == 0" style="font-weight: 500;">
        No hay usuarios conectados
      </div>
      <div class="users-container" *ngIf="connectedUsers > 0">
        <div class="user-info" *ngFor="let dis of usersConnected; let i = index" matTooltip="Ver detalles" matRipple (click)="openConnections(dis)">
          <h3><span class="active">&bull;</span> {{ usersNames.get(dis) }}</h3>
          <p><b>&Uacute;ltima conexi&oacute;n: </b>En l&iacute;nea</p>
        </div>
      </div>
    </div>
    <div class="vertical-flex-container-item mat-elevation-z8 animated fadeIn" *ngIf="monitoringConnectionsEnabled">
      <h2 style="text-align: center;">Usuarios desconectados <span class="inactive-users-number">{{ disconnectedUsers }}</span></h2>
      <div *ngIf="disconnectedUsers == 0" style="font-weight: 500;">
        No hay usuarios desconectados
      </div>
      <div class="users-container" *ngIf="disconnectedUsers > 0">
        <div class="user-info" *ngFor="let dis of usersDisconnected; let i = index" matTooltip="Ver detalles" matRipple (click)="openConnections(dis)">
          <h3><span class="inactive">&bull;</span> {{ usersNames.get(dis) }}</h3>
          <p><span>&Uacute;ltima conexi&oacute;n:</span> {{ usersLastConnections.get(dis) }}</p>
        </div>
      </div>
    </div>
  </div>
</div>