<section class="content">
  <div class="container-fluid">
    <div class="row">
      <div class="col-lg-3 col-xs-6">
        <div class="small-box bg-green">
          <div class="inner">
            <h3>{{onlinerUsersCount + 1}}</h3>
            <p>{{'ONLINE_USERS' | translate }}</p>
          </div>
          <div class="icon">
            <i class="fa fa-user-plus"></i>
          </div>
        </div>
      </div>
      <div class="col-lg-3 col-xs-6">
        <div class="small-box bg-aqua">
          <div class="inner">
            <h3>{{totalUserCount}}</h3>
            <p>{{'TOTAL_USERS' | translate }}</p>
          </div>
          <div class="icon">
            <i class="fa fa-users"></i>
          </div>
        </div>
      </div>
      <div class="col-lg-3 col-xs-6">
        <div class="small-box bg-warning">
          <div class="inner">
            <h3>{{activeUserCount}}</h3>
            <p>{{'ACTIVE_USERS' | translate }}</p>
          </div>
          <div class="icon">
            <i class="fas fa-user-check"></i>
          </div>
        </div>
      </div>
      <div class="col-lg-3 col-xs-6">
        <div class="small-box bg-danger">
          <div class="inner">
            <h3>{{inactiveUserCount}}</h3>
            <p>{{'INACTIVE_USERS' | translate }}</p>

          </div>
          <div class="icon">
            <i class="fa fa-user-times"></i>
          </div>
        </div>
      </div>

    </div>
    <div class="row mb-3">
      <div class="col-md-8 col-sm-12">
        <div class="row">
          <div class="col-sm-12">
            <div class="content-header">
              <span class="mb-0 page-title">{{'RECENTLY_REGISTERED' | translate}}</span>
              <app-page-help-text [code]="'RECENTLY_REGISTERED'"></app-page-help-text>
            </div>
          </div>
        </div>
        <div class="row mt-2">
          <div class="col-sm-12">
            <div class="box">
              <div class="box-body">
                <div class="table-responsive">
                  <div class="table table-container">
                    <table mat-table [dataSource]="recentlyRegisteredUsers">
                      <!-- userName Column -->
                      <ng-container matColumnDef="userName">
                        <th mat-header-cell *matHeaderCellDef>
                          {{'EMAIL' | translate }}
                        </th>
                        <td mat-cell *matCellDef="let element"> {{element.userName}} </td>
                      </ng-container>

                      <!-- firstName Column -->
                      <ng-container matColumnDef="firstName">
                        <th mat-header-cell *matHeaderCellDef>
                          {{'FIRST_NAME' | translate }}
                        </th>
                        <td mat-cell *matCellDef="let element"> {{element.firstName}} </td>
                      </ng-container>

                      <!-- lastName Column -->
                      <ng-container matColumnDef="lastName">
                        <th mat-header-cell *matHeaderCellDef>
                          {{'LAST_NAME' | translate }}
                        </th>
                        <td mat-cell *matCellDef="let element"> {{element.lastName}} </td>
                      </ng-container>

                      <!-- phoneNumber Column -->
                      <ng-container matColumnDef="phoneNumber">
                        <th mat-header-cell *matHeaderCellDef>
                          {{'PHONE' | translate }}
                        </th>
                        <td mat-cell *matCellDef="let element"> {{element.phoneNumber}} </td>
                      </ng-container>

                      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
                      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
                    </table>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-md-4 col-sm-12">
        <div class="row">
          <div class="col-sm-12">
            <div class="content-header">
              <span class="mb-0 page-title">{{'ONLINE_USERS' | translate}}</span>
              <app-page-help-text [code]="'ONLINE_USERS'"></app-page-help-text>
            </div>
          </div>
        </div>
        <div class="row mt-2">
          <div class="col-sm-12">
            <div class="box">
              <div class="box-body">
                <div class="table-container">
                  <ng-container *ngIf="onlineUsers && onlineUsers.length>0; else tempNoRecord">
                    <ul class="products-list">
                      <li class="item" *ngFor="let onlineUser of onlineUsers">
                        <div class="product-img">
                          <img *ngIf="!onlineUser.profilePhoto" src="../../assets/images/user.jpg" alt="User Image"
                            class="img-circle elevation-2 img-size-50">
                          <img *ngIf="onlineUser.profilePhoto" [src]="onlineUser.profilePhoto" alt="User Image"
                            class="img-circle elevation-2 img-size-50">
                        </div>
                        <div class="product-info">
                          <a class="product-title">{{onlineUser.firstName}} {{onlineUser.lastName}}</a>
                          <span class="product-description">
                            {{onlineUser.email}}
                          </span>
                        </div>
                      </li>
                    </ul>
                  </ng-container>
                  <ng-template #tempNoRecord>
                    <tr>
                      <td>
                        <b>
                          {{'CURRENTLY_NO_USER_LOGIN_OTHER_THAN_YOU' | translate}}
                        </b>
                      </td>
                    </tr>
                  </ng-template>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-sm-12">
        <div class="content-header mb-2">
          <span class="mb-0 page-title">{{'REMINDERS' | translate}} </span>
          <app-page-help-text code="REMINDERS"></app-page-help-text>
        </div>
      </div>
    </div>
    <div class="box">
      <app-calender-view></app-calender-view>
    </div>
  </div>
</section>