<script lang="ts">
  import { timefmt } from '../../../helpers.js';
  import Nav from '../Nav.svelte';
  import Tabs from '../Tabs.svelte';
  import ChannelBar from '../ChannelBar.svelte';
  import type { PageData } from './$types';

  export let data: PageData;
  const channel = data.channel ? data.channel : 'main';
</script>

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

<div class="p-3">
  <Nav user={data.owner} repo={data.repo} link={true} />

  <Tabs user={data.owner} repo={data.repo} channel={data.channel} active="changes" />
  <div class="pt-3">
    <ChannelBar
      owner={data.owner}
      repo={data.repo}
      {channel}
      channels={data.channels}
      token={data.token}
      tab="change"
      can_delete={true} />
    <div class="list">
      {#each data.hashes as hash}
        <div class="list-row flex py-8" id={hash.hash}>
          {#if !hash.authors?.length}
            <div class="ms-16" id={hash.hash}>
              <a href="/{data.owner}/{data.repo}/change/{hash.hash}"
                ><code class="hash">{hash.hash}</code>
              </a>
            </div>
          {:else if hash.author?.login}
            <div class="size-12">
              <a href="/{hash.author.login}">
                <img class="profile-picture" alt="" src="/identicon/{hash.author.login}/small" />
              </a>
            </div>
            <div>
              <div>
                <a class="link" href="/{data.owner}/{data.repo}/change/{hash.hash}"
                  >{hash.message}</a>
              </div>
              <div>
                Created by&nbsp;<a class="change-authors link" href="/{hash.author.login}"
                  >{hash.author.login}</a
                >&nbsp;{timefmt(hash.timestamp)}
              </div>
              <div>
                <a href="/{data.owner}/{data.repo}/change/{hash.hash}"
                  ><code class="hash">{hash.hash}</code></a>
              </div>
            </div>
          {:else if hash.authors[0]?.login}
            <div class="size-12 my-auto">
              <img class="profile-picture" alt="" src="/identicon/{hash.authors[0].login}/small" />
            </div>
            <div>
              <a class="link" href="/{data.owner}/{data.repo}/change/{hash.hash}">{hash.message}</a>
              <div class="break-all">
                Created&nbsp;by&nbsp;<a class="link" href="/{hash.authors[0].login}"
                  >{hash.authors[0].login}</a
                >&nbsp;{timefmt(hash.timestamp)}
              </div>

              <div class="break-all">
                <a href="/{data.owner}/{data.repo}/change/{hash.hash}"
                  ><code class="hash">{hash.hash}</code></a>
              </div>
            </div>
          {:else}
            <div class="size-12 my-auto">
              <img alt="" class="profile-picture" src="/identicon/question/small" />
            </div>
            <div>
              <a class="link" href="/{data.owner}/{data.repo}/change/{hash.hash}">{hash.message}</a>
              <div class="break-all">
                Created&nbsp;by&nbsp;{hash.authors[0].key}&nbsp;{timefmt(hash.timestamp)}
              </div>

              <div class="break-all">
                <a href="/{data.owner}/{data.repo}/change/{hash.hash}"
                  ><code class="hash">{hash.hash}</code></a>
              </div>
            </div>
          {/if}
          {#if hash.unrecordable}
            <div class="w-auto shrink-0">
              <form method="POST" action="/api/change/{data.owner}/{data.repo}:{channel}/unrecord">
                <input type="hidden" name="hash" value={hash.hash} />
                <input type="hidden" name="token" value={data.token} />
                <button class="btn btn-sm btn-error my-2">Unrecord</button>
              </form>
            </div>
          {/if}
        </div>
      {/each}
    </div>
    {#if data.hashes.length}
      <div class="text-center">
        {#if data.hashes[0].n < data.last}
          <a class="btn btn-outline-secondary mx-2" href="?from={data.hashes[0].n + 1}">Newer</a>
        {/if}
        {#if data.hashes[data.hashes.length - 1].n > 0}
          <a
            class="btn btn-outline-secondary mx-2"
            href="?to={data.hashes[data.hashes.length - 1].n - 1}">Older</a>
        {/if}
      </div>
    {/if}
  </div>
</div>

<style lang="postcss">
  img.profile-picture {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 50%;
    padding: 0;
    background-color: white;
  }

  .hash {
    color: var(--color-neutral-500);
  }
</style>