<section class="content">
  <div class="container-fluid">
    <div class="row align-items-center">
      <div class="col-md-6 mb-2">
        <span class="mb-0 page-title">{{'LOGIN_AUDIT_LOGS' | translate}}</span>
        <app-page-help-text [code]="'LOGIN_AUDIT_LOGS'"></app-page-help-text>
      </div>
    </div>
    <div class="card">
      <div class="header">
        <div class="m-2 col-sm-5">
          <input class="form-control" placeholder="{{'SEARCH_BY_USERNAME' | translate}}" #input>
        </div>
      </div>
      <div class="body">
        <div class="table-responsive">
          <div class="grid-height-medium">
            <table mat-table [dataSource]="dataSource" matSort matSortActive="loginTime" matSortDirection="desc">
              <ng-container matColumnDef="loginTime">
                <th mat-header-cell *matHeaderCellDef mat-sort-header>
                  {{'DATE_TIME' | translate}}
                </th>
                <td mat-cell *matCellDef="let audit"> {{audit?.loginTime | utcToLocalTime:'full'}} </td>
              </ng-container>
              <ng-container matColumnDef="userName">
                <th mat-header-cell *matHeaderCellDef mat-sort-header>
                  {{'EMAIL' | translate}}
                </th>
                <td mat-cell *matCellDef="let audit"> {{audit.userName}} </td>
              </ng-container>
              <ng-container matColumnDef="status">
                <th mat-header-cell *matHeaderCellDef mat-sort-header>
                  {{'STATUS' | translate}}
                </th>
                <td mat-cell *matCellDef="let audit">
                  <span *ngIf="audit?.status=='Success'" class="badge bg-success">{{audit?.status?.toUpperCase() |
                    translate}}</span>
                  <span *ngIf="audit?.status=='Error'" class="badge bg-danger">{{audit?.status?.toUpperCase() |
                    translate}}</span>
                </td>
              </ng-container>
              <ng-container matColumnDef="remoteIP">
                <th mat-header-cell *matHeaderCellDef mat-sort-header> {{'IP_ADDRESS' | translate}} </th>
                <td mat-cell *matCellDef="let audit"> {{audit.remoteIP}} </td>
              </ng-container>

              <ng-container matColumnDef="latitude">
                <th mat-header-cell *matHeaderCellDef>{{'LATITUDE' | translate}} </th>
                <td mat-cell *matCellDef="let audit"> {{audit.latitude}} </td>
              </ng-container>

              <ng-container matColumnDef="longitude">
                <th mat-header-cell *matHeaderCellDef> {{'LONGITUDE' | translate}} </th>
                <td mat-cell *matCellDef="let audit"> {{audit.longitude}} </td>
              </ng-container>
              <ng-container matColumnDef="footer">
                <td mat-footer-cell colspan="6" *matFooterCellDef>
                  <mat-paginator [length]="loginAuditResource.totalCount" [pageSize]="loginAuditResource.pageSize"
                    [pageSizeOptions]="[10, 20, 30]"></mat-paginator>
                </td>
              </ng-container>
              <tr mat-header-row *matHeaderRowDef="displayedColumns;sticky: true"></tr>
              <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
              <tr mat-footer-row *matFooterRowDef="footerToDisplayed;sticky: true"></tr>
              <tr *matNoDataRow>
                <td>
                  <div class="m-2">
                    <b> {{'NO_DATA_FOUND' | translate}}</b>
                  </div>
                </td>
              </tr>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
<div class="spinner-container" *ngIf="dataSource.loading$ | async">
  <div class="spinner-border text-primary" role="status">
    <span class="visually-hidden">Loading...</span>
  </div>
</div>