<script lang="ts">
  import Nav from '../../Nav.svelte';
  import Tabs from '../../Tabs.svelte';
  import ChannelBar from '../../ChannelBar.svelte';
  import Folder from '../../../../Folder.svelte';
  import File from '../../../../File.svelte';
  const { data } = $props();
  const channel = $derived(data.channel.length ? data.channel : 'main');
</script>

<svelte:head>
  <title>{data.owner} / {data.repo}</title>
  <link rel="stylesheet" href="/hljs.css" />
</svelte:head>

<div class="p-3">
  <Nav
    user={data.owner}
    repo={data.repo}
    path={data.inode.Directory ? data.inode.Directory.path : data.inode.File.path}
    link={true} />

  <Tabs
    login={data.login}
    user={data.owner}
    repo={data.repo}
    channel={data.channel}
    active="tree" />
  <div class="pt-3">
    <ChannelBar
      owner={data.owner}
      repo={data.repo}
      {channel}
      channels={data.channels}
      tab="tree"
      token={data.token}
      can_delete={true} />
  </div>

  {#if data.inode.Directory}
    <ul class="mt-5 list bg-base-100 rounded-box shadow-md">
      {#each data.inode.Directory.children as ch}
        <li class="list-row p-1">
          <div class="text-truncate">
            <a
              class={ch.is_dir ? 'dir' : 'file'}
              href="/{data.owner}/{data.repo}{channel.length ? ':' + channel : ''}/tree/{ch.pos}">
              {#if ch.is_dir}
                <Folder />
              {:else}
                <File />
              {/if}
              {ch.name}</a>
          </div>
        </li>
      {/each}
    </ul>
  {:else}
    <pre><code class="mt-5 hljs"
        >{#if data.hled}{@html data.hled}{/if}</code></pre>
  {/if}
</div>

<style lang="scss">
  @media (prefers-color-scheme: dark) {
    a.file,
    a.dir {
      color: #fff;
    }
  }
  @media (prefers-color-scheme: light) {
    a.file,
    a.dir {
      color: #000;
    }
  }

  pre code.hljs {
    display: block;
    overflow-x: auto;
    padding: 5px;
  }
  code.hljs {
    padding: 3px 5px;
  }
</style>