{% load static %}
<nav class="navbar" id="navbar" role="navigation" aria-label="Main navigation">
  <div class="navbar-container">

    <a href="{% url 'pages:home' %}" class="navbar-brand" aria-label="Radiuma home">
      {% include "partials/_brand_icon.html" with placement="navbar" %}
      <span class="brand-name">Radiuma</span>
    </a>

    <button class="navbar-toggle" id="navbarToggle" aria-expanded="false" aria-controls="navbarMenu" aria-label="Toggle navigation">
      <span class="toggle-bar"></span>
      <span class="toggle-bar"></span>
      <span class="toggle-bar"></span>
    </button>

    <div class="navbar-menu" id="navbarMenu">
      <ul class="nav-list" role="list">

        <li class="nav-item">
          <a href="{% url 'pages:home' %}" class="nav-link {% if request.resolver_match.url_name == 'home' %}active{% endif %}">
            Home
          </a>
        </li>

        {% if nav_main_products %}
        <li class="nav-item has-megamenu" id="productsNavItem">
          <a href="{% url 'products:overview' %}" class="nav-link {% if 'products' in request.resolver_match.namespace %}active{% endif %}" aria-haspopup="true" aria-expanded="false" id="productsTrigger">
            Products
            <svg class="nav-arrow" width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden="true">
              <path d="M2 4L6 8L10 4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
          </a>
          <div class="megamenu" role="menu" aria-labelledby="productsTrigger">
            <div class="megamenu-inner">
              <div class="megamenu-products-scroll" tabindex="0" aria-label="Product list">
                <ul class="megamenu-products" role="list">
                  {% for product in nav_main_products %}
                  <li class="megamenu-product-item{% if product.sub_products.all %} has-subproducts{% endif %}">
                    <a href="{{ product.get_absolute_url }}" class="megamenu-product-link" role="menuitem">
                      <span class="megamenu-product-name">
                        {{ product.name }}
                        {% if product.sub_products.all %}
                        <svg class="megamenu-sub-chevron" width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden="true">
                          <path d="M2 4L6 8L10 4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                        {% endif %}
                      </span>
                      <span class="megamenu-product-desc">{{ product.short_description }}</span>
                    </a>
                    {% if product.sub_products.all %}
                    <ul class="megamenu-sublist" role="list" aria-label="{{ product.name }} modules">
                      {% for sub in product.sub_products.all %}
                      <li>
                        <a href="{{ sub.get_absolute_url }}" class="megamenu-sublink" role="menuitem">{{ sub.name }}</a>
                      </li>
                      {% endfor %}
                    </ul>
                    {% endif %}
                  </li>
                  {% endfor %}
                </ul>
              </div>
            </div>
          </div>
        </li>
        {% endif %}

        <li class="nav-item">
          <a href="{% url 'pages:about' %}" class="nav-link {% if request.resolver_match.url_name == 'about' %}active{% endif %}">
            About
          </a>
        </li>

        <li class="nav-item">
          <a href="{% url 'pages:faq' %}" class="nav-link {% if request.resolver_match.url_name == 'faq' %}active{% endif %}">
            FAQ
          </a>
        </li>

        <li class="nav-item">
          <a href="{% url 'pages:contact' %}" class="nav-link nav-link--cta {% if request.resolver_match.url_name == 'contact' %}active{% endif %}">
            Contact
          </a>
        </li>

      </ul>
    </div>

  </div>
</nav>
