{% load i18n wagtailcore_tags %}
<header class="bg-blue-900 text-white shadow-md lg:sticky top-0 z-40">
  <div class="container mx-auto flex items-center justify-between py-4 px-6">
    {% wagtail_site as current_site %}
    <nav class="flex items-center gap-4">
      <a class="text-xl font-bold" href="/">{{ current_site.site_name }}</a>
      <a href="{% slugurl 'courses' %}" class="hover:underline">{% trans "Courses" %}</a>
      <a href="{% slugurl 'blog' %}" class="hover:underline">{% trans "Blog" %}</a>
      <a href="{% url 'calendar' %}" class="hover:underline">{% trans "Calendar" %}</a>
      <a href="{% url 'user_chat' %}" class="hover:underline">{% trans "Help" %}</a>
    </nav>

    <nav class="flex items-center gap-4">
      {% if user.is_authenticated %}
        <a href="{% url 'account_logout' %}" class="hover:underline">{% trans "Logout" %}</a>
      {% else %}
        <a href="{% url 'account_login' %}" class="hover:underline">{% trans "Login" %}</a>
        <a href="{% url 'account_signup' %}" class="hover:underline">{% trans "Sign Up" %}</a>
      {% endif %}
      <div class="inline-block relative group">
        <form action="{% url 'set_language' %}" method="post">
          {% csrf_token %}
          <button type="button" class="hover:underline focus:outline-none">{% get_current_language as LANGUAGE_CODE %}{{ LANGUAGE_CODE|upper }}</button>
          <div class="absolute right-0 w-32 bg-white text-black rounded-md shadow-lg hidden group-hover:block z-10">
            {% get_available_languages as LANGUAGES %}
            {% for lang_code, lang_name in LANGUAGES %}
              <button name="language" value="{{ lang_code }}" class="block w-full text-left rounded-md px-4 py-2 hover:bg-gray-200">{{ lang_name }}</button>
            {% endfor %}
          </div>
        </form>
      </div>
    </nav>
  </div>

  <div class="container mx-auto px-6 mb-2 md:mb-0">
    <form action="{% url 'search' %}" method="get" class="flex items-center bg-blue-950 rounded-md mb-2 lg:w-auto lg:absolute lg:left-1/2 lg:top-1/2 lg:transform lg:-translate-x-1/2 lg:-translate-y-1/2 lg:mt-0">
      <input type="text" name="query" placeholder="{% trans 'Search courses...' %}" class="rounded-lg px-3 py-2 w-full lg:w-auto focus:outline-none">
      <button type="submit" class="bg-white text-blue-900 rounded-md px-3 py-2 hover:bg-gray-200 transition"><i class="fi fi-br-search"></i></button>
    </form>
  </div>
</header>