---
let { path } = Astro.props;
if (path.startsWith('/')) path = path.slice(1);

const activePath = Astro.url.pathname.slice(1);

const active = activePath === path;
---

<div class="tab">
  <a href={'/' + path} class={active ? 'active' : 'inactive'}>
    <slot />
      <sup class="badge"
        hx-trigger={active ? 'load, questComplete from:body' : 'load'}
        hx-get={`/page/incomplete_count?route=${path}`}
        hx-target="this"
        hx-swap="innerText"
      >
        ?
      </sup>
  </a>
</div>

<style>
  .tab {
    position: relative;
  }

  a {
    color: black;
    text-decoration: none;
  }

  .tab:has(a.active) {
    border-bottom: 2px solid black;
  }

  .badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: small;
    margin-left: -0.5em;
  }
</style>