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


<div class="relative">
  <div class="relative pb-11 md:pb-3">
    <div>
      <div class="hidden items-center pt-2 pb-4 border-b-2 border-gray-300 md:flex darK:border-charcoal">
        <div class="w-[130px]">
          <a href="{% url 'home' %}">
              <img class="hidden -mb-3 w-auto dark:inline-block h-[32px]"
                   src="{% static 'img/Boost_Brandmark_WhiteBoost_Transparent.svg' %}"
                   alt="Boost">

              <img class="inline-block -mb-3 w-auto dark:hidden h-[32px]"
                   src="{% static 'img/Boost_Brandmark_BlackBoost_Transparent.svg' %}"
                   alt="Boost">
          </a>
        </div>
        <div class="flex pt-5 w-full">
          <nav class="relative items-center pl-6 space-x-10 w-3/4 text-lg text-left">
            <a href="{% url 'news' %}" class="font-semibold dark:font-medium dark:text-white text-slate dark:hover:text-orange hover:text-orange">News</a>
            <a href="{% url 'docs' %}" class="font-semibold dark:font-medium dark:text-white text-slate dark:hover:text-orange hover:text-orange">Learn</a>
            <a href="/forum/" class="font-semibold dark:font-medium dark:text-white text-slate dark:hover:text-orange hover:text-orange">Community</a>
            <a href="/libraries/" class="font-semibold dark:font-medium dark:text-white text-slate dark:hover:text-orange hover:text-orange">Libraries</a>
            <a href="#" class="font-semibold dark:font-medium dark:text-white text-slate dark:hover:text-orange hover:text-orange">Releases</a>
          </nav>
          <nav class="items-center space-x-5 w-1/4 text-right" x-data="{ 'searchOpen': false }">
            <span class="relative">
              <i class="inline-flex -mt-1 cursor-pointer text-slate fas fa-search dark:text-white/50 dark:hover:text-orange hover:text-orange" @click="searchOpen = !searchOpen"></i>
              <div x-show="searchOpen"
                   @click.away="searchOpen = false"
                   x-transition:enter="transition ease-out duration-100"
                   x-transition:enter-start="transform opacity-0 scale-95"
                   x-transition:enter-end="transform opacity-100 scale-100"
                   x-transition:leave="transition ease-in duration-75"
                   x-transition:leave-start="transform opacity-100 scale-100"
                   x-transition:leave-end="transform opacity-0 scale-95"
                   class="absolute -top-2 -right-2 z-10"
                   x-ref="search-form"
                   x-description="Search"
                   role="menu"
                   aria-orientation="vertical"
                   aria-labelledby="search-button"
                   tabindex="-1"
                   style="display: none;"
              >
                <form action="https://www.google.com/search" method="get" name="searchform" target="_blank">
                  <input name="sitesearch" type="hidden" value="boost.org">
                  <input autocomplete="on"
                         class="py-2 px-3 text-xs bg-white rounded-lg border-gray-300 text-charcoal dark:text-charcoal dark:border-slate dark:bg-charcoal"
                         name="q"
                         placeholder="Search Boost.org"
                         required="required"
                         type="text"
                  >
                  <span class="flex absolute inset-y-0 right-3 items-center pl-2">
                    <button type="submit">
                      <i class="fas fa-search text-charcoal dark:text-white/40 dark:hover:text-orange hover:text-orange"></i>
                    </button>
                  </span>
                </form>
              </div>
            </span>

            <a href="{% url 'support' %}" class="inline-flex"><i class="text-slate fas fa-question-circle dark:text-white/50 dark:hover:text-orange hover:text-orange"></i></a>

            <!-- theme switcher -->
            <span x-data="{ 'modeOpen': false }" class="relative">
              <span class="dark:hidden">
                <i class="inline-block cursor-pointer fas fa-sun text-sky-500 dark:text-white/50 dark:hover:text-gold hover:text-gold" @click="modeOpen = !modeOpen"></i>
              </span>
              <span class="hidden dark:inline">
                <i class="inline-block cursor-pointer fas fa-moon text-orange dark:text-sky-600 dark:hover:text-gold/80 hover:text-gold/60" @click="modeOpen = !modeOpen"></i>
              </span>

              <div
                x-show="modeOpen" x-cloak
                @click.away="modeOpen = false"
                x-transition:enter="transition ease-out duration-100"
                x-transition:enter-start="transform opacity-0 scale-95"
                x-transition:enter-end="transform opacity-100 scale-100"
                x-transition:leave="transition ease-in duration-75"
                x-transition:leave-start="transform opacity-100 scale-100"
                x-transition:leave-end="transform opacity-0 scale-95"
                x-data="{
                    mode: '',
                    setColorMode: m => {
                        if (m === 'dark') {
                            document.documentElement.classList.add('dark')
                            localStorage.setItem('colorMode', 'dark')
                        } else {
                            document.documentElement.classList.remove('dark')
                            localStorage.setItem('colorMode', 'light')
                        }
                    }
                }"

                class="absolute right-0 z-10 py-1 px-2 mt-2 w-32 text-left bg-white rounded-md divide-y divide-gray-300 ring-1 ring-gray-300 shadow-lg origin-top-right dark:ring-gray-500 dark:bg-charcoal"
              >
                <a
                  @click="mode='light'; setColorMode('light'); modeOpen = false;"
                  :class="{'font-bold': mode === 'light', 'font-thin': mode !== 'light' }"
                  class="block py-2 text-xs cursor-pointer dark:text-white text-charcoal dark:hover:text-orange hover:text-orange"
                  >
                  <i class="inline-block mr-1 fas fa-sun text-gold"></i>
                  Light Mode
                </a>

                <a
                  @click="mode = 'dark'; setColorMode('dark'); modeOpen = false;"
                  :class="{'font-bold': mode === 'dark', 'font-thin': mode !== 'dark' }"
                  class="block py-2 text-xs cursor-pointer dark:text-white text-charcoal dark:hover:text-orange hover:text-orange"
                  >
                  <i class="inline-block mr-1 fas fa-moon text-sky-600"></i>
                  Dark Mode
                </a>
              </div>
            </span>

            <span x-data="{ 'userOpen': false }" class="relative">
              {% if not user.is_authenticated %}
                <a href="{% url 'account_signup' %}" class="font-medium dark:text-white text-charcoal dark:hover:text-orange hover:text-orange">Join</a>
              {% else %}
                {% if user.image %}
                  <img src="{{ user.image.url }}" alt="user" class="inline-flex rounded-sm cursor-pointer w-[30px]" @click="userOpen = !userOpen" />
                {% else %}
                  <i class="inline-flex mr-2 text-5xl fas fa-user text-charcoal dark:text-white/60"></i>
                {% endif %}
              {% endif %}

              {% if user.is_authenticated %}
              <div x-show="userOpen"
                   @click.away="userOpen = false"
                   x-transition:enter="transition ease-out duration-100"
                   x-transition:enter-start="transform opacity-0 scale-95"
                   x-transition:enter-end="transform opacity-100 scale-100"
                   x-transition:leave="transition ease-in duration-75"
                   x-transition:leave-start="transform opacity-100 scale-100"
                   x-transition:leave-end="transform opacity-0 scale-95"
                   class="absolute right-0 z-10 py-1 px-2 mt-2 w-32 text-left bg-white rounded-md divide-y divide-gray-300 ring-1 ring-gray-300 shadow-lg origin-top-right dark:ring-gray-500 darK:divide-gray-500 dark:bg-charcoal"
                   x-ref="menu-items"
                   x-description="Profile Menu"
                   role="menu"
                   aria-orientation="vertical"
                   aria-labelledby="user-menu-button"
                   tabindex="-1"
                   style="display: none;"
              >
                <a href="#" class="block py-2 text-xs dark:text-white text-charcoal dark:hover:text-orange hover:text-orange">My Profile</a>
                <a href="{% url 'account_logout' %}" class="block py-2 text-xs dark:text-white text-charcoal dark:hover:text-orange hover:text-orange">Log Out</a>
              </div>
            {% endif %}
            </span>
          </nav>
        </div>
      </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="flex pb-2 bg-charcoal">
          <div class="flex items-center pt-2 mx-auto">
            <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="inline-flex absolute top-0 right-0 justify-center items-center p-2 rounded-md 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 w-6 h-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="pb-1 border-b border-slate">
          <div class="inline-block relative pt-2 pl-2 mx-auto h-full">
            <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="inline-flex float-right justify-center items-center p-2 rounded-md 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 w-6 h-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 w-6 h-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="absolute inset-x-0 top-10 z-50 h-screen bg-charcoal">
          <div class="px-2 pt-2 pb-3 text-2xl">
            <a href="/versions/" class="block py-2 px-3 text-white dark:hover:text-orange hover:text-orange">Versions</a>

            <a href="/libraries/" class="block py-2 px-3 text-white dark:hover:text-orange hover:text-orange">Libraries</a>

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

            <a href="/forum/" class="block py-2 px-3 text-white dark:hover:text-orange hover:text-orange">Forums</a>

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

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

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

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

            <a href="{% url 'account_signup' %}" class="block py-2 px-3 text-gray-700 text-thin">Sign Up</a>

            <a href="#" class="block py-2 px-3 text-gray-700 text-thin">Log In </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>