<section class="content">
    <div class="content-block">
        <div class="block-header">
            <div class="breadcrumb-main">
                <div class="row">
                    <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>
        </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:'short'}} </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-warning">{{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="loading-shade" *ngIf="dataSource.loading$ | async">
    <mat-spinner></mat-spinner>
</div>