<my-table
  #table
  key="JobsComponent"
  dataKey="uniqId"
  [defaultColumns]="columns"
  i18n-paginatorText
  paginatorText="jobs per page"
  columnConfig="true"
  [dataLoader]="dataLoader"
  [customParseQueryParams]="customParseQueryParams"
  [customUpdateUrl]="customUpdateUrl"
>
  <ng-template #totalTitle let-totalRecords>
    <ng-container i18n>{ totalRecords, plural, =0 {No job} =1 {1 job} other {{{ totalRecords | myNumberFormatter }} jobs}}</ng-container>
  </ng-template>

  <ng-template #captionRight>
    <div class="select-filter-block">
      <label for="jobType" i18n>Job type</label>

      <my-select-options
        class="select-job-type" inputId="jobType" filter="true"
        [items]="jobTypeItems" [(ngModel)]="jobType" (ngModelChange)="onJobStateOrTypeChanged()"
      ></my-select-options>
    </div>

    <div class="select-filter-block">
      <label for="jobState" i18n>Job state</label>

      <my-select-options
        class="select-job-state" inputId="jobState"
        [items]="jobStateItems" [(ngModel)]="jobState" (ngModelChange)="onJobStateOrTypeChanged()"
      ></my-select-options>
    </div>

    <div class="align-self-end">
      <my-button i18n-label label="Refresh" icon="refresh" (click)="table.loadData()"></my-button>
    </div>
  </ng-template>

  <ng-template #tableCells let-job>
    <td *ngIf="table.isColumnDisplayed('id')" class="job-id c-hand" [title]="job.id">{{ job.id }}</td>

    <td *ngIf="table.isColumnDisplayed('type')" class="job-type c-hand" >
      <span class="pt-badge ellipsis" [ngClass]="getRandomJobTypeBadge(job.type)">{{ job.type }}</span>
    </td>

    <td *ngIf="table.isColumnDisplayed('priority')" class="job-priority c-hand" >{{ job.priority }}</td>

    <td *ngIf="table.isColumnDisplayed('state') && table.isColumnDisplayed('state')" class="job-state c-hand" >
      <span class="ellipsis" [ngClass]="getJobStateClasses(job.state)">{{ job.state }}</span>
    </td>

    <td *ngIf="table.isColumnDisplayed('progress')" class="job-progress c-hand" >
      <ng-container *ngIf="hasProgress(job)">{{ getProgress(job) }}</ng-container>
    </td>

    <td *ngIf="table.isColumnDisplayed('createdAt')" class="job-date c-hand" >{{ job.createdAt }}</td>

    <td *ngIf="table.isColumnDisplayed('processed')" class="fs-7">
      <div>{{ job.processedOn }}</div>
      <div>{{ job.finishedOn}}</div>
    </td>
  </ng-template>

  <ng-template #expandedRow let-job>
    <div>
      <pre>{{ [
        'Job: ' + job.id,
        'Type: ' + job.type,
        'Processed on ' + (job.processedOn || '-'),
        'Finished on ' + (job.finishedOn || '-')
      ].join('\n') }}</pre>
    </div>

    <div>
      <pre>{{ job.data }}</pre>
    </div>

    <div>
      <pre>{{ job.error }}</pre>
    </div>
  </ng-template>

  <ng-template #noResults>
    @if (jobState === 'all') {
      @if (jobType === 'all') {
        <ng-container i18n>No jobs found.</ng-container>
      } @else {
        <ng-container i18n>No <code>{{ jobType }}</code> jobs found.</ng-container>
      }
    } @else {
      @if (jobType === 'all') {
        <ng-container i18n>No <span [ngClass]="getJobStateClasses(jobState)">{{ jobState }}</span> jobs found.</ng-container>
      } @else {
        <ng-container i18n>No <code>{{ jobType }}</code> jobs found that are <span [ngClass]="getJobStateClasses(jobState)">{{ jobState }}</span>.</ng-container>
      }
    }
  </ng-template>

</my-table>

