
<div class="row fullPage">

  <!-- Training snippets datagrid -->
  <div class="mt-4 col-12">

    <!-- Top parts containing title of component and search textbox -->
    <div class="row align-items-center me-1">

      <div class="col-lg-5 col-12 mb-lg-0 mb-2">
        <h3 class="mb-2 fw-bold">Machine Learning history</h3>
        <p class="text-muted">
          These are questions and answers having been asked towards your AI models and might also serve as
          a cache depending upon how your model is configured
        </p>
      </div>

      <div class="col-lg-7 col-12">

        <!-- Search textbox -->
        <app-filter
          #searchBox
          (filterList)="filterList($event)"
          buttonText="Leads"
          button2Text="Questionnaires"
          button3Text="Conversations"
          (buttonClick)="exportLeads()"
          (button2Click)="exportQuestionnaires()"
          (button3Click)="exportConversations()"
          [buttonDisabled]="!type"
          [button2Disabled]="!type"
          [button3Disabled]="!type"
          [(type)]="type"
          [types]="types">
        </app-filter>

      </div>
    </div>

    <div class="table-responsive mt-4">

      <table
        mat-table
        [dataSource]="dataSource"
        matSort
        matSortActive="created"
        matSortDirection="desc"
        class="w-100 borderless hoverable"
        (matSortChange)="sortData($event)">

        <!-- Prompt column -->
        <ng-container matColumnDef="prompt">
          <th
            mat-header-cell
            *matHeaderCellDef
            class="text-nowrap text-truncate px-sm-3"
            mat-sort-header>
            Prompt
          </th>
          <td
            mat-cell
            *matCellDef="let element"
            class="text-nowrap text-truncate px-sm-3">
            {{element.prompt}}
          </td>
        </ng-container>

        <!-- User ID column -->
        <ng-container matColumnDef="user_id">
          <th
            mat-header-cell
            *matHeaderCellDef
            class="pe-sm-3 small-table-column text-nowrap"
            mat-sort-header>
            User ID
          </th>
          <td
            mat-cell
            *matCellDef="let element"
            class="pe-sm-3 text-nowrap small-table-column">

            <button
              mat-button
              color="primary"
              style="width:100%;text-align:left;"
              (click)="filterOnUserId($event, element.user_id)">
              {{element.user_id}}
            </button>

          </td>
        </ng-container>

        <!-- Created column -->
        <ng-container matColumnDef="created">
          <th
            mat-header-cell
            *matHeaderCellDef
            class="pe-sm-3 small-table-column"
            mat-sort-header>
            Created
          </th>
          <td
            mat-cell
            *matCellDef="let element"
            class="pe-sm-3 text-nowrap small-table-column">
            {{element.created | since}}
          </td>
        </ng-container>

        <!-- Type column -->
        <ng-container matColumnDef="type">
          <th
            mat-header-cell
            *matHeaderCellDef
            class="pe-sm-3 small-table-column"
            mat-sort-header>
            Type
          </th>
          <td
            mat-cell
            *matCellDef="let element"
            class="pe-sm-3 text-nowrap small-table-column">
            {{element.type}}
          </td>
        </ng-container>

        <!-- Pushed column -->
        <ng-container matColumnDef="finish_reason">
          <th
            mat-header-cell
            *matHeaderCellDef
            class="px-sm-3 small-table-column"
            mat-sort-header>
            Reason
          </th>
          <td
            mat-cell
            *matCellDef="let element"
            class="ps-3">
            <span class="status {{getStatus(element.finish_reason)}} me-1 small-table-column"></span>
          </td>
        </ng-container>

        <!-- Action column -->
        <ng-container matColumnDef="action">
          <th
            mat-header-cell
            *matHeaderCellDef
            class="ps-sm-3 small-table-column">
            Actions
          </th>
          <td
            mat-cell
            *matCellDef="let element"
            class="ps-sm-3 text-nowrap small-table-column">

            <button
              mat-button
              color="primary"
              (click)="showDetails(element)">
              Edit
            </button>

            <button
              mat-button
              color="warn"
              (click)="delete(element)">
              Delete
            </button>

          </td>
        </ng-container>

        <tr mat-header-row *matHeaderRowDef="displayedColumns;sticky: true"></tr>
        <tr mat-row *matRowDef="let row; columns: displayedColumns;" [class.questionnaire]="row.questionnaire === 1"></tr>

      </table>

    </div>

    <!-- Pager -->
    <mat-paginator
      [length]="count"
      [pageIndex]="filter.offset / filter.limit"
      [pageSize]="filter.limit"
      (page)="page($event)">
    </mat-paginator>

    <div class="text-end">

      <button
        mat-flat-button
        [disabled]="!type || !filter || !filter['filter'] || filter['filter'] === ''"
        (click)="exportConversation()">
        Conversation
      </button>

    </div>

  </div>

</div>