const grid = new gridjs.Grid({
columns: [
  { data: (row) => row.id,
  name: 'Thumbnail',
  formatter: (cell) => gridjs.html(`<img src="/api/job/${cell}/thumbnail" style='width: 200px; min-width: 120px;'>`),
  sort: {enabled: false}
  },
  { id: 'name',
  name: 'Name',
  data: (row) => row.name,
  formatter: (name, row) => gridjs.html(`<a href="/ui/job/${row.cells[0].data}/full_details">${name}</a>`)
   },
  { id: 'renderer', data: (row) => `${row.renderer}-${row.renderer_version}`, name: 'Renderer' },
  { id: 'priority', name: 'Priority' },
  { id: 'status',
    name: 'Status',
    data: (row) => row,
    formatter: (cell, row) => gridjs.html(`
        <span class="tag ${(cell.status == 'running') ? 'is-hidden' : ''} ${(cell.status == 'cancelled') ?
        'is-warning' : (cell.status == 'error') ? 'is-danger' : (cell.status == 'not_started') ?
        'is-light' : 'is-primary'}">${cell.status}</span>
        <progress class="progress is-primary ${(cell.status != 'running') ? 'is-hidden': ''}"
        value="${(parseFloat(cell.percent_complete) * 100.0)}" max="100">${cell.status}</progress>
    `)},
  { id: 'time_elapsed', name: 'Time Elapsed' },
  { data: (row) => row.total_frames ?? 'N/A', name: 'Frame Count' },
  { id: 'client', name: 'Client'},
  { data: (row) => row.last_output ?? 'N/A',
    name: 'Last Output',
    formatter: (output, row) => gridjs.html(`<a href="/api/job/${row.cells[0].data}/logs">${output}</a>`)
  },
  { data: (row) => row,
    name: 'Commands',
    formatter: (cell, row) => gridjs.html(`
        <div class="field has-addons" style='white-space: nowrap; display: inline-block;'>
            <button class="button is-info" onclick="window.location.href='/ui/job/${row.cells[0].data}/full_details';">
            <span class="icon"><i class="fa-solid fa-info"></i></span>
            </button>
            <button class="button is-link" onclick="window.location.href='/api/job/${row.cells[0].data}/logs';">
            <span class="icon"><i class="fa-regular fa-file-lines"></i></span>
            </button>
            <button class="button is-warning is-active ${(cell.status != 'running') ? 'is-hidden': ''}" onclick="window.location.href='/api/job/${row.cells[0].data}/cancel?confirm=True&redirect=True';">
            <span class="icon"><i class="fa-solid fa-x"></i></span>
            </button>
            <button class="button is-success ${(cell.status != 'completed') ? 'is-hidden': ''}" onclick="window.location.href='/api/job/${row.cells[0].data}/download_all';">
            <span class="icon"><i class="fa-solid fa-download"></i></span>
            <span>${cell.file_count}</span>
            </button>
            <button class="button is-danger" onclick="window.location.href='/api/job/${row.cells[0].data}/delete?confirm=True&redirect=True'">
            <span class="icon"><i class="fa-regular fa-trash-can"></i></span>
            </button>
        </div>
        `),
    sort: false
  },
  { id: 'owner', name: 'Owner' }
],
autoWidth: true,
server: {
  url: '/api/jobs',
  then: results => results,
},
sort: true,
}).render(document.getElementById('table'));