<script lang="ts">
  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.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">
          <div>
            <div class="text-truncate">
              <a
                class={ch.is_dir ? 'dir' : 'file'}
                href="/{data.owner}/{data.repo}{channel.length ? ':' + channel : ''}/tree/{ch.pos}"
                >{ch.name}</a>
            </div>
            <div class="text-truncate d-sm-inline-block">
              <div class="d-block text-truncate"></div>
            </div>
            <div class="text-truncate pl-3 d-none d-md-inline-block text-right"></div>
          </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;
    }
  }

  a.file::before {
    @extend .tdesign--file;
  }
  a.dir::before {
    @extend .tdesign--folder;
  }

  a.file::before,
  a.dir::before {
    background-size: contain;
    display: inline-block;
    content: '';
    width: 1.1em;
    height: 1.1em;
    margin-right: 0.6em;
    position: relative;
    top: 2px;
  }

  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>