{% load wagtailimages_tags %}
{% load wagtailimages_tags css_tags %}{% block_css 'enap_designsystem/blocks/semana.css' %}

<style>
    .nav-linktwo {
        color: {{ value.cor_texto }};
    }
    
    .nav-linktwo.active {
        color: {{ value.cor_hover }};
    }

    .nav-linktwo:hover {
        border-bottom: 3px solid {{ value.cor_hover }} !important;
        color: {{ value.cor_hover }};
    }

    .nav-linktwo:active {
        border-bottom: 3px solid {{ value.cor_ativo }} !important;
        color: {{ value.cor_ativo }};
    }

    @media (max-width: 768px) {
        .navbar-collapse.show .mobile-nav {
            display: flex;
            height: fit-content;
            background-color: {{ value.cor_fundo }};
        }
    }
</style>
<nav class="navbar_semana" style="background-color: {{ value.cor_fundo }};">
    <div class="container-fluid_semana">
        <!-- Logo -->
        {% if value.logo %}
            <a class="navbar-brand" href="{{ value.logo_url}}">
                {% image value.logo original %}
            </a>
        {% endif %}

        <!-- Menu Items -->
        <div class="navbar-nav-container">
            <ul class="navbar-nav">
                {% for item in value.items_menu %}
                    <li class="nav-item">
                        {% if item.pagina_interna %}
                            <a class="nav-linktwo {% if item.ativo %}active{% endif %}" 
                                href="{{ item.pagina_interna.url }}">
                                {{ item.texto }}
                            </a>
                        {% elif item.url %}
                            <a class="nav-linktwo {% if item.ativo %}active{% endif %}" 
                                href="{{ item.url }}" 
                                target="_blank" 
                                rel="noopener">
                                {{ item.texto }}
                            </a>
                        {% else %}
                            <span class="nav-linktwo {% if item.ativo %}active{% endif %}">
                                {{ item.texto }}
                            </span>
                        {% endif %}
                    </li>
                {% endfor %}
            </ul>
        </div>

        <!-- Mobile Menu Button -->
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
            <span style="color: #ffffff;" class="material-icons" aria-hidden="true">menu</span>
        </button>

        <!-- Mobile Menu -->
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav mobile-nav">
                {% for item in value.items_menu %}
                    <li class="nav-item">
                        {% if item.pagina_interna %}
                            <a class="nav-linktwo {% if item.ativo %}active{% endif %}" 
                                href="{{ item.pagina_interna.url }}">
                                {{ item.texto }}
                            </a>
                        {% elif item.url %}
                            <a class="nav-linktwo {% if item.ativo %}active{% endif %}" 
                                href="{{ item.url }}" 
                                target="_blank" 
                                rel="noopener">
                                {{ item.texto }}
                            </a>
                        {% else %}
                            <span class="nav-linktwo {% if item.ativo %}active{% endif %}">
                                {{ item.texto }}
                            </span>
                        {% endif %}
                    </li>
                {% endfor %}
            </ul>
        </div>
    </div>
</nav>

<script>
    // Mobile menu functionality
    document.addEventListener('DOMContentLoaded', function() {
        const toggler = document.querySelector('.navbar-toggler');
        const collapse = document.querySelector('.navbar-collapse');
        
        if (toggler && collapse) {
            toggler.addEventListener('click', function() {
                collapse.classList.toggle('show');
            });
            
            // Close menu when clicking outside
            document.addEventListener('click', function(event) {
                if (!toggler.contains(event.target) && !collapse.contains(event.target)) {
                    collapse.classList.remove('show');
                }
            });
        }
    });

    // Smooth scroll for internal links
    document.addEventListener('DOMContentLoaded', function() {
        const links = document.querySelectorAll('.nav-link[href^="#"]');
        
        links.forEach(link => {
            link.addEventListener('click', function(e) {
                e.preventDefault();
                const targetId = this.getAttribute('href').substring(1);
                const targetElement = document.getElementById(targetId);
                
                if (targetElement) {
                    targetElement.scrollIntoView({
                        behavior: 'smooth',
                        block: 'start'
                    });
                }
            });
        });
    });
</script>