{% load static %}
{# Modern DaisyUI Navbar with Mobile Drawer Menu #}
<div class="drawer drawer-mobile">
  <input id="drawer-toggle" type="checkbox" class="drawer-toggle" />
  <div class="drawer-content flex flex-col">
    {# Navbar #}
    <div class="navbar x-50 bg-neutral-50 text-neutral-950 shadow-lg">
      <div class="navbar-start">
        {# Hamburger menu button - visible on mobile, hidden on desktop #}
        {% if not public_mode %}
          <label
            for="drawer-toggle"
            class="btn btn-square btn-ghost drawer-button lg:hidden"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
              class="inline-block h-5 w-5 stroke-current"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M4 6h16M4 12h16M4 18h16"
              ></path>
            </svg>
          </label>
        {% endif %}
        <a
          href="{{ meta.server_url }}"
          class="btn btn-ghost text-xl normal-case"
        >
          <svg class="fill-base-content h-8" viewBox="0 0 104 26" role="img">
            <use href="{% static "/images/logo-name.svg" %}#ep-logo-name" />
          </svg>
        </a>
      </div>

      {% if not public_mode %}
        {# Desktop menu - hidden on mobile, visible on desktop #}
        <div class="navbar-center hidden lg:flex">
          <a
            href="{{ meta.server_url }}/predict"
            role="button"
            class="btn btn-ghost"
            id="predictLink"
            >Predict</a
          >
          <div class="dropdown dropdown-center">
            <div tabindex="0" role="button" class="btn btn-ghost">Browse</div>
            <ul
              tabindex="-1"
              class="dropdown-content menu bg-base-100 rounded-box z-1 w-52 p-2 shadow-sm"
            >
              <li>
                <a href="{{ meta.server_url }}/package" id="packageLink"
                  >Package</a
                >
              </li>
              <li>
                <a href="{{ meta.server_url }}/pathway" id="pathwayLink"
                  >Pathway</a
                >
              </li>
              <li>
                <a href="{{ meta.server_url }}/rule" id="ruleLink">Rule</a>
              </li>
              <li>
                <a href="{{ meta.server_url }}/compound" id="compoundLink"
                  >Compound</a
                >
              </li>
              <li>
                <a href="{{ meta.server_url }}/reaction" id="reactionLink"
                  >Reaction</a
                >
              </li>
              <li>
                <a
                  href="{{ meta.server_url }}/model"
                  id="relative-reasoningLink"
                  >Model</a
                >
              </li>
              <li>
                <a href="{{ meta.server_url }}/scenario" id="scenarioLink"
                  >Scenario</a
                >
              </li>
            </ul>
          </div>
        </div>
      {% endif %}

      <div class="navbar-end">
        {% if not public_mode %}
          <a id="search-trigger" role="button" class="cursor-pointer">
            <div
              class="badge badge-dash bg-base-200 text-base-content/50 m-1 flex items-center space-x-1 p-2"
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="16"
                height="16"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
                class="lucide lucide-search-icon lucide-search"
              >
                <path d="m21 21-4.34-4.34" />
                <circle cx="11" cy="11" r="8" />
              </svg>
              <span id="search-shortcut">⌘K</span>
            </div>
          </a>
        {% endif %}
        {% if meta.user.username == 'anonymous' or public_mode %}
          <a href="{% url 'login' %}" id="loginButton" class="p-2">Login</a>
        {% else %}
          <div class="dropdown dropdown-end">
            <div
              tabindex="0"
              role="button"
              class="btn btn-ghost btn-circle m-1"
              id="loggedInButton"
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="24"
                height="24"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
                class="lucide lucide-circle-user-icon lucide-circle-user"
              >
                <circle cx="12" cy="12" r="10" />
                <circle cx="12" cy="10" r="3" />
                <path d="M7 20.662V19a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v1.662" />
              </svg>
            </div>
            <ul
              tabindex="-1"
              class="dropdown-content menu bg-base-100 rounded-box z-50 w-52 p-2 shadow-sm"
            >
              <li>
                <a href="{{ meta.user.url }}" id="accountbutton">Settings</a>
              </li>
              <li>
                <form
                  id="logoutForm"
                  action="{% url 'logout' %}"
                  method="post"
                  style="display: none;"
                >
                  {% csrf_token %}
                  <input type="hidden" name="logout" value="true" />
                </form>
                <a
                  href="#"
                  id="logoutButton"
                  onclick="event.preventDefault(); document.getElementById('logoutForm').submit();"
                  >Logout</a
                >
              </li>
            </ul>
          </div>
        {% endif %}
      </div>
    </div>
  </div>
  {# Mobile drawer menu - slides in from the left #}
  <div class="drawer-side">
    <label for="drawer-toggle" class="drawer-overlay"></label>
    <ul class="menu min-h-full w-80 bg-base-200 p-4 text-base-content">
      {# Drawer header with close button #}
      <li class="mb-4">
        <div class="flex items-center justify-between">
          <span class="font-bold text-lg">Menu</span>
          <label
            for="drawer-toggle"
            class="btn btn-sm btn-circle btn-ghost"
            aria-label="Close menu"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              class="h-6 w-6"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M6 18L18 6M6 6l12 12"
              />
            </svg>
          </label>
        </div>
      </li>
      {% if not public_mode %}
        {# Predict link #}
        <li>
          <a
            href="{{ meta.server_url }}/predict"
            class="text-lg"
            id="predictLinkMobile"
            >Predict</a
          >
        </li>
        {# Browse menu with submenu #}
        <li>
          <details>
            <summary class="text-lg">Browse</summary>
            <ul>
              <li>
                <a href="{{ meta.server_url }}/package" id="packageLinkMobile"
                  >Package</a
                >
              </li>
              <li>
                <a href="{{ meta.server_url }}/pathway" id="pathwayLinkMobile"
                  >Pathway</a
                >
              </li>
              <li>
                <a href="{{ meta.server_url }}/rule" id="ruleLinkMobile"
                  >Rule</a
                >
              </li>
              <li>
                <a href="{{ meta.server_url }}/compound" id="compoundLinkMobile"
                  >Compound</a
                >
              </li>
              <li>
                <a href="{{ meta.server_url }}/reaction" id="reactionLinkMobile"
                  >Reaction</a
                >
              </li>
              <li>
                <a
                  href="{{ meta.server_url }}/model"
                  id="relative-reasoningLinkMobile"
                  >Model</a
                >
              </li>
              <li>
                <a href="{{ meta.server_url }}/scenario" id="scenarioLinkMobile"
                  >Scenario</a
                >
              </li>
            </ul>
          </details>
        </li>
      {% endif %}
    </ul>
  </div>
</div>

<script>
  // OS-aware search shortcut display
  (function () {
    const isMac = /Mac/.test(navigator.platform);
    const shortcutElement = document.getElementById("search-shortcut");
    if (shortcutElement) {
      shortcutElement.textContent = isMac ? "⌘K" : "Ctrl+K";
    }
  })();
</script>