// src/nav.js
(function(global) {
    const { Component, Hash, Util } = global;

    Component.register('Nav', container => {
        container.state.items = []
        container.state.activeId = Hash.nav
        container.state.__watch('activeId', v => Hash.nav = v)
        window.addEventListener('hashchange', () => container.state.activeId = Hash.nav)

        container.select = (id) => {
            container.state.activeId = id
            container.dispatchEvent(new CustomEvent('change', { bubbles: false, detail: id }))
        }
    }, Util.makeDom(/*html*/`
<ul class="nav nav-pills flex-column">
  <template $each="this.state.items" as="item">
    <li class="nav-item">
      <a $class="nav-link \${this.state.activeId === item.id ? 'active' : ''}" 
         href="#" $onclick="this.select(item.id)">
        <i $if="item.icon" $class="bi bi-\${item.icon} me-2"></i>
        <span $text="item.label"></span>
      </a>
    </li>
  </template>
</ul>
`))

    Component.register('Breadcrumb', container => {
        container.state.items = []
    }, Util.makeDom(/*html*/`
<nav aria-label="breadcrumb">
  <ol class="breadcrumb mb-0">
    <template $each="this.state.items" as="item">
      <li $class="breadcrumb-item \${index === (this.state.items || []).length - 1 ? 'active' : ''}">
        <template $if="index < (this.state.items || []).length - 1">
          <a href="#" $onclick="this.dispatchEvent(new CustomEvent('select', {detail: item}))" $text="item.label"></a>
        </template>
        <template $if="index === (this.state.items || []).length - 1">
          <span $text="item.label"></span>
        </template>
      </li>
    </template>
  </ol>
</nav>
`))

})(globalThis);