{% load lb_tags %}
{% load static %}

<c-vars
    topnavTitle
    showDrawerToggle
/>

<c-lb.navbar class="fixed top-0 inset-x-0 z-50 bg-base-100 py-3">
    <c-lb.navbar.start class="flex items-center gap-2">
        {% if showDrawerToggle %}
            <c-lb.drawer.toggle for="docs-drawer" class="btn btn-ghost btn-sm btn-square lg:hidden">
                <c-lbi.rmx.menu-4 w="1.75em" h="1.75em" />
            </c-lb.drawer.toggle>
        {% endif %}
        <a class="text-2xl font-bold tracking-widest flex items-center" href="{% url 'index' %}">
            <c-lbdocs.ui.logo height="26" />
        </a>
    </c-lb.navbar.start>

    <c-lb.navbar.center>
        {% comment %} Desktop menu {% endcomment %}
        <c-lb.menu direction="horizontal" class="items-center gap-2 sm:flex hidden">
            <c-lb.menu.item title="UI" href="{% url 'ui_docs' %}" />
            <c-lb.menu.item title="Icons" href="{% url 'icons_docs' %}" />
            <li>
                <c-lb.dropdown alignment="start" size="sm">
                    <c-lb.dropdown.trigger class="flex items-center gap-1" style="cursor: pointer; text-decoration: none; color: inherit;">
                        Community
                        {% comment %} <c-lbi.rmx.arrow-down-s w="1em" h="1em" /> {% endcomment %}
                    </c-lb.dropdown.trigger>
                    <c-lb.dropdown.content class="bg-base-100 rounded-box w-52 shadow-md border border-base-200">
                        <c-lb.menu direction="vertical" class="w-full -pl-2">
                            <c-lb.menu.item class="pr-2" href="{% url 'blog_docs' %}" title="Blog" />
                            <c-lb.menu.item class="pr-2" href="https://discord.gg/34eBUJMQv2" target="_blank" title="Discord" />
                            <c-lb.menu.item class="pr-2" href="https://github.com/labbhq/labb" target="_blank" title="GitHub" />
                        </c-lb.menu>
                    </c-lb.dropdown.content>
                </c-lb.dropdown>
            </li>
        </c-lb.menu>


        {% comment %} Mobile menu {% endcomment %}

        <c-lb.dropdown alignment="center" size="sm" class="sm:hidden">
            <c-lb.dropdown.trigger class="btn btn-ghost text-base-content/50">
                <span class="tracking-widest sm:hidden">{{topnavTitle|default:"Explore"}}</span>
                <c-lbi.rmx.arrow-down-s w="1em" h="1em" />
            </c-lb.dropdown.trigger>
            <c-lb.dropdown.content class="bg-base-100 rounded-box w-52 shadow-md border border-base-200">
                <c-lb.menu class="w-full">
                    <c-lb.menu.item title="UI" href="{% url 'ui_docs' %}" />
                    <c-lb.menu.item title="Icons" href="{% url 'icons_docs' %}" />
                    <c-lb.menu.item type="submenu-details" title="Community" open>
                        <c-lb.menu.item href="{% url 'blog_docs' %}" title="Blog" />
                        <c-lb.menu.item href="https://discord.gg/34eBUJMQv2" target="_blank" title="Discord" />
                        <c-lb.menu.item href="https://github.com/labbhq/labb" target="_blank" title="GitHub" />
                    </c-lb.menu.item>
                </c-lb.menu>
            </c-lb.dropdown.content>
        </c-lb.dropdown>

    </c-lb.navbar.center>

    <c-lb.navbar.end class="flex items-center gap-2">
        <c-lb.button size="sm" btnStyle="ghost" icon="rmx.search" onclick="search_modal.showModal()">
            Search
         </c-lb.button>
    </c-lb.navbar.end>
</c-lb.navbar>

<c-lb.modal id="search_modal" withBackdrop boxClass="border border-base-200 shadow">
    <h3 class="text-lg font-bold">Search</h3>
    <p class="py-4">Search features are coming soon!</p>
    <c-lb.modal.action>
        <form method="dialog">
            <c-lb.button>Close</c-lb.button>
        </form>
    </c-lb.modal.action>
</c-lb.modal>