{% 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">
      <img src="{% static 'images/favicon-180.png' %}" alt="" class="brand-icon" width="24" height="24" aria-hidden="true" />
      <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-grid">
                {% for product in nav_main_products %}
                <div class="megamenu-column">
                  <a href="{{ product.get_absolute_url }}" class="megamenu-product-title" role="menuitem">
                    {{ product.name }}
                    <svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true">
                      <path d="M3 7H11M11 7L8 4M11 7L8 10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                    </svg>
                  </a>
                  <p class="megamenu-product-desc">{{ product.short_description }}</p>
                  {% with subs=product.sub_products.all %}
                  {% if subs %}
                  <ul class="megamenu-sublist" role="list">
                    {% for sub in subs %}
                    {% if sub.is_active %}
                    <li>
                      <a href="{{ sub.get_absolute_url }}" class="megamenu-sublink" role="menuitem">
                        <span class="sublink-dot"></span>
                        {{ sub.name }}
                      </a>
                    </li>
                    {% endif %}
                    {% endfor %}
                  </ul>
                  {% endif %}
                  {% endwith %}
                </div>
                {% endfor %}
              </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>
