{% load lb_tags %}

<c-vars
    topnavTitle
    showDrawerToggle
    :themeOptions="{
        '__system__': 'System',
        'labb-light': 'Light',
        'labb-dark': 'Dark',
        'light': 'Daisy Light',
        'dark': 'Daisy Dark'
    }"
/>

{% labb_theme_val as theme %}

<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" href="{% url 'index' %}">
            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1.5em" height="1.5em" zoomAndPan="magnify" viewBox="0 0 375 374.999991"  preserveAspectRatio="xMidYMid meet" version="1.0"><defs><g/><clipPath id="dd733de5e2"><rect x="0" width="245" y="0" height="317"/></clipPath></defs><rect x="-37.5" width="450" fill="#ffffff" y="-37.499999" height="449.999989" fill-opacity="1"/><rect x="-37.5" width="450" fill="#000000" y="-37.499999" height="449.999989" fill-opacity="1"/><g transform="matrix(1, 0, 0, 1, 57, 29)"><g clip-path="url(#dd733de5e2)"><g fill="#ffffff" fill-opacity="1"><g transform="translate(4.145762, 251.549855)"><g><path d="M 56.234375 -193.234375 L 56.234375 0 L 16.046875 0 L 16.046875 -193.234375 Z M 56.234375 -193.234375 "/></g></g></g><g fill="#ffffff" fill-opacity="1"><g transform="translate(42.666572, 251.549855)"><g><path d="M 16.796875 0 L 16.796875 -193.234375 L 56.984375 -193.234375 L 56.984375 -120.578125 L 58.21875 -120.578125 C 60.039062 -124.546875 62.617188 -128.539062 65.953125 -132.5625 C 69.285156 -136.59375 73.6875 -139.972656 79.15625 -142.703125 C 84.632812 -145.441406 91.398438 -146.8125 99.453125 -146.8125 C 110.078125 -146.8125 119.820312 -144.054688 128.6875 -138.546875 C 137.5625 -133.046875 144.6875 -124.773438 150.0625 -113.734375 C 155.445312 -102.703125 158.140625 -88.882812 158.140625 -72.28125 C 158.140625 -56.113281 155.523438 -42.476562 150.296875 -31.375 C 145.078125 -20.269531 138.035156 -11.867188 129.171875 -6.171875 C 120.304688 -0.484375 110.367188 2.359375 99.359375 2.359375 C 91.554688 2.359375 84.929688 1.070312 79.484375 -1.5 C 74.046875 -4.082031 69.613281 -7.335938 66.1875 -11.265625 C 62.757812 -15.203125 60.101562 -19.1875 58.21875 -23.21875 L 56.421875 -23.21875 L 56.421875 0 Z M 56.140625 -72.46875 C 56.140625 -59.570312 58.796875 -49.207031 64.109375 -41.375 C 69.429688 -33.539062 76.9375 -29.625 86.625 -29.625 C 96.5 -29.625 104.046875 -33.601562 109.265625 -41.5625 C 114.484375 -49.519531 117.09375 -59.820312 117.09375 -72.46875 C 117.09375 -85.039062 114.5 -95.242188 109.3125 -103.078125 C 104.125 -110.910156 96.5625 -114.828125 86.625 -114.828125 C 76.875 -114.828125 69.351562 -111.003906 64.0625 -103.359375 C 58.78125 -95.722656 56.140625 -85.425781 56.140625 -72.46875 Z M 56.140625 -72.46875 "/></g></g></g><g fill="#ffffff" fill-opacity="1"><g transform="translate(177.703484, 251.549855)"><g><path d="M 39.53125 2.453125 C 33.300781 2.453125 27.953125 0.253906 23.484375 -4.140625 C 19.023438 -8.546875 16.828125 -13.894531 16.890625 -20.1875 C 16.828125 -26.351562 19.023438 -31.632812 23.484375 -36.03125 C 27.953125 -40.4375 33.300781 -42.640625 39.53125 -42.640625 C 45.570312 -42.640625 50.835938 -40.4375 55.328125 -36.03125 C 59.828125 -31.632812 62.113281 -26.351562 62.1875 -20.1875 C 62.113281 -13.894531 59.828125 -8.546875 55.328125 -4.140625 C 50.835938 0.253906 45.570312 2.453125 39.53125 2.453125 Z M 39.53125 2.453125 "/></g></g></g></g></g></svg>
        </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' %}" />
        </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>
            </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>

        {% comment %} Theme selector todo: move this to footer {% endcomment %}
        <c-lb.dropdown alignment="end" size="sm" class="">
            <c-lb.dropdown.trigger class="btn btn-sm btn-ghost btn-circle" >
                <c-lbi.rmx.sun w="1.5em" h="1.5em" />
            </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">
                    {% for key, value in themeOptions.items %}
                        <input
                            type="radio"
                            name="doc-theme"
                            value="{{key}}"
                            class="theme-controller btn btn-ghost btn-sm justify-start"
                            aria-label="{{value}}"
                            {% if key == theme %}checked{% endif %}
                        />
                    {% endfor %}
                </c-lb.menu>
            </c-lb.dropdown.content>
        </c-lb.dropdown>

    </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>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Get current theme from data-theme attribute
    const currentTheme = "{{ theme }}";

    // Find all theme controller inputs in the topnav
    const themeInputs = document.querySelectorAll('input[name="doc-theme"].theme-controller');

    // Function to update active state
    function updateActiveState() {
        themeInputs.forEach(function(input) {
            if (input.value === currentTheme) {
                input.classList.add('btn-active');
            } else {
                input.classList.remove('btn-active');
            }
        });
    }

    // Set initial active state
    updateActiveState();

    // Add change event listeners to update active state when theme changes
    themeInputs.forEach(function(input) {
        input.addEventListener('change', function() {
            // Remove active class from all inputs
            themeInputs.forEach(function(btn) {
                btn.classList.remove('btn-active');
            });

            // Add active class to the selected input
            this.classList.add('btn-active');
        });
    });
});
</script>