{% load static %}
<header class="site-header">
    <div class="container header-flex">
        
        <div class="logo">
    <a href="/">
        {% if site_settings.logo %}
            <img src="{{ site_settings.logo.url }}" alt="{{ site_settings.site_name }}" class="site-logo">
        {% else %}
            {{ site_settings.site_name|default:"GreenThumb" }}
        {% endif %}
    </a>
</div>

       <nav class="nav-links" id="navLinks">
    <ul>

        {% for item in nav_items %}
            {% if item.type == 'link' %}
                <li>
                    <a href="{{ item.url }}"{% if item.is_active %} aria-current="page"{% endif %}>
                        {{ item.label }}
                    </a>
                </li>
            {% elif item.type == 'dropdown' %}
                <li class="nav-dropdown">
                    <a href="#" class="nav-dropdown-toggle"{% if item.is_active %} aria-current="page"{% endif %}>
                        {{ item.label }} <i class="fas fa-chevron-down"></i>
                    </a>
                    <ul class="nav-dropdown-menu">
                        {% for child in item.children %}
                            <li>
                                <a href="{{ child.url }}"{% if child.is_active %} aria-current="page"{% endif %}>
                                    {{ child.label }}
                                </a>
                            </li>
                        {% endfor %}
                    </ul>
                </li>
            {% endif %}
        {% endfor %}

        {% if site_settings.blog_enabled %}
            <li>
                <a href="{% url 'blog_list' %}">
                    {{ site_settings.blog_title|default:"Blog" }}
                </a>
            </li>
        {% endif %}
    </ul>
</nav>


        <div class="mobile-menu-toggle" id="mobileMenuToggle">
            <i class="fas fa-bars"></i>
        </div>

    </div>
</header>

<script>
document.addEventListener("DOMContentLoaded", function () {
    const toggle = document.getElementById('mobileMenuToggle');
    const nav = document.getElementById('navLinks');

    if (toggle && nav) {
        toggle.addEventListener('click', () => {
            nav.classList.toggle('active');
        });
    }

    document.querySelectorAll('.nav-dropdown-toggle').forEach(function(link) {
        link.addEventListener('click', function(e) {
            e.preventDefault();
        });
    });
});
</script>



<script>
    window.addEventListener('scroll', function() {
    var header = document.querySelector('.site-header');
    if (window.scrollY > 150) {
        header.classList.add('scrolled');
    } else {
        header.classList.remove('scrolled');
    }
});
</script>