<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">{{'ERROR_LOGS' | translate}} <app-page-help-text
            [code]="'ERROR_LOGS'"></app-page-help-text> </span>
      </div>
    </div>
    <div class="card">
      <div class="header">
        <div class="d-flex">
          <input class="form-control" placeholder="{{'SEARCH_BY_MESSAGE' | translate}}" #input>
        </div>
      </div>
      <div class="body">
        <div class="table-responsive">
          <div class="grid-height-medium">
            <table mat-table [dataSource]="dataSource" matSortDisableClear class="w-100" matSort matSortActive="logged"
              matSortDirection="desc">
              <ng-container matColumnDef="action">
                <th class="table-column-fix-150" mat-header-cell *matHeaderCellDef> {{"ACTION" | translate}} </th>
                <td mat-cell style="width: 10%;" mat-cell *matCellDef="let nLog">
                  <button [routerLink]="['/logs', nLog.id]" class="btn btn-success btn-sm mr-3" type="button">
                    <i-feather name="info" class="small-icon"></i-feather>
                    <span class="d-none d-sm-inline"> {{"DETAIL" | translate}}</span>
                  </button>
                </td>
              </ng-container>
              <ng-container matColumnDef="logged">
                <th class="table-column-200" mat-header-cell *matHeaderCellDef mat-sort-header> {{"DATE_TIME" |
                  translate}} </th>
                <td class="table-column-200" mat-cell *matCellDef="let nLog">
                  {{nLog?.logged | utcToLocalTime:'full'}}
                </td>
              </ng-container>

              <ng-container matColumnDef="level">
                <th mat-header-cell *matHeaderCellDef mat-sort-header> {{"LEVEL" | translate}} </th>
                <td mat-cell *matCellDef="let nLog">
                  <ng-container [ngSwitch]="nLog?.level">
                    <span *ngSwitchCase="'Fatal'" class="badge bg-danger">{{'LEVEL_FATAL' | translate}}</span>
                    <span *ngSwitchCase="'Error'" class="badge bg-danger">{{'LEVEL_ERROR' | translate}}</span>
                    <span *ngSwitchCase="'Warn'" class="badge bg-warning">{{'LEVEL_WARN' | translate}}</span>
                    <span *ngSwitchDefault class="badge bg-primary">{{'LEVEL_DEFAULT' | translate}}</span>
                  </ng-container>
                </td>
              </ng-container>

              <ng-container matColumnDef="message">
                <th class="table-column-500" mat-header-cell *matHeaderCellDef mat-sort-header> {{"MESSAGE" |
                  translate}} </th>
                <td class="table-column-500" mat-cell *matCellDef="let nLog">
                  {{nLog.message }}
                </td>
              </ng-container>
              <ng-container matColumnDef="footer">
                <td mat-footer-cell colspan="5" *matFooterCellDef>
                  <mat-paginator [length]="nLogResource.totalCount" [pageSize]="nLogResource.pageSize"
                    [pageSizeOptions]="[10, 20, 30]"></mat-paginator>
                </td>
              </ng-container>
              <tr *matNoDataRow>
                <td colspan="5">
                  <div class="m-2">
                    <b> {{'NO_DATA_FOUND' | translate}}</b>
                  </div>
                </td>
              </tr>
              <tr mat-header-row *matHeaderRowDef="displayedColumns;sticky: true"></tr>
              <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
              <tr mat-footer-row *matFooterRowDef="['footer'];sticky: true"></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>