/**
 * Nav Component Module
 */
globalThis.Component.register('Nav', container => {
        container.vertical = container.hasAttribute('vertical')
        container.click = (item, noselect) => {
                if (!item.noselect && !noselect) globalThis.Hash.nav = item.name
                container.dispatchEvent(new CustomEvent('nav', { detail: { item }, bubbles: false }))
        }
}, globalThis.Util.makeDom(/*html*/`
<div $class="\${this.vertical ? 'd-flex flex-column border-end h-100' : 'navbar navbar-expand border-bottom'} bg-body-secondary px-3 \${this.vertical ? 'py-3' : 'pb-0'} align-items-center \${this.vertical ? 'align-items-start' : ''}">
        <template $if="this.state?.brand?.image">
                <img $src="this.state.brand.image" $class="\${this.vertical ? 'mb-4' : 'me-2'}" style="height:30px;width:auto;max-width:300px">
        </template>
        <template $if="this.state?.brand?.icon">
                <i $class="bi bi-\${this.state.brand.icon} \${this.vertical ? 'mb-4' : 'me-2'}"></i>
        </template>
        <template $if="this.state?.brand?.label">
                <span $class="\${this.vertical ? 'mb-4 fw-bold' : 'me-2'}" $text="this.state.brand.label"></span>
        </template>
        <div $class="\${this.vertical ? 'w-100' : 'ms-2'}"></div>
        <template $each="this.state?.list || []">
                <div $class="\${this.vertical ? 'nav nav-pills flex-column w-100' : 'navbar-nav'} text-truncate \${item.type==='fill'?'flex-fill':''}">
                        <template $if="item.type==='button'">
                                <button $class="nav-link \${Hash.nav===item.name?'active':''} \${this.vertical ? 'text-start' : ''}" $onclick="this.click(item)">
                                        <i $class="bi bi-\${item.icon} me-2"></i><span $class="\${this.vertical ? '' : 'd-none d-' + (this.state?.list?.length>5?'lg':'md') + '-inline'}" $text="item.label"></span>
                                </button>
                        </template>
                        <template $if="item.type==='dropdown'">
                                <div class="dropdown">
                                        <button $class="nav-link \${Hash.nav===item.name?'active':''} \${this.vertical ? 'text-start' : ''}" data-bs-toggle="dropdown">
                                                <i $class="bi bi-\${item.icon} me-2"></i><span $class="\${this.vertical ? '' : 'd-none d-' + (this.state?.list?.length>5?'lg':'md') + '-inline'}" $text="item.label"></span>
                                        </button>
                                        <div $class="dropdown-menu \${this.vertical?'position-static':'dropdown-menu-end'} p-3 bg-body-secondary shadow" $style="width: \${item.width || 250}px;">
                                                <template $each="item.list" as="subitem">
                                                        <template $if="subitem.type==='button'">
                                                                <button class="nav-link px-0 w-100 text-start" $onclick="this.click(subitem, true)">
                                                                        <i $class="bi bi-\${subitem.icon} me-2 d-inline-block" style="width: 16px;"></i><span $text="subitem.label"></span>
                                                                </button>
                                                        </template>
                                                        <template $if="subitem.type==='switch'">
                                                                <div class="d-flex align-items-center">
                                                                        <i $class="bi bi-\${subitem.icon} me-2 d-inline-block" style="width: 16px;"></i><span $text="subitem.label"></span><div class="flex-fill"></div>
                                                                        <div class="form-switch"><input class="form-check-input mx-0" type="checkbox" $bind="subitem.bind[subitem.name]"></div>
                                                                </div>
                                                        </template>
                                                </template>
                                        </div>
                                </div>
                        </template>
                </div>
        </template>
</div>
`))
