{% load static %}
{% load account socialaccount %}


<div class="relative bg-gray-50">
  <div class="relative pb-11 md:pb-6">
    <div>
      <div class="hidden md:block mx-auto px-3 sm:px-6 bg-charcoal">
        <nav class="relative flex items-center justify-between sm:h-10 pt-6 pb-6" aria-label="Global">
          <div class="md:flex md:space-x-10 pt-3 pb-3 pl-3">
            <a href="{% url 'boost-about' %}" class="font-medium text-gray-500 hover:text-gray-900">About</a>

            <a href="{% url 'support' %}" class="font-medium text-gray-500 hover:text-gray-900">Support</a>

            <a href="{% url 'resources' %}" class="font-medium text-gray-500 hover:text-gray-900">Resources</a>

            {% if not user.is_authenticated %}
              <a href="{% url 'account_signup' %}" class="font-medium text-gray-500 hover:text-gray-900">Signup</a>
            {% endif %}

            {% if not user.is_authenticated %}
              <a href="{% url 'account_login' %}" class="font-medium text-gray-500 hover:text-gray-900">Login</a>
            {% else %}
              <a href="{% url 'account_logout' %}" class="font-medium text-gray-500 hover:text-gray-900">Logout</a>
            {% endif %}

            <a href="#" class="font-medium text-gray-500 hover:text-gray-900">
              <img class="mt-1" src="{% static 'img/icons/icon-search.svg' %}" alt="Search" />
            </a>
          </div>
          <div class="items-center flex">
            <span id="icon-container" class="inline-block w-6 h-6"></span>
            <span class="inline-block ml-2 text-sm uppercase text-orange"> 1.79.0 Releases on 9-8-22<small> > </small></span>
          </div>
        </nav>
      </div>
      <div class="hidden md:block py-5 border-b-2 border-charcoal">
        <!-- TODO: Fix border -->
        <nav class="relative flex items-center justify-between sm:h-10 md:justify-center">
          <div class="hidden sm:block sm:absolute sm:inset-y-0 sm:h-full sm:w-full md:space-x-10" aria-hidden="true">
            <div class="relative h-full mx-auto pl-8 inline">
              <a href="{% url 'home' %}"><img class="inline w-auto h-[50px]" src="{% static 'img/Boost_Brandmark_WhiteBoost_Transparent.svg' %}" alt="Boost"></a>
            </div>
            <div class="inline pt-4 md:space-x-10 float-right pr-8 text-lg">
              <a href="{% url "version-list" %}" class="font-medium text-gray-500 hover:text-gray-900">Versions</a>

              <a href="/libraries/" class="font-medium text-gray-500 hover:text-gray-900">Libraries</a>

              <a href="{% url "review-process" %}" class="font-medium text-gray-500 hover:text-gray-900">Review Process</a>

              <a href="/forum/" class="font-medium text-gray-500 hover:text-gray-900">Forums</a>

              <a href="{% url 'news' %}" class="font-medium text-gray-500 hover:text-gray-900">News</a>

              <a href="{% url 'donate' %}" class="font-medium text-gray-500 hover:text-gray-900">Donate</a>
            </div>
          </div>
        </nav>
      </div>

      <!-- Mobile menu, show/hide based on menu open state. -->
      <div class="relative z-10 transition transform origin-top-right md:hidden" x-data="{ isOpen: false }">
          <div class="pb-2 flex bg-charcoal">
              <div class="mx-auto flex items-center pt-2">
                <span id="icon-container-mobile" class="inline-block w-6 h-6"></span>
                <span class="inline-block ml-2 text-sm uppercase text-orange"> 1.79.0 Releases on 9-8-22<small> > </small></span>
              </div>
              <button type="button"
                    class="absolute top-0 right-0 inline-flex items-center justify-center rounded-md p-2 text-gray-400 hover:bg-gray-700 hover:text-white focus:outline-none"
                    aria-controls="mobile-menu" @click="isOpen = !isOpen" aria-expanded="false"
                    x-bind:aria-expanded="open.toString()">
                <svg x-description="Icon when menu is open." x-state:on="Menu open" x-state:off="Menu opened" class="hidden h-6 w-6"
                     :class="{ 'block': isOpen, 'hidden': !(isOpen) }" xmlns="http://www.w3.org/2000/svg" fill="none"
                     viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path>
                </svg>
              </button>
          </div>
          <div class="border-b border-slate pb-1">
            <div class="relative h-full mx-auto pl-2 inline-block pt-2">
              <a href="{% url 'home' %}"><img class="inline w-auto h-[30px]" src="{% static 'img/Boost_Brandmark_WhiteBoost_Transparent.svg' %}" alt="Boost"></a>
            </div>
            <button type="button"
                    class="float-right inline-flex items-center justify-center rounded-md p-2 text-gray-400 hover:bg-gray-700 hover:text-white focus:outline-none"
                    aria-controls="mobile-menu" @click="isOpen = !isOpen" aria-expanded="false"
                    x-bind:aria-expanded="open.toString()">
              <span class="sr-only">Open main menu</span>
              <svg x-description="Icon when menu is closed." x-state:on="Menu open" x-state:off="Menu closed" class="block h-6 w-6"
                   :class="{ 'hidden': isOpen, 'block': !(isOpen) }" xmlns="http://www.w3.org/2000/svg" fill="none"
                   viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
                <path stroke-linecap="round" stroke-linejoin="round"
                      d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"></path>
              </svg>
              <svg x-description="Icon when menu is open." x-state:on="Menu open" x-state:off="Menu opened" class="hidden h-6 w-6"
                   :class="{ 'block': isOpen, 'hidden': !(isOpen) }" xmlns="http://www.w3.org/2000/svg" fill="none"
                   viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
                <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path>
              </svg>
            </button>
          </div>
          <div x-show="isOpen" class="h-screen z-50 bg-charcoal absolute top-10 inset-x-0">
            <div class="px-2 pt-2 pb-3 text-2xl">
              <a href="/versions/" class="block px-3 py-2 text-gray-500 hover:text-gray-900">Versions</a>

              <a href="/libraries/" class="block px-3 py-2 text-gray-500 hover:text-gray-900">Libraries</a>

              <a href="{% url 'review-process' %}" class="block px-3 py-2 text-gray-500 hover:text-gray-900">Review Process</a>

              <a href="/forum/" class="block px-3 py-2 text-gray-500 hover:text-gray-900">Forums</a>

              <a href="{% url 'news' %}" class="block px-3 py-2 text-gray-500 hover:text-gray-900">News</a>

              <a href="{% url 'donate' %}" class="block px-3 py-2 text-gray-500 hover:text-gray-900">Donate</a>
            </div>
            <div class="px-2 pt-2 pb-3 absolute bottom-10 left-0 text-sm">
              <a href="{% url 'boost-about' %}" class="block px-3 py-2 text-thin text-gray-700 hover:text-gray-900 hover:bg-gray-50">About</a>

              <a href="{% url 'support' %}" class="block px-3 py-2 text-thin text-gray-700 hover:text-gray-900 hover:bg-gray-50">Support</a>

              <a href="{% url 'resources' %}" class="block px-3 py-2 text-thin text-gray-700 hover:text-gray-900 hover:bg-gray-50">Resources</a>

              <a href="{% url 'account_signup' %}" class="block px-3 py-2 text-thin text-gray-700 hover:text-gray-900 hover:bg-gray-50">Signup</a>

              <a href="#" class="block px-3 py-2 text-thin text-gray-700 hover:text-gray-900 hover:bg-gray-50">Login </a>
            </div>
          </div>
      </div>
    </div>
  </div>
</div>