{% load static %}
{# Modern DaisyUI Navbar #}
<div class="navbar x-50 bg-neutral-50 text-neutral-950 shadow-lg">
  <div class="navbar-start">
    <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 %}
    <div class="navbar-center hidden lg:flex">
      <a
        href="{{ meta.server_url }}/predict"
        role="button"
        class="btn btn-ghost"
        id="predictLink"
        >Predict</a
      >
      <!-- <li><a href="{{ meta.server_url }}/package" id="packageLink">Package</a></li> -->
      <!--<li><a href="{{ meta.server_url }}/browse" id="browseLink">Browse</a></li>-->
      <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>

<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>