{% load i18n %}
{% load bootstrap_icons %}
{% load theme_tags %}
{% load utils_tags %}

{% site_info as site_details %}
{% theme_logo_static as theme_logo_url %}
<nav id="siteNavbar" class="navbar bg-primary navbar-expand-lg navbar-light ">
  <div class="container">
    <a class="navbar-brand text-white fw-bold d-flex align-items-stretch gap-2 py-0 my-0" href="{% url 'website:home' %}">
      {% if theme_logo_url %}
      <span class="d-inline-flex align-items-center justify-content-center h-100">
        <img
          src="{{ theme_logo_url }}"
          alt="{{ site_details.site_name }}"
          style="height: 100%; max-height: none; width: auto; display: block;"
        >
      </span>
      {% endif %}
      <span class="d-inline-flex align-items-center">{{ site_details.site_name }}</span>
    </a>

    <button class="navbar-toggler border-white navbar-toggler-white"
            type="button"
            data-bs-toggle="collapse"
            data-bs-target="#mainOffcanvas"
            aria-controls="mainOffcanvas"
            aria-expanded="false"
            aria-label="{% trans 'Toggle navigation' %}">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="mainOffcanvas">
        <ul class="navbar-nav ms-lg-auto">

          <li class="nav-item">
            <a class="nav-link text-white {% if request.resolver_match.app_name == 'website' and request.resolver_match.url_name == 'services' %}active{% endif %}"
               href="{% url 'website:services' %}">
              {% trans "Services" %}
            </a>
          </li>

          <li class="nav-item">
            <a class="nav-link text-white {% if request.resolver_match.app_name == 'website' and request.resolver_match.url_name == 'faq' %}active{% endif %}"
               href="{% url 'website:faq' %}">
              {% trans "FAQ" %}
            </a>
          </li>

          <li class="nav-item">
            <a class="nav-link text-white {% if request.resolver_match.app_name == 'website' and request.resolver_match.url_name == 'about' %}active{% endif %}"
               href="{% url 'website:about' %}">
              {% trans "About" %}
            </a>
          </li>

          <li class="nav-item">
            <a class="nav-link text-white {% if request.resolver_match.app_name == 'website' and request.resolver_match.url_name == 'contact' %}active{% endif %}"
               href="{% url 'website:contact' %}">
              {% trans "Contact" %}
            </a>
          </li>

          <li class="nav-item mt-2 mt-lg-0 ms-lg-2">
            {% if request.user.is_authenticated and request.user.is_staff %}
              <a class="btn btn-outline-danger btn-sm mt-2 px-3"
                 href="{% url 'dashboard:home' %}">
                {% trans "Dashboard" %}
              </a>
            {% else %}
              <a class="btn btn-outline-danger btn-sm mt-2 d-inline-flex align-items-center justify-content-center"
                 href="{% url 'site_login' %}"
                 aria-label="{% trans 'Staff login' %}"
                 title="{% trans 'Staff login' %}">
                {% bs_icon 'box-arrow-in-right' %}
              </a>
            {% endif %}
          </li>

          {% if request.user.is_authenticated and request.user.is_staff %}
            <li class="nav-item mt-3 mt-lg-0 ms-lg-2">
              <form method="post" action="{% url 'site_logout' %}" class="d-inline">
  {% csrf_token %}
  <button type="submit" class="btn btn-outline-danger btn-sm mt-2 px-3">
    {% trans "Logout" %}
  </button>
</form>

            </li>
          {% endif %}
        </ul>
    </div>

  </div>
</nav>