<!--
  ~ Copyright (C) 2019 Robert Bosch GmbH Copyright (C) 2019 Robert Bosch Manufacturing Solutions GmbH, Germany. All rights reserved.
  -->

<bci-page-content>
  <h2 class="page-heading">Logger service</h2>

  <bci-commandbar [showSearch]="false" [showAdd]="false">
    <bci-commandbar-quickfilters>
      <bci-commandbar-item>
        <button (click)="logInfo()" bciIntegratedButton>Add info log</button>
        <button (click)="logDebug()" bciIntegratedButton>Add debug log</button>
        <button (click)="logError()" bciIntegratedButton>Add error log</button>
      </bci-commandbar-item>
    </bci-commandbar-quickfilters>
  </bci-commandbar>

  <div style="margin-top: 16px">Enabled LogLevel: {{ getLogLevel() }}</div>

  <mat-table #table [dataSource]="dataSource">
    <ng-container matColumnDef="timestamp">
      <mat-header-cell *matHeaderCellDef>TimeStamp</mat-header-cell>
      <mat-cell *matCellDef="let element"> {{ element.timestamp }}</mat-cell>
    </ng-container>

    <ng-container matColumnDef="loglevel">
      <mat-header-cell *matHeaderCellDef>LogLevel</mat-header-cell>
      <mat-cell *matCellDef="let element"> {{ element.loglevel }} </mat-cell>
    </ng-container>

    <ng-container matColumnDef="message">
      <mat-header-cell *matHeaderCellDef>Message</mat-header-cell>
      <mat-cell *matCellDef="let element"> {{ element.message }}</mat-cell>
    </ng-container>

    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
  </mat-table>

  <mat-paginator #paginator [pageSizeOptions]="[5, 10, 20]" [pageSize]="10"> </mat-paginator>
</bci-page-content>
