<my-table
  #table
  key="RunnerJobListComponent"
  dataKey="uuid"
  [defaultColumns]="columns"
  i18n-paginatorText
  paginatorText="jobs per page"
  columnConfig="true"
  [dataLoader]="dataLoader"
  [bulkActions]="bulkActions"
  >
  <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>
    <my-advanced-input-filter class="me-2" [filters]="inputFilters" (search)="table.onSearch($event)"></my-advanced-input-filter>

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

  <ng-template #tableCells let-runnerJob>
    @if (table.isColumnDisplayed('uuid')) {
      <td>{{ runnerJob.uuid }}</td>
    }

    @if (table.isColumnDisplayed('type')) {
      <td>
        <span class="pt-badge ellipsis" [title]="runnerJob.type" [ngClass]="getRandomRunnerTypeBadge(runnerJob.type)">{{ runnerJob.type }}</span>
      </td>
    }

    @if (table.isColumnDisplayed('state')) {
      <td>
        <span class="pt-badge ellipsis" [title]="runnerJob.state.label" [ngClass]="getStateBadgeColor(runnerJob)">{{ runnerJob.state.label }}</span>
      </td>
    }

    @if (table.isColumnDisplayed('priority')) {
      <td>{{ runnerJob.priority }}</td>
    }

    @if (table.isColumnDisplayed('progress')) {
      <td>
        @if (runnerJob.progress) {
          {{ runnerJob.progress }}%
        }
      </td>
    }

    @if (table.isColumnDisplayed('runner')) {
      <td>
        @if (runnerJob.runner?.name) {
          <div class="pt-badge" [ngClass]="getRandomRunnerNameBadge(runnerJob.runner.name)">
            {{ runnerJob.runner.name }}
          </div>
        }
      </td>
    }
    @if (table.isColumnDisplayed('createdAt')) {
      <td>{{ runnerJob.createdAt }}</td>
    }

    @if (table.isColumnDisplayed('processed')) {
      <td class="fs-7">
        <div>{{ runnerJob.startedAt }}</div>
        <div>{{ runnerJob.finishedAt}}</div>
      </td>
    }
  </ng-template>

  <ng-template #actionCell let-runnerJob>
    <my-action-dropdown
      placement="bottom-right top-right left auto" container="body"
      i18n-label label="Actions" [actions]="actions" [entry]="runnerJob"
    ></my-action-dropdown>
  </ng-template>

  <ng-template #expandedRow let-runnerJob>
    <div class="mt-2 fs-7 font-monospace">
      Parent job: {{ runnerJob.parent?.uuid || '-' }} <br />
      Processed on {{ (runnerJob.startedAt || '-') }} <br />
      Finished on {{ (runnerJob.finishedAt || '-') }} <br />
    </div>

    <div class="mt-2">
      <strong i18n>Payload:</strong>
      <pre>{{ runnerJob.payload }}</pre>
    </div>

    <div class="mt-2">
      <strong i18n>Private payload:</strong>
      <pre>{{ runnerJob.privatePayload }}</pre>
    </div>

    @if (runnerJob.error) {
      <pre class="text-danger" >{{ runnerJob.error }}</pre>
    }
  </ng-template>

  <ng-template #noResults>
    <ng-container i18n>No runner jobs found.</ng-container>
  </ng-template>
</my-table>
