{% load css_tags %}{% block_css 'enap_designsystem/blocks/navbar_component.css' %}
{% load wagtailimages_tags %}
{% block content %}
<style>
    .navbar-component {
        border-bottom: 7px solid {{ value.border_color }};
    }

    .nav-link:hover,
    .nav-link:focus {
    color: {{ value.border_color }};
    }

    .nav-linktwo.featured {
        font-weight: 700;
        color: {{ value.border_color }};
    }

    .btn-component {
        background-color: {{ value.border_color }};
    }

    .btn:hover,
    .btn:focus {
    background-color: {{ value.border_color }}dd; /* Add transparency for hover effect */
    }

    .mobile-nav-portal {
        color: white;
        text-decoration: none;
        padding: 1rem;
        text-align: center;
        margin-top: 1rem;
        border-radius: 4px;
        font-weight: 600;
    }

    .mobile-nav-link.featured {
        color: {{ value.border_color }};
    }
</style>
<header class="navbar-component" id="navbar-{{ id }}" data-border-color="{{ value.border_color }}">
    <div class="container navbar-container">
        <a href="#" class="logo branca navbar">
            {% image value.logo width-200 as logo_img %}
            <img src="{{ logo_img.url }}" alt="Logo Enap" class="logo-image">
        </a>
        
        <nav class="nav">
            <div class="nav-linktwo">
                {% for item in value.menu_items %}
                    <a href="{{ item.url }}" class="nav-linktwo {% if item.featured %}featured{% endif %}" 
                       data-featured="{{ item.featured|yesno:'true,false' }}">
                        {{ item.text }}
                    </a>
                {% endfor %}
            </div>
            
            <a href="{{ value.portal_url }}" class="btn-component">
                {{ value.portal_text }}
                <span class="btn-icon">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M5 12h14"></path>
                        <path d="M12 5l7 7-7 7"></path>
                    </svg>
                </span>
            </a>
            
            <button class="mobile-menu-btn" aria-label="Toggle mobile menu">
                <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">
                    <line x1="3" y1="12" x2="21" y2="12"></line>
                    <line x1="3" y1="6" x2="21" y2="6"></line>
                    <line x1="3" y1="18" x2="21" y2="18"></line>
                </svg>
            </button>
        </nav>
    </div>
    
    <!-- Mobile menu (hidden by default) -->
    <div class="mobile-nav-links" id="mobile-nav-{{ id }}">
        {% for item in value.menu_items %}
            <a href="{{ item.url }}" class="mobile-nav-link {% if item.featured %}featured{% endif %}">
                {{ item.text }}
            </a>
        {% endfor %}
        <a href="{{ value.portal_url }}" class="mobile-nav-portal">
            {{ value.portal_text }}
        </a>
    </div>
</header>
<script>
(function() {
    // Get unique ID for this navbar instance
    const navbarId = 'navbar-{{ id }}';
    const mobileNavId = 'mobile-nav-{{ id }}';
    
    // Wait for DOM to be loaded
    document.addEventListener('DOMContentLoaded', function() {
        const navbar = document.getElementById(navbarId);
        const mobileNav = document.getElementById(mobileNavId);
        const mobileMenuBtn = navbar.querySelector('.mobile-menu-btn');
        
        // Toggle mobile menu
        mobileMenuBtn.addEventListener('click', function() {
            mobileNav.classList.toggle('show');
        });
        
        // Handle scroll effect
        window.addEventListener('scroll', function() {
            if (window.scrollY > 50) {
                navbar.classList.add('scrolled');
            } else {
                navbar.classList.remove('scrolled');
            }
        });
        
        // Close mobile menu when clicking on a link
        const mobileLinks = mobileNav.querySelectorAll('a');
        mobileLinks.forEach(link => {
            link.addEventListener('click', function() {
                mobileNav.classList.remove('show');
            });
        });
        
        // Set active link based on current URL
        const currentUrl = window.location.pathname;
        const navLinks = navbar.querySelectorAll('.nav-link');
        
        navLinks.forEach(link => {
            const linkUrl = link.getAttribute('href');
            if (linkUrl === currentUrl || (currentUrl === '/' && linkUrl === '#')) {
                link.classList.add('active');
            }
        });
    });
})();
</script>
{% endblock %}