<script lang="ts">
  import Nav from '../../Nav.svelte';
  import Tabs from '../../Tabs.svelte';
  import ChannelBar from '../../ChannelBar.svelte';
  import type { PageData } from './$types';
  import Folder from '../../../../Folder.svelte';
  import File from '../../../../File.svelte';
  export let data: PageData;
  const channel = data.channel.length ? 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}
    path={data.inode.Directory ? data.inode.Directory.path : data.inode.File.path}
    link={true} />

  <Tabs 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;
  }
  :global {
    .hljs-emphasis {
      font-style: italic;
    }
    .hljs-strong {
      font-weight: 700;
    }

    @media (prefers-color-scheme: dark) {
      .hljs {
        color: #fff;
        background: #1c1b1b;
      }
      .hljs-subst {
        color: #fff;
      }
      .hljs-comment {
        color: #999;
      }
      .hljs-attr,
      .hljs-doctag,
      .hljs-keyword,
      .hljs-meta .hljs-keyword,
      .hljs-section,
      .hljs-selector-tag {
        color: #88aece;
      }
      .hljs-attribute {
        color: #c59bc1;
      }
      .hljs-name,
      .hljs-number,
      .hljs-quote,
      .hljs-selector-id,
      .hljs-template-tag,
      .hljs-type {
        color: #f08d49;
      }
      .hljs-selector-class {
        color: #88aece;
      }
      .hljs-link,
      .hljs-regexp,
      .hljs-selector-attr,
      .hljs-string,
      .hljs-symbol,
      .hljs-template-variable,
      .hljs-variable {
        color: #b5bd68;
      }
      .hljs-meta,
      .hljs-selector-pseudo {
        color: #88aece;
      }
      .hljs-built_in,
      .hljs-literal,
      .hljs-title {
        color: #f08d49;
      }
      .hljs-bullet,
      .hljs-code {
        color: #ccc;
      }
      .hljs-meta .hljs-string {
        color: #b5bd68;
      }
      .hljs-deletion {
        color: #de7176;
      }
      .hljs-addition {
        color: #76c490;
      }
    }

    @media (prefers-color-scheme: light) {
      .hljs {
        color: #2f3337;
        background: #f6f6f6;
      }
      .hljs-subst {
        color: #2f3337;
      }
      .hljs-comment {
        color: #656e77;
      }
      .hljs-attr,
      .hljs-doctag,
      .hljs-keyword,
      .hljs-meta .hljs-keyword,
      .hljs-section,
      .hljs-selector-tag {
        color: #015692;
      }
      .hljs-attribute {
        color: #803378;
      }
      .hljs-name,
      .hljs-number,
      .hljs-quote,
      .hljs-selector-id,
      .hljs-template-tag,
      .hljs-type {
        color: #b75501;
      }
      .hljs-selector-class {
        color: #015692;
      }
      .hljs-link,
      .hljs-regexp,
      .hljs-selector-attr,
      .hljs-string,
      .hljs-symbol,
      .hljs-template-variable,
      .hljs-variable {
        color: #54790d;
      }
      .hljs-meta,
      .hljs-selector-pseudo {
        color: #015692;
      }
      .hljs-built_in,
      .hljs-literal,
      .hljs-title {
        color: #b75501;
      }
      .hljs-bullet,
      .hljs-code {
        color: #535a60;
      }
      .hljs-meta .hljs-string {
        color: #54790d;
      }
      .hljs-deletion {
        color: #c02d2e;
      }
      .hljs-addition {
        color: #2f6f44;
      }
    }
  }
</style>