
<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 training data</h3>
        <p class="text-muted">
          This is your Machine Learning training data, that you can use to train your
          own AI model to answer questions related to your problem
        </p>
      </div>

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

        <!-- Search textbox -->
        <app-filter
          (filterList)="filterList($event)"
          buttonText="Add"
          buttonTooltip="Create a new text training snippet"
          [buttonDisabled]="!type"
          (buttonClick)="create()"
          button2Text="Spice"
          button2Tooltip="Scrape a single web page to 'spice' your model"
          (button2Click)="spice()"
          [button2Disabled]="!type"
          button3Text="Func"
          button3Tooltip="Create a new AI function and add to your type"
          (button3Click)="addWorkflow()"
          [button3Disabled]="!type"
          button4Text="Widget"
          button4Tooltip="Add a widget to your type"
          (button4Click)="addWidget()"
          [button4Disabled]="!type"
          [(type)]="type"
          checkBoxText="VSS"
          checkBoxTooltip="Use vector semantic search to search for snippets (ONLY works if you have vectorized your type)"
          [types]="types">
        </app-filter>

      </div>
    </div>

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

      <table
        mat-table
        multiTemplateDataRows
        [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 px-sm-3"
            mat-sort-header>
            Prompt
          </th>
          <td
            mat-cell
            *matCellDef="let element"
            class="text-truncate px-sm-3">
            {{getPrompt(element)}}
          </td>
        </ng-container>

        <!-- URI column -->
        <ng-container matColumnDef="uri">
          <th
            mat-header-cell
            *matHeaderCellDef
            class="text-nowrap px-sm-3"
            mat-sort-header>
            URI
          </th>
          <td
            mat-cell
            *matCellDef="let element"
            class="text-truncate-2 px-sm-3">
            {{element.uri}}
          </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 small-table-column">
            {{element.type}}
          </td>
        </ng-container>

        <!-- Tokens column -->
        <ng-container matColumnDef="tokens">
          <th
            mat-header-cell
            *matHeaderCellDef
            class="pe-sm-3 small-table-column"
            mat-sort-header>
            Tokens
          </th>
          <td
            mat-cell
            *matCellDef="let element"
            class="pe-sm-3 small-table-column">
            {{element.tokens}}
          </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>

        <!-- Cached column -->
        <ng-container matColumnDef="cached">
          <th
            mat-header-cell
            *matHeaderCellDef
            class="px-sm-3 small-table-column"
            mat-sort-header>
            Cached
          </th>
          <td mat-cell
            *matCellDef="let element"
            class="ps-3">
            <span class="status {{element.cached > 0 ? 'cached ' : ' '}}me-1 small-table-column"></span>
          </td>
        </ng-container>

        <!-- Pushed column -->
        <ng-container matColumnDef="pushed">
          <th
            mat-header-cell
            *matHeaderCellDef
            class="px-sm-3 small-table-column"
            mat-sort-header>
            Pushed
          </th>
          <td mat-cell
            *matCellDef="let element"
            class="ps-3">
            <span class="status {{element.pushed > 0 ? 'pushed ' : ' '}}me-1 small-table-column"></span>
          </td>
        </ng-container>

        <!-- Vectorised column -->
        <ng-container matColumnDef="embedding_vss">
          <th
            mat-header-cell
            *matHeaderCellDef
            class="px-sm-3 small-table-column"
            mat-sort-header>
            Vectorised
          </th>
          <td mat-cell
            *matCellDef="let element"
            class="ps-3">
            <span class="status {{element.embedding_vss ? 'pushed ' : ' '}}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)="editSnippet($event, element)">
              Edit
            </button>

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

          </td>
        </ng-container>

        <tr
          mat-header-row
          *matHeaderRowDef="displayedColumns;sticky: true">
        </tr>

        <tr
          mat-row
          [class]="row.cssClassName"
          *matRowDef="let row; columns: displayedColumns;">
        </tr>

      </table>

    </div>

    <!-- Pager -->
    <mat-paginator
      [length]="count"
      [pageIndex]="filter.offset / filter.limit"
      [pageSize]="filter.limit"
      (page)="page($event)">
    </mat-paginator>
  
    <div
      class="mt-3 text-end"
      *ngIf="dataSource && dataSource.length > 0">

      <button
        matTooltip="Mark all filtered snippets as unpushed"
        (click)="untrainAll()"
        [disabled]="filterOnVss"
        mat-button>
        Mark as unpushed
      </button>

      <button
        matTooltip="Mark all filtered snippets as pushed"
        (click)="trainAll()"
        [disabled]="filterOnVss"
        mat-button>
        Mark as pushed
      </button>

      <button
        matTooltip="Exports all filtered training snippets as a CSV file"
        (click)="export()"
        [disabled]="filterOnVss"
        mat-button>
        Export
      </button>

      <button
        color="warn"
        matTooltip="Delete all filtered snippets"
        (click)="deleteAll()"
        [disabled]="filterOnVss"
        mat-button>
        Delete all
      </button>

    </div>

  </div>

</div>
