<script lang="ts">
  const {
    user,
    repo,
    login,
    channel,
    active
  }: {
    user: string;
    repo: string;
    login?: string;
    channel?: string;
    active: 'tree' | 'changes' | 'tags' | 'discussion' | 'ci' | 'jobs' | 'admin';
  } = $props();
</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>
  <li class="tab{active == 'jobs' ? ' tab-active' : ''}">
    <a href="/{user}/{repo}/jobs"><i class="bi bi-cog"></i> Jobs</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>