<script lang="ts">
  import Nav from '../Nav.svelte';
  import Tabs from '../Tabs.svelte';
  import { resolve } from '$app/paths';

  const { data, params } = $props();
</script>

<svelte:head>
  <title>{data.owner} / {data.repo}</title>
</svelte:head>

<div class="p-3">
  <Nav user={params.user} repo={params.repo} path={[]} link={true} />

  <Tabs
    user={params.user}
    repo={params.repo}
    login={data.login}
    channel={data.channel}
    active="jobs" />

  <div class="p-3">
    <h1 class="mt-5">Jobs</h1>
    <table class="mt-10 table">
      <thead> <tr><td>Job</td><td>Started</td><td>Ended</td><td>Status</td> </tr></thead>
      <tbody>
        {#each data.jobs as job (job.id)}
          <tr>
            <td>
              <a
                class="link link-primary"
                href={resolve('/[user]/[repo]/jobs/[job]', {
                  job: job.id,
                  ...params
                })}>{job.id}</a>
            </td>
            <td>
              {job.started}
            </td>
            <td>
              {job.ended}
            </td>
            <td>
              {job.status}
            </td>
          </tr>
        {/each}
      </tbody>
    </table>
  </div>
</div>