<script lang="ts">
  const {
    user,
    repo,
    path,
    link = false
  }: {
    user: string;
    repo: string;
    path: { basename: string; pos: string }[];
    link: boolean;
  } = $props();
</script>

<nav class="breadcrumbs" aria-label="breadcrumbs">
  <ol>
    <li><a class="link" href="/{user}">{user}</a></li>
    <li>
      {#if link}<a class="link" href="/{user}/{repo}">{repo}</a>{:else}{repo}{/if}
    </li>
    {#each path as p, i}
      <li class={i == path.length - 1 ? 'active' : ''}>
        {#if link}<a class="link" href="/{user}/{repo}/tree/{p.pos}">{p.basename}</a
          >{:else}{p.basename}{/if}
      </li>
    {/each}
  </ol>
</nav>