<!-- Navbar -->

{% load static %}

<div class="navbar bg-base-300 relative z-40" data-navbar>
    <div class="navbar-start">
        {% if menu_items %}
        <div class="dropdown">
            <div tabindex="0" role="button" class="btn btn-ghost lg:hidden">
                <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="h-5 w-5"
                    fill="none"
                    viewBox="0 0 24 24"
                    stroke="currentColor"
                >
                    <path
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="2"
                        d="M4 6h16M4 12h8m-8 6h16"
                    />
                </svg>
            </div>
            <ul
                tabindex="0"
                class="menu menu-sm dropdown-content bg-base-100 rounded-box z-50 mt-3 w-52 p-2 shadow">

                {% for item in menu_items %}
                <li><a>{{ item }}</a></li>
                {% endfor %}
               
            </ul>
        </div>
        {% endif %}
        <a class="navbar-brand" href="https://gitlab.com/larasuite/lara">
            <img
                src="{% static 'lara_django_base/icons/LARA_logo.svg' %}"
                alt="LARAsuite"
                width="30"
                height="24"
            />
        </a>
        <button class="btn btn-ghost text-xl">LARA</button>

        <h1 class="h2">{{ title }}</h1>
        
    </div>
     <div class="navbar-center hidden lg:flex">
    {% if menu_items %}
    <ul class="menu menu-vertical lg:menu-horizontal bg-base-200 rounded-box z-10">
        {% for menu_item in menu_items %}
        <li>
            <a href="{% url menu_item.path %}">{{ menu_item.name }}</a>
        </li>
        {% endfor %}
    </ul>
    {% endif %}
  </div>
    <div class="navbar-end">
        {% block tools-dropdown-menu%}
        <div class="navbar-center hidden lg:flex">
            <ul class="menu menu-horizontal px-1">
                <li>
                    <details>
                        <summary>tools</summary>
                        <ul class="p-2">
                            <li class="dropdown-item">
                                <a class="nav-link active" aria-current="page" href="{% url 'lara_django_base:jupyter_lite_ui' %}"
                                    {# target="_blank" rel="noopener"#}>Jupyter Lite</a>
                            </li>
                            <li class="dropdown-item">
                                <a class="nav-link active" aria-current="page" href="{% url 'lara_django_base:zotero_ui' %}"
                                    {# target="_blank" rel="noopener"#}>LARA-Zotero</a>
                            </li>
                            {% if PREFECT_DASHBOARD_URL %}
                            <li class="dropdown-item">
                                <a class="nav-link active" aria-current="page" href="{% url 'lara_django_base:prefect_ui' %}"
                                    {# target="_blank" rel="noopener"#}>Prefect Orchestration</a>
                            </li>
                            {% endif %}
                            {% if VIRTUOSO_SPARQL_URL %}
                            <li class="dropdown-item">

                                <a class="nav-link active" aria-current="page" href="{% url 'lara_django_base:sparql_ui' %}"
                                    {# target="_blank" rel="noopener"#}>SPARQL query </a>
                            </li>
                            {% endif %}
                        </ul>
                    </details>
                </li>
            </ul>
        </div>
        {% endblock tools-dropdown-menu%}

        {% include nav_search|default:"lara_django_base/partials/navbar_search.html" %}
        
        {% if request.user.is_staff %}
        <div class="navbar-center hidden lg:flex">
            <ul class="menu menu-horizontal px-1">
                <li>
                    <details>
                        <summary>admin</summary>
                        <ul class="p-2">
                            <li><a href="/admin">django Admin</a></li>
                            <li>
                                <a
                                    class="dropdown-item"
                                    href="{{ MINIO_DASHBOARD }}"
                                    target="_blank"
                                    rel="noopener"
                                    >minIO S3 storage</a
                                >
                            </li>
                        </ul>
                    </details>
                </li>
            </ul>
        </div>

        {% endif %}

        <div class="navbar-center hidden lg:flex">
            <ul class="menu menu-horizontal px-1 z-20">
                <li>
                    <details>
                        <summary>info & help</summary>
                        <ul class="p-2">
                            <li><a href="{{ LARA_DOCS_URL }}">help</a></li>
                            <li>
                                <a
                                    href="{% url 'lara_django_base:base-about' %}"
                                    >about LARA</a
                                >
                            </li>
                        </ul>
                    </details>
                </li>
            </ul>
        </div>
        <button class="btn btn-ghost btn-circle">
            <div class="indicator">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                class="h-5 w-5"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor">
                <use xlink:href=" #icon-bell" />
              </svg>
              <span class="badge badge-xs badge-error indicator-item"></span>
            </div>
          </button>

        <div class="dropdown dropdown-end">
            <div
                tabindex="0"
                role="button"
                class="btn btn-ghost btn-circle avatar"
            >
                <div class="w-10 rounded-full">
                    <img
                        alt="avatar"
                        src="{{ request.user.profile_image }}"
                    />
                </div>
            </div>
            <ul
                tabindex="0"
                class="menu menu-sm dropdown-content bg-base-100 rounded-box z-50 mt-3 w-52 p-2 shadow"
            >
                <li>
                    <a class="justify-between">
                        Profile
                        <span class="badge">New</span>
                    </a>
                </li>
                <li><a>Settings</a></li>
                <li><a href="/accounts/logout">Logout</a></li>
            </ul>
        </div>
    </div>
</div>
<div class="flex flex-auto w-full h-0.5" id="navbar-divider"></div>

<script>
  document.addEventListener('DOMContentLoaded', () => {
    const nav = document.querySelector('[data-navbar]');
    if (!nav) return;

    // Close other <details> when one opens (accordion behavior)
    const details = nav.querySelectorAll('details');
    details.forEach(d => {
      d.addEventListener('toggle', () => {
        if (d.open) {
          details.forEach(o => { if (o !== d) o.open = false; });
        }
      });
    });

    // When a dropdown trigger is used, close any open <details>
    const dropdownTriggers = nav.querySelectorAll('.dropdown > [tabindex], .dropdown .btn, .dropdown summary');
    dropdownTriggers.forEach(tr => {
      tr.addEventListener('click', () => {
        details.forEach(d => { d.open = false; });
      });
    });

    // Click outside closes all details
    document.addEventListener('click', (e) => {
      if (!nav.contains(e.target)) {
        details.forEach(d => { d.open = false; });
      }
    });
  });
</script>