<style>
    .mega-menu {
        opacity: 0;
        visibility: hidden;
        z-index: -900;
        left: 0;
        top: 38px;
        position: absolute;
        text-align: left;
        width: 100%;
        transition: all 0.15s linear 0s;
    }
    .hoverable {
        position: static;
    }
    .hoverable > a:after {
        content: "\25BC";
        font-size: 10px;
        padding-left: 6px;
        position: relative;
        top: -1px;
    }
    .hoverable:hover .mega-menu {
        opacity: 1;
        visibility: visible;
        z-index: 900;
    }
</style>
<header class="flex flex-col items-center w-full gap-3 mb-8">
    <div class="{{ colors.header.banner }} py-1 text-sm flex w-full justify-center">
        <div class="w-[97%] lg:w-[90%] xl:w-4/5 flex justify-between">
            <a href="/support/ask">
                Help Center
            </a>
            <span>
                Save 5% when you pay with Bitcoin
            </span>
            <a href="/support/bitcoin">
                Learn More
            </a>
        </div>
    </div>

    <div class="w-[97%] lg:w-[90%] xl:w-4/5 flex flex-col gap-3">
        <div class="flex w-full items-center justify-between gap-3">
            <div class="flex flex-1 md:basis-[100px] md:min-w-[280px] md:max-w-[280px] xl:basis-[200px] xl:min-w-[300px] xl:max-w-[300px]">
                <a href="/" class="w-[200px]">
                    <img src="/img/logo-{{ theme }}.webp" />
                </a>
            </div>
            <form action="/search" method="post" class="flex w-full max-w-[900px]">
                <div class='flex-grow w-full'>
                    {% include 'lib/inputs/text.twig' with { 
                        name: 'search', 
                        type: 'search', 
                        placeholder: 'What are you looking for?', 
                    } %}
                </div>
                <button type="submit" class="px-4 {{ colors.button.primary }} rounded-r">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-search">
                        <circle cx="11" cy="11" r="8" />
                        <path d="m21 21-4.3-4.3" />
                    </svg>
                </button>
            </form>
            <div class="flex flex-1 items-center justify-end gap-4 md:basis-[100px] md:min-w-[280px] md:max-w-[280px] xl:basis-[200px] xl:min-w-[300px] xl:max-w-[300px]">
                <div class="flex gap-1">
                    <div class="relative" id="dropdown-bound">
                        <!-- Hidden checkbox to control the dropdown -->
                        <input type="checkbox" id="dropdown-toggle" class="hidden peer">
                            <!-- Dropdown button -->
                            <label for="dropdown-toggle" class="{{ colors.button.dropdown }} flex gap-1 items-center cursor-pointer p-1 py-2 rounded-md">
                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-user-round">
                                    <circle cx="12" cy="8" r="5" />
                                    <path d="M20 21a8 8 0 0 0-16 0" />
                                </svg>
                                <div>
                                    <div class="text-xs leading-none">
                                        {% if session.user_id is defined %}
                                            Welcome
                                        {% else %}
                                            Sign In
                                        {% endif %}
                                    </div>
                                    <div class="flex items-center gap-[1px]">
                                        <div class="text-sm font-semibold leading-none">
                                            Account
                                        </div>
                                        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down">
                                            <path d="m6 9 6 6 6-6" />
                                        </svg>
                                    </div>
                                </div>
                            </label>

                            <div class="absolute mt-2 {{ colors.dropdown.list }} border rounded-md shadow-md w-48 hidden peer-checked:block z-50">
                                <ul class="py-2">
                                    {% if session.user_id is defined %}
                                        <li>
                                            <a href="/account" class="block px-4 py-2 m-1 rounded-lg {{ colors.dropdown.item }}">
                                                Account
                                            </a>
                                        </li>
                                        <li>
                                            <a href="/account/orders" class="block px-4 py-2 m-1 rounded-lg {{ colors.dropdown.item }}">
                                                Orders
                                            </a>
                                        </li>
                                        <li>
                                            <a href="/account/returns" class="block px-4 py-2 m-1 rounded-lg {{ colors.dropdown.item }}">
                                                Returns
                                            </a>
                                        </li>
                                        <li>
                                            <a href="/account/shipping" class="block px-4 py-2 m-1 rounded-lg {{ colors.dropdown.item }}">
                                                Shipping
                                            </a>
                                        </li>
                                        <li>
                                            <a href="/account/billing" class="block px-4 py-2 m-1 rounded-lg {{ colors.dropdown.item }}">
                                                Billing
                                            </a>
                                        </li>
                                    {% else %}
                                        <li>
                                            <a href="/account/login" class="block px-4 py-2 m-1 rounded-lg {{ colors.dropdown.item }}">
                                                Sign In
                                            </a>
                                        </li>
                                        <li>
                                            <a href="/account/signup" class="block px-4 py-2 m-1 rounded-lg {{ colors.dropdown.item }}">
                                                Create an
                                                Account
                                            </a>
                                        </li>
                                    {% endif %}

                                </ul>
                                {% if is_admin %}
                                    {% include 'lib/rule.twig' %}
                                    <ul class="py-2">
                                        <li>
                                            <a href="/admin" class="block px-4 py-2 m-1 rounded-lg {{ colors.dropdown.item }}">
                                                Admin
                                            </a>
                                        </li>
                                    </ul>
                                {% endif %}
                                {% if session.user_id is defined %}
                                    {% include 'lib/rule.twig' %}
                                    <ul class="py-2">
                                        <li>
                                            <a href="/account/logout" class="block px-4 py-2 m-1 rounded-lg {{ colors.dropdown.item }}">
                                                Logout
                                            </a>
                                        </li>
                                    </ul>
                                {% endif %}
                            </div>
                        </div>
                        <script>
                        document.addEventListener('click', function (event) {
                            if (!document.getElementById('dropdown-bound').contains(event.target)) {
                                document.getElementById('dropdown-toggle').checked = false;
                            }
                        });
                    </script>
                        <a href="/account/orders" class="{{ colors.button.dropdown }} flex items-center gap-1 p-1 py-2 rounded-md">
                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-box">
                                <path d="M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z" />
                                <path d="m3.3 7 8.7 5 8.7-5" />
                                <path d="M12 22V12" />
                            </svg>
                            <div>
                                <div class="text-xs whitespace-nowrap leading-none">
                                    Returns &
                                </div>
                                <div class="text-sm font-semibold leading-none">
                                    Orders
                                </div>
                            </div>
                        </a>
                    </div>
                    <a href="/cart">
                        <div class="flex items-center">
                            <div class="{{ colors.button.primary }} h-[42px] flex items-center border p-2 rounded-tl-lg rounded-bl-lg">
                                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-shopping-cart lucide-icon">
                                    <circle cx="8" cy="21" r="1"></circle>
                                    <circle cx="19" cy="21" r="1"></circle>
                                    <path d="M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12"></path>
                                </svg>
                            </div>
                            <div class="{{ colors.input }} flex h-[42px] font-semibold justify-center items-center rounded-tr-lg rounded-br-lg border border-l-0 px-3 py-2">
                                7
                            </div>
                        </div>
                    </a>
                </div>
            </div>

            <nav class="w-full relative rounded-lg {{ colors.nav.bar }}">
                <div class="flex">
                    <ul class="flex">
                        <li class="hoverable rounded-xl border-[5px] {{ colors.nav.item }}">
                            <a href="/power-meters" class="relative p-1 rounded-xl block text-sm font-bold">
                                220V
                                Power Meters
                            </a>
                            <div class="mega-menu">
                                <div class="bg-transparent h-[3px]"><!-- invisible content to keep menu shown when cursor is b/t the item and the content -->
                                </div>
                                <div class="p-6 mb-16 rounded-b shadow-lg {{ colors.nav.hovercontent }}">
                                    <div class='flex gap-3 items-baseline'>
                                        <h4 class="text-xl font-semibold">
                                            220V Power Meters
                                        </h4>
                                        <a href="/power-meters" class="hover:underline font-semibold text-xs {{ colors.anchor.primary }}">
                                            Shop All
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </nav>

            {% if breadcrumbs is defined %}
                <div class='flex flex-col gap-1'>
                    <div class="flex gap-2 text-xs">
                        <a href="/" class="hover:underline {{ colors.breadcrumb.parent }}">
                            {{ env.APP_NAME }}
                        </a>
                        <span class="{{ colors.breadcrumb.seperator }}">
                            >
                        </span>
                        {% for crumb in breadcrumbs %}
                            {% if crumb.url is null %}
                                <span class="font-bold {{ colors.breadcrumb.child }}">
                                    {{ crumb.title }}
                                </span>
                            {% else %}
                                <a href="{{ crumb.url }}" class="hover:underline {{ colors.breadcrumb.parent }}">
                                    {{ crumb.title }}
                                </a>
                            {% endif %}
                            {% if loop.index < breadcrumbs|length %}
                                <span class="{{ colors.breadcrumb.seperator }}">
                                    >
                                </span>
                            {% endif %}
                        {% endfor %}
                    </div>
                    {% include 'lib/rule.twig' %}
                </div>
            {% endif %}
        </div>
    </header>
    