{% load i18n insight_tags %}

{# Skip-Link for Accessibility, placed BEFORE nav #}
<a href="#main-content" class="p-2 text-white bg-insight-primary-action rounded-insight-control sr-only focus:not-sr-only focus:absolute focus:top-0 focus:left-0">
  {% trans 'Jump to main content' %}
</a>

<nav
  role="navigation"
  aria-label="{% trans 'Main navigation' %}"
  class="{% if fixed %}fixed z-50{% else %}relative{% endif %} px-4 w-full h-16 bg-insight-base border-b border-insight-surface shadow-insight-surface md:px-6"
>
  {# Desktop Navigation #}
  <div class="flex flex-wrap gap-2 justify-between items-center h-full lg:flex-nowrap">
    {# Brand Logo #}
    {% if navbar_config.brand %}
      <a
        href="{{ navbar_config.brand.request_url }}"
        class="flex items-center font-bold text-xl text-insight-headline"
        {% if navbar_config.brand.aria_label %}aria-label="{{ navbar_config.brand.aria_label }}"{% elif navbar_config.brand.mark.primary_text %}aria-label="{{ navbar_config.brand.mark.primary_text }}"{% endif %}
      >
        {% if navbar_config.brand.mark %}
          {% brand_mark config=navbar_config.brand.mark %}
        {% endif %}
      </a>
    {% endif %}

    {# Mobile menu button #}
    <div class="flex gap-2 items-center py-3 lg:hidden">
      {# Mobile Menu Toggle #}
      <button
        class="inline-flex justify-center items-center p-2 text-insight-body rounded-insight-control transition-colors duration-200 hover:text-insight-text-link-hover focus:ring-insight-focus"
        aria-expanded="false"
        aria-controls="navigation-menu"
        aria-label="{% trans 'Open menu' %}"
        data-insight-collapsible="navigation-menu"
      >
        {% icon name="bars-3" %}
      </button>
    </div>

    <div id="navigation-menu" class="hidden grow w-full h-full lg:block lg:w-fit lg:py-3">
      <div class="insight-surface flex flex-col gap-6 justify-end p-2 w-full md:bg-insight-base lg:flex-row lg:h-full lg:p-0 lg:shadow-none lg:bg-transparent lg:border-none">
        {# Main-Navigation #}
        {% if navbar_config.links %}
          <ul class="flex flex-col justify-items-stretch w-full lg:flex-row lg:items-center lg:w-fit">
            {% for link in navbar_config.links %}
              {% if not link.need_auth or options.user.is_authenticated and not link.staff_only or options.user.is_staff %}
                <li data-insight-nav>
                  {% if link.request_url %}
                    <a
                      href="{{ link.request_url }}"
                      {% if link.htmx %}
                        hx-get="{{ link.htmx.request_url|default:link.request_url }}"
                        hx-target="{{ link.htmx.target }}"
                        hx-swap="{{ link.htmx.swap|default:'innerHTML' }} show:window:top"
                        hx-push-url="true"
                        hx-on::after-request="document.body.dispatchEvent(new Event('PageChanged'))"
                      {% endif %}
                      class="insight-nav-link flex gap-2 px-4 py-2 h-full text-sm whitespace-nowrap"
                      {% if link.active %}aria-current="page"{% endif %}
                      {% if link.external %}target="_blank" rel="noopener"{% endif %}
                    >
                      {% if link.icon %}
                        {% icon link.icon %}
                      {% endif %}
                      {{ link.text }}
                    </a>
                  {% elif link.dropdown %}
                    <div class="relative">
                      <button data-insight-dropdown="{{ link.dropdown.tag_id }}" class="insight-nav-link flex gap-2 px-4 py-2 h-full text-sm whitespace-nowrap">
                        {% if link.icon %}
                          {% icon link.icon %}
                        {% endif %}
                        {{ link.text }}
                        {% if link.chevron %}
                          {% icon name="chevron-down" size="s" %}
                        {% endif %}
                      </button>
                      <div id="{{ link.dropdown.tag_id }}" class="hidden bg-insight-surface border border-insight-surface rounded-insight-overlay shadow-insight-overlay">
                        <div class="py-1">
                          {% for item in link.dropdown.items %}
                            <a
                              {% if item.htmx %}
                                hx-get="{{ item.htmx.request_url|default:item.request_url }}"
                                hx-target="{{ item.htmx.target }}"
                                hx-swap="{{ item.htmx.swap_method|default:'innerHTML' }} show:window:top"
                                hx-push-url="{{ item.htmx.push_url|yesno:'true,false' }}"
                                hx-on::after-request="document.body.dispatchEvent(new Event('PageChanged'))"
                              {% endif %}
                              href="{{ item.request_url|default:'' }}"
                              class="insight-nav-dropdown-item block px-4 py-2 text-sm"
                            >{{ item.text }}</a>
                          {% endfor %}
                        </div>
                      </div>
                    </div>
                  {% elif link.modal %}
                    <button
                      class="insight-nav-link px-4 py-2 text-sm"
                      data-insight-modal="{{ link.modal.tag_id }}"
                    >
                      {{ link.text }}
                    </button>
                    {% modal config=link.modal %}
                  {% endif %}
                </li>
              {% endif %}
            {% endfor %}
          </ul>
        {% endif %}

        {# Other Nav-Elements #}
        <div class="flex flex-col gap-2 w-full lg:flex-row lg:w-fit">
          {% if navbar_config.search_bar %}
            <div class="flex-1 lg:max-w-72">
              {% search_bar config=navbar_config.search_bar simple=True search_query=options.search_query %}
            </div>
          {% endif%}
          <div class="flex gap-2 h-10">
            {% if login_url or user.is_authenticated %}
              {% include "insight_ui/components/user_dropdown.html" with usermenu=navbar_config.usermenu hide_login=navbar_config.hide_login login_url=login_url register_url=register_url %}
            {% endif %}
            {% if navbar_config.show_language_selector %}
              {% include "insight_ui/components/toggle_language.html" %}
            {% endif %}
            {% if navbar_config.show_theme_toggle %}
              {% include "insight_ui/components/toggle_theme.html" %}
            {% endif %}
          </div>
        </div>
      </div>
    </div>
  </div>
</nav>