<script lang="ts">
  import { page } from '$app/state';
  export let user: string;
  export let repo: string;
  export let login: string | undefined = page.data.login;
  export let channel: string | undefined = undefined;
  export let active: 'tree' | 'changes' | 'tags' | 'discussion' | 'ci' | 'admin';
</script>

<div role="tablist" class="tabs tabs-border border-neutral-500 border-b-1 pb-4 mt-5">
  <li class="tab{active == 'tree' ? ' tab-active' : ''}">
    <a href="/{user}/{repo}{channel ? ':' + channel : ''}/tree"
      ><i class="bi bi-code-slash"></i> Code</a>
  </li>
  <li class="tab{active == 'changes' ? ' tab-active' : ''}">
    <a href="/{user}/{repo}{channel ? ':' + channel : ''}/change"
      ><i class="bi bi-puzzle"></i> Changes</a>
  </li>
  <li class="tab{active == 'discussion' ? ' tab-active' : ''}">
    <a href="/{user}/{repo}/discussion"><i class="bi bi-chat"></i> Discussions</a>
  </li>
  {#if user == login}
    <li class="tab{active == 'admin' ? ' active' : ''}">
      <a class="nav-link" href="/{user}/{repo}/admin"><i class="bi bi-tools"></i> Admin</a>
    </li>
  {/if}
</div>