<!--
  ~ Copyright (C) 2017/2021 e-voyageurs technologies
  ~
  ~ Licensed under the Apache License, Version 2.0 (the "License");
  ~ you may not use this file except in compliance with the License.
  ~ You may obtain a copy of the License at
  ~
  ~ http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  -->

<div class="d-flex align-items-end flex-wrap mt-3 mb-2">
  <h1 class="flex-grow-1">Users logs</h1>
  <tock-pagination
    *ngIf="dataSource && dataSource.length"
    [pagination]="pagination"
    (onPaginationChange)="search()"
  ></tock-pagination>
</div>

<nb-card class="mb-1">
  <nb-card-body>
    <table
      *ngIf="dataSource && dataSource.length !== 0"
      class="table table-sm"
    >
      <thead>
        <tr>
          <th
            style="width: 18%"
            class="border-top-0 pb-3"
          >
            Date
          </th>
          <th
            style="width: 40%"
            class="border-top-0 pb-3"
          >
            Type
          </th>
          <th
            style="width: 12%"
            class="border-top-0 pb-3"
          >
            User
          </th>
          <th
            style="width: 20%"
            class="border-top-0 pb-3"
          >
            Application
          </th>
          <th
            style="width: 5%"
            class="border-top-0 pb-3"
          >
            Data
          </th>
          <th
            style="width: 5%"
            class="border-top-0 pb-3"
          >
            Error
          </th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let row of dataSource; index as i">
          <td class="text-nowrap">
            {{ row.date | amDateFormat: 'YYYY-MM-DD HH:mm' }}
          </td>
          <td>
            {{ row.actionType }}
          </td>
          <td>
            {{ row.login }}
          </td>
          <td>
            {{ appName(row.applicationId) }}
          </td>
          <td>
            <button
              nbButton
              ghost
              *ngIf="row.newData"
              (click)="displayData(row)"
            >
              <nb-icon icon="eye"></nb-icon>
            </button>
          </td>
          <td>
            <div
              class="error-icon"
              *ngIf="row.error"
            >
              <nb-icon
                icon="exclamation-circle"
                status="danger"
              ></nb-icon>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </nb-card-body>
</nb-card>

<div class="d-flex flex-row-reverse">
  <tock-pagination
    *ngIf="dataSource && dataSource.length"
    [pagination]="pagination"
    (onPaginationChange)="search()"
  ></tock-pagination>
</div>
