{% load static %}
<nav class="bg-neutral-950 px-4 py-3 border-b border-neutral-800 sticky top-0 z-50 shadow-lg">
  <!-- Mobile UI: Icons (Top) Search (Botton)-->
  <div class="lg:hidden flex flex-col gap-4">
    <!-- Icons (Top) with Hidden Logo -->
    <div class="flex flex-row items-center justify-around gap-8">
      <a href="{% url 'home:index' %}" class="flex flex-col gap-2 items-center">
        <!-- Home Icon (Conditional Coloring) -->
        {% if request.path == '/' %}
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          fill="currentColor"
          class="size-6 text-{{ user.preferences.accent_colour }}-400"
        >
          <path
            d="M11.47 3.841a.75.75 0 0 1 1.06 0l8.69 8.69a.75.75 0 1 0 1.06-1.061l-8.689-8.69a2.25 2.25 0 0 0-3.182 0l-8.69 8.69a.75.75 0 1 0 1.061 1.06l8.69-8.689Z"
          />
          <path
            d="m12 5.432 8.159 8.159c.03.03.06.058.091.086v6.198c0 1.035-.84 1.875-1.875 1.875H15a.75.75 0 0 1-.75-.75v-4.5a.75.75 0 0 0-.75-.75h-3a.75.75 0 0 0-.75.75V21a.75.75 0 0 1-.75.75H5.625a1.875 1.875 0 0 1-1.875-1.875v-6.198a2.29 2.29 0 0 0 .091-.086L12 5.432Z"
          />
        </svg>
        <span class="text-xs text-{{ user.preferences.accent_colour }}-400">Home</span>
        {% else %}
        <svg
          xmlns="http://www.w3.org/2000/svg"
          fill="none"
          viewBox="0 0 24 24"
          stroke-width="1.5"
          stroke="currentColor"
          class="size-6"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            d="m2.25 12 8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25"
          />
        </svg>
        <span class="text-xs">Home</span>
        {% endif %}
      </a>

      <!-- Trending icon -->
      <a href="{% url "home:search" %}?sort=%5B%22TRENDING_DESC%22%5D" class="flex flex-col gap-2 items-center">
        {% if 'sort=%5B%22TRENDING_DESC%22%5D' in request.get_full_path or 'sort=[%22TRENDING_DESC%22]' in request.get_full_path %}
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          fill="currentColor"
          class="size-6 text-{{ user.preferences.accent_colour }}-400"
        >
          <path
            fill-rule="evenodd"
            d="M12.963 2.286a.75.75 0 0 0-1.071-.136 9.742 9.742 0 0 0-3.539 6.176 7.547 7.547 0 0 1-1.705-1.715.75.75 0 0 0-1.152-.082A9 9 0 1 0 15.68 4.534a7.46 7.46 0 0 1-2.717-2.248ZM15.75 14.25a3.75 3.75 0 1 1-7.313-1.172c.628.465 1.35.81 2.133 1a5.99 5.99 0 0 1 1.925-3.546 3.75 3.75 0 0 1 3.255 3.718Z"
            clip-rule="evenodd"
          />
        </svg>
        <span class="text-xs text-{{ user.preferences.accent_colour }}-400">Trending</span>
        {% else %}
        <svg
          xmlns="http://www.w3.org/2000/svg"
          fill="none"
          viewBox="0 0 24 24"
          stroke-width="1.5"
          stroke="currentColor"
          class="size-6"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            d="M15.362 5.214A8.252 8.252 0 0 1 12 21 8.25 8.25 0 0 1 6.038 7.047 8.287 8.287 0 0 0 9 9.601a8.983 8.983 0 0 1 3.361-6.867 8.21 8.21 0 0 0 3 2.48Z"
          />
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            d="M12 18a3.75 3.75 0 0 0 .495-7.468 5.99 5.99 0 0 0-1.925 3.547 5.975 5.975 0 0 1-2.133-1.001A3.75 3.75 0 0 0 12 18Z"
          />
        </svg>
        <span class="text-xs">Trending</span>
        {% endif %}
      </a>

      <!-- Schedule icon -->
      <a href="{% url "home:schedule" %}" class="flex flex-col gap-2 items-center">
        {% if request.path == '/schedule' %}
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          fill="currentColor"
          class="size-6 text-{{ user.preferences.accent_colour }}-400"
        >
          <path
            d="M12.75 12.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM7.5 15.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5ZM8.25 17.25a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM9.75 15.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5ZM10.5 17.25a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM12 15.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5ZM12.75 17.25a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM14.25 15.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5ZM15 17.25a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM16.5 15.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5ZM15 12.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM16.5 13.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Z"
          />
          <path
            fill-rule="evenodd"
            d="M6.75 2.25A.75.75 0 0 1 7.5 3v1.5h9V3A.75.75 0 0 1 18 3v1.5h.75a3 3 0 0 1 3 3v11.25a3 3 0 0 1-3 3H5.25a3 3 0 0 1-3-3V7.5a3 3 0 0 1 3-3H6V3a.75.75 0 0 1 .75-.75Zm13.5 9a1.5 1.5 0 0 0-1.5-1.5H5.25a1.5 1.5 0 0 0-1.5 1.5v7.5a1.5 1.5 0 0 0 1.5 1.5h13.5a1.5 1.5 0 0 0 1.5-1.5v-7.5Z"
            clip-rule="evenodd"
          />
        </svg>
        <span class="text-xs text-{{ user.preferences.accent_colour }}-400">Schedule</span>
        {% else %}
        <svg
          xmlns="http://www.w3.org/2000/svg"
          fill="none"
          viewBox="0 0 24 24"
          stroke-width="1.5"
          stroke="currentColor"
          class="size-6"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5m-9-6h.008v.008H12v-.008ZM12 15h.008v.008H12V15Zm0 2.25h.008v.008H12v-.008ZM9.75 15h.008v.008H9.75V15Zm0 2.25h.008v.008H9.75v-.008ZM7.5 15h.008v.008H7.5V15Zm0 2.25h.008v.008H7.5v-.008Zm6.75-4.5h.008v.008h-.008v-.008Zm0 2.25h.008v.008h-.008V15Zm0 2.25h.008v.008h-.008v-.008Zm2.25-4.5h.008v.008H16.5v-.008Zm0 2.25h.008v.008H16.5V15Z"
          />
        </svg>
        <span class="text-xs">Schedule</span>
        {% endif %}
      </a>

      <!-- Watchlist icon -->
      <a href="{% url "home:watchlist" %}" class="flex flex-col gap-2 items-center">
        {% if request.path == '/watchlist' %}
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          fill="currentColor"
          class="size-6 text-{{ user.preferences.accent_colour }}-400"
        >
          <path
            d="M4.5 4.5a3 3 0 0 0-3 3v9a3 3 0 0 0 3 3h8.25a3 3 0 0 0 3-3v-9a3 3 0 0 0-3-3H4.5ZM19.94 18.75l-2.69-2.69V7.94l2.69-2.69c.944-.945 2.56-.276 2.56 1.06v11.38c0 1.336-1.616 2.005-2.56 1.06Z"
          />
        </svg>
        <span class="text-xs text-{{ user.preferences.accent_colour }}-400">Watchlist</span>
        {% else %}
        <svg
          xmlns="http://www.w3.org/2000/svg"
          fill="none"
          viewBox="0 0 24 24"
          stroke-width="1.5"
          stroke="currentColor"
          class="size-6"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            d="m15.75 10.5 4.72-4.72a.75.75 0 0 1 1.28.53v11.38a.75.75 0 0 1-1.28.53l-4.72-4.72M4.5 18.75h9a2.25 2.25 0 0 0 2.25-2.25v-9a2.25 2.25 0 0 0-2.25-2.25h-9A2.25 2.25 0 0 0 2.25 7.5v9a2.25 2.25 0 0 0 2.25 2.25Z"
          />
        </svg>
        <span class="text-xs">Watchlist</span>
        {% endif %}
      </a>

      <!-- Profile Icon -->
      <a href="{% url "profile:user_profile" %}" class="flex flex-col gap-2 items-center">
        {% if  request.user.discord_avatar %}
          <img
            src="https://cdn.discordapp.com/avatars/{{ request.user.discord_id }}/{{ request.user.discord_avatar }}?size=128"
            alt="Profile"
            class="h-8 w-8 rounded-full"
            />
          <span class="text-xs {% if request.path == "/profile/" %}text-{{ user.preferences.accent_colour }}-400{% endif %}">
            {% if request.user.preferences.display_guild_name_instead_of_username and request.user.discord_guild_name %}
              {{ request.user.discord_guild_name }}
            {% elif request.user.discord_global_name%}
              {{ request.user.discord_global_name }}
            {% else %}
              {{ request.user.username }}
            {% endif %}
          </span>
          {% else %}
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-6">
            <path fill-rule="evenodd" d="M7.5 6a4.5 4.5 0 1 1 9 0 4.5 4.5 0 0 1-9 0ZM3.751 20.105a8.25 8.25 0 0 1 16.498 0 .75.75 0 0 1-.437.695A18.683 18.683 0 0 1 12 22.5c-2.786 0-5.433-.608-7.812-1.7a.75.75 0 0 1-.437-.695Z" clip-rule="evenodd" />
          </svg>
          <span class="text-xs {% if request.path == "/profile/" %}text-{{ user.preferences.accent_colour }}-400{% endif %}">Profile</span>
        {% endif %}
      </a>
    </div>
    <!-- Search Bar on the Bottom of Icons -->
    <div class="w-full">
      <input
        type="text"
        id="mobile-search"
        placeholder="Search Anime"
        class="bg-neutral-900 text-white text-sm w-full outline-none focus:outline-none border border-neutral-800 rounded-lg pl-4 py-3 pr-12"
        onkeyup="handleSearchInput(event, 'mobile')"
        onfocus="handleInputFocus('mobile')"
        onblur="handleBlur('mobile')"
        value="{{ q }}"
        autocomplete="off"
      />
    </div>
    <!-- Mobile Full-Width Dropdown -->
    <div id="mobile-dropdown" class="absolute top-full left-0 rounded-lg w-full bg-neutral-800 border border-neutral-700 hidden">
      <!-- Sample anime list -->
      {% comment %} <a href="#" class="block px-4 py-2 text-white hover:bg-neutral-700">Anime 1</a>
      <a href="#" class="block px-4 py-2 text-white hover:bg-neutral-700">Anime 2</a> {% endcomment %}
      <!-- Add more anime items here -->
    </div>
  </div>

  <!-- Desktop UI: Icons (Left) Search (Center) Profile (Right)-->
  <div class="hidden lg:block">
    <div class="relative justify-between items-center flex">
      <!-- Logo and Search on the Left -->
      <div class="flex items-center">
        <a href="{% url 'home:index' %}">
          <img
            src="{% static 'icons/Yugen.png' %}"
            alt="Yugen"
            class="h-8 w-8 inline-block rounded-xl mr-2"
          />
          <span class="text-base">Yugen</span>
        </a>
        <div class="relative ml-4">
          <input
            id="desktop-search"
            type="text"
            placeholder="Search Anime"
            class="bg-neutral-900 text-white text-sm lg:w-60 xl:w-96 outline-none focus:outline-none border border-neutral-800 rounded-lg pl-4 py-3 pr-12"
            onkeyup="handleSearchInput(event, 'desktop')"
            onfocus="handleInputFocus('desktop')"
            onblur="handleBlur('desktop')"
            value="{{ q }}"
            autocomplete="off"
          />
          <svg id="search-icon"
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 24 24"
            stroke-width="1.5"
            stroke="currentColor"
            class="size-6 inline-block transform -translate-x-10 cursor-pointer"
            onclick="handleSearchIconClick('desktop')"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z"
            />
          </svg>
          <!-- Desktop Dropdown -->
          <div id="desktop-dropdown" class="absolute top-full left-0 mt-1 rounded-lg w-96 bg-neutral-800 border border-neutral-700 hidden">
            <!-- Sample anime list -->
            {% comment %} <a href="#" class="block px-4 py-2 text-white hover:bg-neutral-700">Anime 1</a>
            <a href="#" class="block px-4 py-2 text-white hover:bg-neutral-700">Anime 2</a> {% endcomment %}
            <!-- Add more anime items here -->
          </div>
        </div>
      </div>

      <!-- Centered Icons -->
      <div class="absolute left-1/2 transform -translate-x-1/2">
        <div class="flex flex-row items-center gap-8">
          <a
            href="{% url 'home:index' %}"
            class="flex flex-col gap-2 items-center"
          >
            <!-- Home Icon (Conditional Coloring) -->
            {% if request.path == '/' %}
            <svg
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 24 24"
              fill="currentColor"
              class="size-6 text-{{ user.preferences.accent_colour }}-400"
            >
              <path
                d="M11.47 3.841a.75.75 0 0 1 1.06 0l8.69 8.69a.75.75 0 1 0 1.06-1.061l-8.689-8.69a2.25 2.25 0 0 0-3.182 0l-8.69 8.69a.75.75 0 1 0 1.061 1.06l8.69-8.689Z"
              />
              <path
                d="m12 5.432 8.159 8.159c.03.03.06.058.091.086v6.198c0 1.035-.84 1.875-1.875 1.875H15a.75.75 0 0 1-.75-.75v-4.5a.75.75 0 0 0-.75-.75h-3a.75.75 0 0 0-.75.75V21a.75.75 0 0 1-.75.75H5.625a1.875 1.875 0 0 1-1.875-1.875v-6.198a2.29 2.29 0 0 0 .091-.086L12 5.432Z"
              />
            </svg>
            <span class="text-xs text-{{ user.preferences.accent_colour }}-400">Home</span>
            {% else %}
            <svg
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
              stroke-width="1.5"
              stroke="currentColor"
              class="size-6"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                d="m2.25 12 8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25"
              />
            </svg>
            <span class="text-xs">Home</span>
            {% endif %}
          </a>

          <!-- Trending icon -->
          <a href="{% url "home:search" %}?sort=%5B%22TRENDING_DESC%22%5D" class="flex flex-col gap-2 items-center">
            {% if 'sort=%5B%22TRENDING_DESC%22%5D' in request.get_full_path or 'sort=[%22TRENDING_DESC%22]' in request.get_full_path %}
            <svg
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 24 24"
              fill="currentColor"
              class="size-6 text-{{ user.preferences.accent_colour }}-400"
            >
              <path
                fill-rule="evenodd"
                d="M12.963 2.286a.75.75 0 0 0-1.071-.136 9.742 9.742 0 0 0-3.539 6.176 7.547 7.547 0 0 1-1.705-1.715.75.75 0 0 0-1.152-.082A9 9 0 1 0 15.68 4.534a7.46 7.46 0 0 1-2.717-2.248ZM15.75 14.25a3.75 3.75 0 1 1-7.313-1.172c.628.465 1.35.81 2.133 1a5.99 5.99 0 0 1 1.925-3.546 3.75 3.75 0 0 1 3.255 3.718Z"
                clip-rule="evenodd"
              />
            </svg>
            <span class="text-xs text-{{ user.preferences.accent_colour }}-400">Trending</span>
            {% else %}
            <svg
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
              stroke-width="1.5"
              stroke="currentColor"
              class="size-6"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                d="M15.362 5.214A8.252 8.252 0 0 1 12 21 8.25 8.25 0 0 1 6.038 7.047 8.287 8.287 0 0 0 9 9.601a8.983 8.983 0 0 1 3.361-6.867 8.21 8.21 0 0 0 3 2.48Z"
              />
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                d="M12 18a3.75 3.75 0 0 0 .495-7.468 5.99 5.99 0 0 0-1.925 3.547 5.975 5.975 0 0 1-2.133-1.001A3.75 3.75 0 0 0 12 18Z"
              />
            </svg>
            <span class="text-xs">Trending</span>
            {% endif %}
          </a>

          <!-- Schedule icon -->
          <a href="{% url "home:schedule" %}" class="flex flex-col gap-2 items-center">
            {% if request.path == '/schedule' %}
            <svg
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 24 24"
              fill="currentColor"
              class="size-6 text-{{ user.preferences.accent_colour }}-400"
            >
              <path
                d="M12.75 12.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM7.5 15.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5ZM8.25 17.25a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM9.75 15.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5ZM10.5 17.25a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM12 15.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5ZM12.75 17.25a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM14.25 15.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5ZM15 17.25a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM16.5 15.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5ZM15 12.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM16.5 13.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Z"
              />
              <path
                fill-rule="evenodd"
                d="M6.75 2.25A.75.75 0 0 1 7.5 3v1.5h9V3A.75.75 0 0 1 18 3v1.5h.75a3 3 0 0 1 3 3v11.25a3 3 0 0 1-3 3H5.25a3 3 0 0 1-3-3V7.5a3 3 0 0 1 3-3H6V3a.75.75 0 0 1 .75-.75Zm13.5 9a1.5 1.5 0 0 0-1.5-1.5H5.25a1.5 1.5 0 0 0-1.5 1.5v7.5a1.5 1.5 0 0 0 1.5 1.5h13.5a1.5 1.5 0 0 0 1.5-1.5v-7.5Z"
                clip-rule="evenodd"
              />
            </svg>
            <span class="text-xs text-{{ user.preferences.accent_colour }}-400">Schedule</span>
            {% else %}
            <svg
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
              stroke-width="1.5"
              stroke="currentColor"
              class="size-6"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5m-9-6h.008v.008H12v-.008ZM12 15h.008v.008H12V15Zm0 2.25h.008v.008H12v-.008ZM9.75 15h.008v.008H9.75V15Zm0 2.25h.008v.008H9.75v-.008ZM7.5 15h.008v.008H7.5V15Zm0 2.25h.008v.008H7.5v-.008Zm6.75-4.5h.008v.008h-.008v-.008Zm0 2.25h.008v.008h-.008V15Zm0 2.25h.008v.008h-.008v-.008Zm2.25-4.5h.008v.008H16.5v-.008Zm0 2.25h.008v.008H16.5V15Z"
              />
            </svg>
            <span class="text-xs">Schedule</span>
            {% endif %}
          </a>

          <!-- Watchlist icon -->
          <a href="{% url "home:watchlist" %}" class="flex flex-col gap-2 items-center">
            {% if request.path == '/watchlist' %}
            <svg
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 24 24"
              fill="currentColor"
              class="size-6 text-{{ user.preferences.accent_colour }}-400"
            >
              <path
                d="M4.5 4.5a3 3 0 0 0-3 3v9a3 3 0 0 0 3 3h8.25a3 3 0 0 0 3-3v-9a3 3 0 0 0-3-3H4.5ZM19.94 18.75l-2.69-2.69V7.94l2.69-2.69c.944-.945 2.56-.276 2.56 1.06v11.38c0 1.336-1.616 2.005-2.56 1.06Z"
              />
            </svg>
            <span class="text-xs text-{{ user.preferences.accent_colour }}-400">Watchlist</span>
            {% else %}
            <svg
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
              stroke-width="1.5"
              stroke="currentColor"
              class="size-6"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                d="m15.75 10.5 4.72-4.72a.75.75 0 0 1 1.28.53v11.38a.75.75 0 0 1-1.28.53l-4.72-4.72M4.5 18.75h9a2.25 2.25 0 0 0 2.25-2.25v-9a2.25 2.25 0 0 0-2.25-2.25h-9A2.25 2.25 0 0 0 2.25 7.5v9a2.25 2.25 0 0 0 2.25 2.25Z"
              />
            </svg>
            <span class="text-xs">Watchlist</span>
            {% endif %}
          </a>
        </div>
      </div>

      <!-- Profile Icons on the Right -->
      <div class="flex items-center">
        <!-- Profile Icon -->
        <a href="{% url "profile:user_profile" %}" class="flex flex-col gap-2 items-center">
          {% if  request.user.discord_avatar %}
          <img
            src="https://cdn.discordapp.com/avatars/{{ request.user.discord_id }}/{{ request.user.discord_avatar }}?size=128"
            alt="Profile"
            class="h-8 w-8 rounded-full"
            />
          <span class="text-xs {% if request.path == "/profile/" %}text-{{ user.preferences.accent_colour }}-400{% endif %}">
            {% if request.user.preferences.display_guild_name_instead_of_username and request.user.discord_guild_name %}
              {{ request.user.discord_guild_name }}
            {% elif request.user.discord_global_name%}
              {{ request.user.discord_global_name }}
            {% else %}
              {{ request.user.username }}
            {% endif %}
          </span>
          {% else %}
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-6">
            <path fill-rule="evenodd" d="M7.5 6a4.5 4.5 0 1 1 9 0 4.5 4.5 0 0 1-9 0ZM3.751 20.105a8.25 8.25 0 0 1 16.498 0 .75.75 0 0 1-.437.695A18.683 18.683 0 0 1 12 22.5c-2.786 0-5.433-.608-7.812-1.7a.75.75 0 0 1-.437-.695Z" clip-rule="evenodd" />
          </svg>
          <span class="text-xs {% if request.path == "/profile/" %}text-{{ user.preferences.accent_colour }}-400{% endif %}">Profile</span>
          {% endif %}
        </a>
      </div>
    </div>
  </div>
</nav>
{% block scripts %}
<script>
  let debounceTimeout;

  function debounce(callback, delay) {
    return function (...args) {
      clearTimeout(debounceTimeout);
      debounceTimeout = setTimeout(() => {
        callback.apply(this, args);
      }, delay);
    };
  }

  function handleBlur(platform) {
    // Delay hiding to allow interaction with dropdown
    setTimeout(() => {
      const searchInput = document.getElementById(platform + "-search");
      const dropdown = document.getElementById(platform + "-dropdown");
      if (!searchInput.contains(document.activeElement) &&
          !dropdown.contains(document.activeElement)) {
        toggleDropdown(false, platform);
      }
    }, 200); // Adjust the delay as needed
  }

  function handleSearchInput(event, platform) {
    const searchInput = document.getElementById(platform + "-search");
    const query = searchInput.value.trim();
  
    // Handle Enter key press immediately
    if (event.key === "Enter") {
      event.preventDefault();
      window.location.href = "{% url 'home:search' %}?q=" + encodeURIComponent(query);
      return; 
    }
  
    if (query) {
      debounce(async () => {
        const results = await getAnimeSearchResult(query);
        if (results.length) {
          toggleDropdown(true, platform);
          populateDropdown(results, platform);
        } else {
          toggleDropdown(false, platform);
        }
      }, 200)();
    } else {
      toggleDropdown(false, platform);
    }
  }
  
  function handleSearchIconClick(platform) {
    const searchInput = document.getElementById(platform + "-search");
    const query = searchInput.value.trim();
    window.location.href = "{% url 'home:search' %}?q=" + encodeURIComponent(query);
  }

  function handleInputFocus(platform) {
    const searchInput = document.getElementById(platform + "-search");
    const dropdown = document.getElementById(platform + "-dropdown");
    if (searchInput.value) {
      toggleDropdown(true, platform);
    }
  }

  function populateDropdown(results, platform) {
    const dropdownId =
      platform === "mobile" ? "mobile-dropdown" : "desktop-dropdown";
    const dropdown = document.getElementById(dropdownId);
    dropdown.innerHTML = ""; // Clear existing items

    results.forEach((result, index) => {
      const link = document.createElement("a");
      link.href = '/watch/' + result.id;
      link.className = "block px-4 py-2 text-white hover:bg-neutral-700";
      link.textContent = result.title.english || result.title.romaji;

      // Add specific rounding based on the item's position
      if (index === 0) {
        link.classList.add("hover:rounded-t-lg");
      } else if (index === results.length - 1) {
        link.classList.add("hover:rounded-b-lg");
      }

      dropdown.appendChild(link);
    });
  }

  async function getAnimeSearchResult(query) {
    const url = "{% url 'home:q_search' %}?q=" + query;
    try {
      const response = await fetch(url);
      const data = await response.json();
      return data.results;
    } catch (error) {
      console.error("Error fetching search results:", error);
      return [];
    }
  }

  function toggleDropdown(show, platform) {
    const dropdownId =
      platform === "mobile" ? "mobile-dropdown" : "desktop-dropdown";
    document.getElementById(dropdownId).classList.toggle("hidden", !show);
  }

  const searchIcon = document.getElementById("search-icon");
  searchIcon.addEventListener("click", () => {
    handleSearchIconClick("desktop");
  });
</script>
{% endblock scripts %}