{% load i18n %}
{% load static %}

<header class="sticky top-0 z-50 bg-base-100 border-b border-base-200">
    <div class="container mx-auto px-4">
        <div class="navbar min-h-14 p-0">
            <!-- LEFT: LOGO -->
            <div class="navbar-start">
                <a href="{% url 'home' %}" class="flex items-center gap-2">
                    <img src="{% static 'images/logo.png' %}" alt="{% translate 'site.small-name' %}" class="h-8" />
                    <span class="text-lg font-semibold tracking-tight">
                        {% translate "site.small-name" %}
                    </span>
                </a>
            </div>

            <!-- CENTER: DESKTOP MENU -->
            <div class="navbar-center hidden lg:flex">
                <ul class="menu menu-horizontal px-1 gap-1">
                    <li><a href="{% url 'home' %}">{% translate "menu.home" %}</a></li>
                    <li><a href="{% url 'gallery_index' %}">{% translate "menu.gallery" %}</a></li>
                    <li>
                        <details>
                            <summary>{% translate "menu.shop" %}</summary>
                            <ul class="p-2 bg-base-100">
                                <li>
                                    <a href="{% url 'shop_plans' 'subscription' %}">
                                        {% translate "menu.shop.plans-subscription" %}
                                    </a>
                                </li>
                                <li>
                                    <a href="{% url 'shop_plans' 'credit-purchase' %}">
                                        {% translate "menu.shop.plans-credit-purchase" %}
                                    </a>
                                </li>
                                <li>
                                    <a href="{% url 'shop_products' %}">
                                        {% translate "menu.shop.products" %}
                                    </a>
                                </li>
                            </ul>
                        </details>
                    </li>
                    <li><a href="{% url 'contact_index' %}">{% translate "menu.contact" %}</a></li>
                </ul>
            </div>

            <!-- RIGHT: ACTIONS + MOBILE MENU -->
            <div class="navbar-end gap-2">

                <!-- AUTH (DESKTOP) -->
                {% if user.is_authenticated %}
                <span class="badge badge-primary hidden sm:inline-flex whitespace-nowrap">
                    {% translate "menu.credits" %}: {{ user.customer.credits|default:0 }}
                </span>
                <a href="{% url 'account_profile' %}" class="btn btn-ghost btn-sm hidden sm:inline-flex">
                    {% translate "menu.profile" %}
                </a>
                <a href="{% url 'account_logout' %}" class="btn btn-primary btn-sm hidden sm:inline-flex">
                    {% translate "menu.logout" %}
                </a>
                {% else %}
                <a href="{% url 'account_login' %}" class="btn btn-ghost btn-sm hidden sm:inline-flex">
                    {% translate "menu.login" %}
                </a>
                <a href="{% url 'account_signup' %}" class="btn btn-primary btn-sm hidden sm:inline-flex">
                    {% translate "menu.signup" %}
                </a>
                {% endif %}

                <!-- THEME TOGGLE -->
                <label class="swap swap-rotate btn btn-ghost btn-circle">
                    <input type="checkbox" class="theme-controller" value="black" />
                    <i class="fa-solid fa-sun swap-off text-lg"></i>
                    <i class="fa-solid fa-moon swap-on text-lg"></i>
                </label>

                <!-- MOBILE MENU (RIGHT SIDE) -->
                <div class="dropdown dropdown-end lg:hidden">
                    <label tabindex="0" class="btn btn-ghost btn-circle">
                        <i class="fa-solid fa-bars text-lg"></i>
                    </label>

                    <ul tabindex="0"
                        class="menu menu-sm dropdown-content mt-3 z-[1] w-56 rounded-box bg-base-100 p-2 shadow">
                        <li><a href="{% url 'home' %}">{% translate "menu.home" %}</a></li>
                        <li><a href="{% url 'gallery_index' %}">{% translate "menu.gallery" %}</a></li>
                        <li>
                            <details>
                                <summary>{% translate "menu.shop" %}</summary>
                                <ul>
                                    <li>
                                        <a href="{% url 'shop_plans' 'subscription' %}">
                                            {% translate "menu.shop.plans-subscription" %}
                                        </a>
                                    </li>
                                    <li>
                                        <a href="{% url 'shop_plans' 'credit-purchase' %}">
                                            {% translate "menu.shop.plans-credit-purchase" %}
                                        </a>
                                    </li>
                                    <li>
                                        <a href="{% url 'shop_products' %}">
                                            {% translate "menu.shop.products" %}
                                        </a>
                                    </li>
                                </ul>
                            </details>
                        </li>
                        <li><a href="{% url 'contact_index' %}">{% translate "menu.contact" %}</a></li>

                        <li class="menu-title mt-2 ps-1 pe-1">
                            <span>{% translate "menu.account" %}</span>
                        </li>

                        {% if user.is_authenticated %}
                        <li class="disabled">
                            <span>{% translate "menu.credits" %}: {{ user.customer.credits|default:0 }}</span>
                        </li>
                        <li><a href="{% url 'account_profile' %}">{% translate "menu.profile" %}</a></li>
                        <li><a href="{% url 'account_logout' %}">{% translate "menu.logout" %}</a></li>
                        {% else %}
                        <li><a href="{% url 'account_login' %}">{% translate "menu.login" %}</a></li>
                        <li><a href="{% url 'account_signup' %}">{% translate "menu.signup" %}</a></li>
                        {% endif %}
                    </ul>
                </div>
            </div>
        </div>
    </div>
</header>
