<nav class="border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 shadow-sm">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex justify-between h-16">

      <div class="flex items-center">
        {% if logo.show_in_nav %}
          {% if logo.has_dark_variant %}
          <a href="/" class="flex-shrink-0 mr-4">
            <img src="{{ logo.light_src }}" alt="{{ logo.alt }}" class="h-8 w-auto dark:hidden">
            <img src="{{ logo.dark_src }}" alt="{{ logo.alt }}" class="h-8 w-auto hidden dark:block">
          </a>
          {% else %}
          <a href="/" class="flex-shrink-0 mr-4">
            <img src="{{ logo.light_src }}" alt="{{ logo.alt }}" class="h-8 w-auto">
          </a>
          {% endif %}
        {% endif %}

        <div class="hidden lg:block md:ml-6 md:flex md:space-x-8">
          {% for item in menu_items %}
          <a href="{{ item.href }}"
             class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-colors no-underline{% if item.is_active %} text-gray-900 dark:text-white font-semibold{% endif %}"
             {% if item.is_external %}target="_blank" rel="noopener noreferrer"{% endif %}>
            {{ item.label }}
          </a>
          {% endfor %}
        </div>
      </div>

      <div class="flex items-center space-x-2">
        <div class="hidden md:flex md:items-center md:space-x-2">
          <div class="flex items-center space-x-2 nav-ctl-group">
            {{ theme_html | safe }}
            {{ lang_html | safe }}
            {{ login_html | safe }}
          </div>
        </div>

        <div class="md:hidden flex items-center">
          <button onclick="document.getElementById('navbar-collapse').classList.toggle('hidden')"
                  class="ds-mobile-menu-btn"
                  aria-controls="navbar-collapse"
                  aria-expanded="false"
                  aria-label="Open navigation menu">
            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
            </svg>
          </button>
        </div>
      </div>

    </div>

    <div id="navbar-collapse" class="hidden md:hidden border-t border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800">
      <div class="px-2 pt-2 pb-3 space-y-1">
        {% for item in menu_items %}
        <a href="{{ item.href }}"
           class="block text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-colors no-underline{% if item.is_active %} text-gray-900 dark:text-white font-semibold{% endif %}"
           {% if item.is_external %}target="_blank" rel="noopener noreferrer"{% endif %}>
          {{ item.label }}
        </a>
        {% endfor %}
      </div>
      <div class="px-3 py-2 border-t border-gray-200 dark:border-gray-700">
        <div class="flex items-center justify-between">
          <span class="text-sm text-gray-500 dark:text-gray-400">{{ mobile_controls_label }}</span>
          <div class="flex items-center space-x-2 nav-ctl-group">
            {{ theme_html | safe }}
            {{ lang_html | safe }}
            {{ login_html | safe }}
          </div>
        </div>
      </div>
    </div>
  </div>
</nav>
