<section class="content">
  <div class="container-fluid">
    <div class="row align-items-center">
      <!-- Left-hand side: Title -->
      <div class="col-md-6 mb-2">
        <span class="mb-0 page-title">{{'CURRENT_LOGGED_USER' | translate}}</span>
        <app-page-help-text [code]="'ONLINE_USERS'"></app-page-help-text>
      </div>
    </div>
    <div class="card">
      <div class="body">
        <div class="grid-height-medium">
          <div class="table-responsive online-user">
            <table mat-table [dataSource]="onlineUsers">
              <ng-container matColumnDef="firstName">
                <th mat-header-cell *matHeaderCellDef> {{'FIRST_NAME' | translate}} </th>
                <td mat-cell *matCellDef="let emailSMTPSetting"> {{emailSMTPSetting.firstName}} </td>
              </ng-container>
              <ng-container matColumnDef="lastName">
                <th mat-header-cell *matHeaderCellDef> {{'LAST_NAME' | translate}} </th>
                <td mat-cell *matCellDef="let emailSMTPSetting"> {{emailSMTPSetting.lastName}} </td>
              </ng-container>
              <ng-container matColumnDef="email">
                <th mat-header-cell *matHeaderCellDef> {{'EMAIL' | translate}} </th>
                <td mat-cell *matCellDef="let emailSMTPSetting"> <i class="fas fa-circle text-success"></i>
                  {{emailSMTPSetting.email}} </td>
              </ng-container>
              <ng-container matColumnDef="action">
                <th mat-header-cell *matHeaderCellDef> {{'ACTION' | translate}} </th>
                <td mat-cell *matCellDef="let onlineUser">
                  <button type="button" class="btn btn-danger btn-sm" (click)="onForceLogout(onlineUser.id)">
                    <i class="fas fa-sign-out-alt"></i>
                    <span class="d-none d-sm-inline"> {{'FORCEFULLY_LOGOUT' | translate}}</span>
                  </button>
                </td>
              </ng-container>
              <tr *matNoDataRow>
                <td colspan="4">
                  <div class="m-2">
                    <b>
                      {{'CURRENTLY_NO_USER_LOGIN_OTHER_THAN_YOU' | translate}}
                    </b>
                  </div>
                </td>
              </tr>
              <tr mat-header-row *matHeaderRowDef="displayedColumns;sticky: true"></tr>
              <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>