{% load static bootstrap4 custom_filters %}
<div class="navbar navbar-expand-md navbar-dark">
  <a class="navbar-brand" href="{% url 'home' %}">
    <img src="{% static 'img/goats-outline.png' %}" alt="Logo" height="48" class="d-inline-block align-text-top">
  </a>
  <ul class="navbar-nav">
    <div class="btn-group" role="group">
      <a class="btn btn-secondary" href="https://github.com/gemini-hlsw/goats" target="_blank" title="GitHub"><i class="fa-brands fa-github"></i></a>
      <a class="btn btn-secondary" href="https://goats.readthedocs.io/en/latest/index.html" target="_blank" title="Documentation and help"><i class="fa-solid fa-book"></i></a>
      <button id="colorThemeToggle" class="btn btn-secondary" title="Toggle light/dark mode">
        <i class="fa-solid fa-sun"></i>
      </button>
    </div>
  </ul>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#goatsNavbar" aria-controls="goatsNavbar" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="goatsNavbar">
    <ul class="navbar-nav me-auto">
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle {% if request.resolver_match.namespace == 'alerts' %}active{% endif %}" data-toggle="dropdown">Brokers</a>
        <div class="dropdown-menu">
          <a class="dropdown-item" href="{% url 'alerts:create' %}?broker=ANTARES">ANTARES</a>
          <a class="dropdown-item" href="{% url 'alerts:create' %}?broker=ALeRCE">ALeRCE</a>
          <a class="dropdown-item" href="{% url 'alerts:create' %}?broker=Gaia">Gaia</a>
          <a class="dropdown-item" href="{% url 'alerts:create' %}?broker=Scout">Scout</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="{% url 'alerts:list' %}">Saved Queries</a>
        </div>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle {% if request.resolver_match.namespace == 'targets' %}active{% endif %}" data-toggle="dropdown">Targets</a>
        <div class="dropdown-menu">
          <a class="dropdown-item" href="{% url 'targets:list' %}">Targets</a>
          <a class="dropdown-item" href="{% url 'targets:targetgrouping' %}">Target Grouping</a>
        </div>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle {% if request.resolver_match.namespace == 'observations' %}active{% endif %}" data-toggle="dropdown">Observations</a>
        <div class="dropdown-menu">
          <a class="dropdown-item" href="{% url 'tom_observations:list' %}">Observations</a>
          <a class="dropdown-item" href="{% url 'tom_observations:group-list' %}">Observation Groups</a>
          <a class="dropdown-item" href="{% url 'tom_observations:template-list' %}">Observation Templates</a>
          <a class="dropdown-item" href="{% url 'tom_observations:facility-status' %}">Facility Status</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link {% if request.resolver_match.namespace == 'dataproducts' %}active{% endif %}" href="{% url 'tom_dataproducts:list' %}">Data</a>
      </li>
      <li class="nav-item">
        <a class="nav-link {% if request.resolver_match.url_name == 'astro-data-lab' %}active{% endif %}" href="{% url 'astro-data-lab' %}">Astro Data Lab</a>
      </li>
    </ul>
    <ul class="navbar-nav">
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDownloadLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          <span id="downloadBadge" class="badge badge-pill badge-primary d-none mt-0">0</span> Downloads
        </a>
        <div class="dropdown-menu dropdown-menu-right download-tasks-container" aria-labelledby="navbarDownloadDropdown">
          <div id="downloadTasksBanner"></div>
          <a href="{% url 'recent_downloads' %}" class="dropdown-item">View Previous Downloads</a>
        </div>
      </li>
      {% if user.is_authenticated %}
      <li class="nav-item dropdown ">
        <a class="nav-link dropdown-toggle {% if request.resolver_match.url_name|starts_with:'user-' %}active{% endif %}" data-toggle="dropdown">
          {% if user.first_name or user.last_name %}
          {{ user.first_name }} {{ user.last_name }} ({{ user.username }})
          {% else %}
          {{ user.username }}
          {% endif %}
        </a>
        <div class="dropdown-menu dropdown-menu-right">
          <a class="dropdown-item" href="{% url 'user-list' %}">Users</a>
          <a class="dropdown-item" href="{% url 'user-update' user.id %}">Settings</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="{% url 'logout' %}">Logout</a>
        </div>
      </li>
      {% else %}
      <li class="nav-item {% if request.resolver_match.url_name == 'login' %}active{% endif %}">
        <a class="nav-link" href="{% url 'login' %}">Login</a>
      </li>
      {% endif %}
    </ul>
  </div>
</div>