<!--
  ~ 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 flex-wrap align-items-center">
  <h1 class="flex-grow-1">Intent distance</h1>

  <button
    nbButton
    ghost
    shape="round"
    (click)="search()"
    nbTooltip="Refresh"
  >
    <nb-icon icon="arrow-clockwise"></nb-icon>
  </button>
</div>

<nb-card
  class="mb-2"
  [nbSpinner]="loading"
>
  <nb-card-body>
    <form [formGroup]="form">
      <label class="label mr-2">Filter out occurrences below</label>
      <nb-form-field>
        <nb-icon
          nbPrefix
          icon="hash"
        ></nb-icon>
        <input
          nbInput
          fullWidth
          placeholder="Filter out occurrences below"
          type="number"
          min="1"
          formControlName="minOccurrences"
        />
      </nb-form-field>
    </form>
  </nb-card-body>
</nb-card>

<tock-no-data-found
  *ngIf="!loading && !dataSource?.length"
  title="No records found"
></tock-no-data-found>

<nb-card
  class="mb-1"
  [nbSpinner]="loading"
  *ngIf="dataSource?.length"
>
  <nb-card-body>
    <table class="table">
      <thead>
        <tr>
          <th
            style="width: 35%"
            class="border-top-0 lineHeight-1"
          >
            Intent 1
          </th>
          <th
            style="width: 35%"
            class="border-top-0 lineHeight-1"
          >
            Intent 2
          </th>
          <th
            style="width: 15%"
            class="border-top-0 lineHeight-1 text-center"
          >
            Occurrences
          </th>
          <th
            style="width: 15%"
            class="border-top-0 lineHeight-1 text-center"
          >
            Average Diff
          </th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let row of dataSource; index as i">
          <td>
            {{ row.intent1 }}
          </td>
          <td>
            {{ row.intent2 }}
          </td>
          <td class="text-center">
            {{ row.occurrences }}
          </td>
          <td class="text-center">
            {{ row.average | number: '1.0-3' }}
          </td>
        </tr>
      </tbody>
    </table>
  </nb-card-body>
</nb-card>

<tock-scroll-top-button></tock-scroll-top-button>
