{% load static %}
{% load waffle_tags %}

<header class="sticky top-0 z-50 bg-transparent hs-header transition-all duration-300 !border-none"
        x-data="{ scrolled: window.scrollY > 10 }"
        x-init="scrolled = window.scrollY > 10"
        @scroll.window.passive="scrolled = window.scrollY > 10"
        :class="{ 'backdrop-blur-md': scrolled }">
  <div class="absolute inset-0 bg-white/75 z-[-1]"
       x-data
       x-init="$el.style.opacity = Math.min(window.scrollY / 400, 1)"
       @scroll.window.passive="$el.style.opacity = Math.min(window.scrollY / 400, 1)"
       style="opacity: 0; transition: opacity 0.1s linear;">
  </div>

  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex items-center h-16 !border-none">
      <a href="{% url 'pages:home' %}" class="text-lg font-bold text-slate-900 flex items-center h-10">
        {% flag "fish_upper_left" %}
          <img src="{% static 'images/gobii_fish_with_text_purple_nav.png' %}"
               alt="Gobii Fish Wordmark"
               class="h-10 w-auto"
               width="120"
               height="40"
               loading="eager"
               decoding="async">
        {% else %}
          <img src="{% static 'images/noBgIndigo600.png' %}"
               alt="Gobii Wordmark"
               class="h-10 w-auto"
               width="120"
               height="40"
               loading="eager"
               decoding="async">
        {% endflag %}
      </a>
    </div>
  </div>
</header>