{% comment %}
SPDX-FileCopyrightText: 2022 Helmholtz-Zentrum Dresden-Rossendorf (HZDR)

SPDX-License-Identifier: GPL-3.0-or-later
{% endcomment %}
{% load static %}
<nav class="navbar heliport-navbar navbar-expand-lg navbar-light nav-fill">
  <div class="nav-container container">
    <a class="navbar-brand heliport-navbar-brand"
       {% if user.is_authenticated %}href="{% url 'core:project_list' %}"{% else %}href="{% url 'core:index' %}"{% endif %}>
      <img class="heliport-logo-large"
           alt="HELIPORT"
           height="44"
           width="206"
           src="{% static 'core/img/heliport_compact_dark.svg' %}" />
      <img class="heliport-logo-small"
           alt="HELIPORT"
           height="44"
           width="57"
           src="{% static 'core/img/heliport_small_dark.svg' %}" />
    </a>
    <button class="navbar-toggler"
            type="button"
            data-bs-toggle="collapse"
            data-bs-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent"
            aria-expanded="false"
            aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="w-100 d-flex justify-content-center nav-search">
      <form action="{% url 'core:search_base' %}">
        <div class="input-group">
          {% comment %}
          HELIPORT has different search functionalities that use the `q` parameter. In
          order not to show e.g. the GATE project search query in this text box we only
          fill in a value when on the search page.
          {% endcomment %}
          <input class="form-control"
                 type="search"
                 placeholder="Search"
                 aria-label="Search"
                 {% if request.resolver_match.url_name == "search_base" %}value="{{ request.GET.q|default_if_none:'' }}"{% endif %}
                 name="q" />
          <button class="btn btn-light" type="submit">
            <i class="fa-solid fa-magnifying-glass"></i>
          </button>
        </div>
      </form>
    </div>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link heliport-nav-link"
             href="{% url 'core:about' %}"
             target="_blank">
            <i class="fa-solid fa-info me-1"></i>
            About
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link heliport-nav-link"
             href="{% url 'core:docs' %}"
             target="_blank">
            <i class="fa-solid fa-book-atlas me-1"></i>
            Docs
          </a>
        </li>
        {% if user.is_authenticated %}
          <li class="nav-item dropdown">
            <a class="nav-link heliport-nav-link dropdown-toggle"
               href="#"
               id="navbarUserDropdown"
               role="button"
               data-bs-toggle="dropdown"
               aria-haspopup="true"
               aria-expanded="false">
              <i class="fa-solid fa-user me-1"></i>
              {{ user }}
            </a>
            <div class="dropdown-menu dropdown-menu-end"
                 aria-labelledby="navbarUserDropdown">
              <a class="dropdown-item" href="{% url 'core:user_profile' %}">
                <i class="fa-solid fa-user-gear me-1"></i>
                Profile
              </a>
              {% if OIDC_ENABLED %}
                <a class="dropdown-item" href="{% url 'socialaccount_connections' %}">
                  <i class="fa-solid fa-link me-1"></i>
                  Account Connections
                </a>
              {% endif %}
              <a class="dropdown-item" href="{% url 'account_change_password' %}">
                <i class="fa-solid fa-lock me-1"></i>
                Set / Change Password
              </a>
              <a class="dropdown-item" href="{% url 'account_email' %}">
                <i class="fa-solid fa-envelope me-1"></i>
                Change Email
              </a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="{% url 'core:user_login_list' %}">
                <i class="fa-solid fa-server me-1"></i>
                Remote Server Logins
              </a>
              <a class="dropdown-item" href="{% url 'core:user_token_list' %}">
                <i class="fa-solid fa-key me-1"></i>
                API Tokens
              </a>
              <div class="dropdown-divider"></div>
              <form action="{% url 'account_logout' %}" method="post">
                {% csrf_token %}
                <button class="dropdown-item">
                  <i class="fa-solid fa-arrow-right-from-bracket me-1"></i>
                  Sign Out
                </button>
              </form>
            </div>
          </li>
        {% else %}
          <li class="nav-item dropdown">
            <a class="nav-link heliport-nav-link dropdown-toggle"
               href="#"
               id="navbarUserDropdown"
               role="button"
               data-bs-toggle="dropdown"
               aria-haspopup="true"
               aria-expanded="false">
              <i class="fa-solid fa-arrow-right-to-bracket me-1"></i>
              Sign In
            </a>
            <div class="dropdown-menu dropdown-menu-end"
                 aria-labelledby="navbarUserDropdown">
              <a class="dropdown-item" href="{% url 'account_login' %}">
                <i class="fa-solid fa-arrow-right-to-bracket me-1"></i>
                Sign In
              </a>
              {% if LOCAL_ACCOUNT_SIGNUP %}
                <a class="dropdown-item" href="{% url 'account_signup' %}">
                  <i class="fa-solid fa-dungeon me-1"></i>
                  Sign Up
                </a>
              {% endif %}
            </div>
          </li>
        {% endif %}
      </ul>
    </div>
  </div>
</nav>
{% if project and project_dropdown_modules and project_navbar_modules %}
  <div class="navbar heliport-navbar-project navbar-expand-lg navbar-light nav-fill">
    <div class="container">
      <nav aria-label="breadcrumb">
        <ol class="breadcrumb heliport-breadcrumb">
          <li class="breadcrumb-item d-flex heliport-breadcrumb-item">
            <a href="{% url 'core:project_list' %}"
               class="heliport-breadcrumb-link"
               title="Project list">
              <i class="fa-solid fa-house"></i>
            </a>
          </li>
          {% for label, url in project_header_breadcrumbs %}
            {% if forloop.last %}
              <li class="breadcrumb-item d-flex heliport-breadcrumb-item active"
                  aria-current="page">
                <span class="heliport-breadcrumb-link">{{ label }}</span>
              </li>
            {% else %}
              <li class="breadcrumb-item d-flex heliport-breadcrumb-item">
                <a href="{{ url }}" class="heliport-breadcrumb-link">{{ label }}</a>
              </li>
            {% endif %}
          {% endfor %}
        </ol>
      </nav>
      <nav>
        <ul class="navbar-nav">
          {# TODO: Make these not clickable when on the page they represent #}
          {% for module in project_navbar_modules.included %}
            <li class="nav-item">
              <a class="nav-link heliport-nav-link"
                 href="{{ module.url }}"
                 role="button">
                <span class="{{ module.icon }} me-1"></span>
                {{ module.name }}
              </a>
            </li>
          {% endfor %}
          <li class="nav-item dropdown">
            <a class="nav-link heliport-nav-link dropdown-toggle"
               href="#"
               id="navbarProjectDropdown"
               role="button"
               data-bs-toggle="dropdown"
               aria-haspopup="true"
               aria-expanded="false">
              <i class="fa-solid fa-gears me-1"></i>
              Project
            </a>
            <div class="dropdown-menu dropdown-menu-end"
                 aria-labelledby="navbarProjectDropdown">
              {% for module in project_dropdown_modules.included %}
                <a class="dropdown-item" href="{{ module.url }}">
                  <span class="{{ module.icon }} me-1"></span>
                  {{ module.name }}
                </a>
              {% endfor %}
            </div>
          </li>
        </ul>
      </nav>
    </div>
  </div>
{% endif %}