{#
Renders django-simplemenu Menu with Bootstrap 5 styling.

Usage:
  {% include "dash/shared/navbar.html" with menu=menus.primary %}

Custom MenuItem attributes (not part of default django-simplemenu):
  - icon: Font Awesome icon name
         Example: MenuItem("Home", reverse("home"), icon="home")
  - is_external: Opens link in new tab with target="_blank" rel="noopener"
                Example: MenuItem("Docs", "https://example.com", is_external=True)

Optional parameters:
  - outer_class: CSS class for the <ul> element (default: "nav")
#}
<ul class="{{ outer_class|default:"nav" }}">
  {% for item in menu %}
    {% if item.visible %}
      <li class="nav-item"{% if item.slug %} data-nav-slug="{{ item.slug }}"{% endif %}>
        <a {% if item.url %}href="{{ item.url }}"{% endif %} class="nav-link{% if item.selected and not item.children %} active{% endif %} {% if item.icon %}has-icon{% endif %}{% if item.is_external %} is-external{% endif %}"{% if item.is_external %} target="_blank" rel="noopener"{% endif %}>
          {% if item.icon %}
            <span class="menu__icon">
              <i class="fa-solid fa-{{ item.icon }}"></i>
            </span>
          {% endif %}
          <span class="menu__text">
            {{ item.title }}
          </span>
        </a>
        {% if item.children %}
          <ul class="nav flex-column nav--children">
          {% for child in item.children %}
            {% if child.visible %}
              <li class="nav-item"{% if child.slug %} data-nav-slug="{{ child.slug }}"{% endif %}>
                <a {% if child.url %}href="{{ child.url }}"{% endif %} class="nav-link{% if child.selected %} active{% endif %} {% if child.icon %}has-icon{% endif %}{% if child.is_external %} is-external{% endif %}"{% if child.is_external %} target="_blank" rel="noopener"{% endif %}>
                  {% if child.icon %}
                    <span class="menu__icon">
                      <i class="fa-solid fa-{{ child.icon }}"></i>
                    </span>
                  {% endif %}
                  <span class="menu__text">
                    {{ child.title }}
                  </span>
                </a>
              </li>
            {% endif %}
          {% endfor %}
          </ul>
        {% endif %}
      </li>
    {% endif %}
  {% endfor %}
</ul>