{% load static %}
{% load i18n %}
<nav class="navbar navbar-expand-lg navbar-dark bg-dark text-white fixed-top">
  <div class="container">
    <a title="{% trans 'The road is long, but if you walk, you will arrive.' %}"
       class="navbar-brand"
       href="{% url 'fnhome:home' %}">
      <img src="{% static 'public/favicon.ico' %}"
           alt="Logo"
           width="30"
           height="24"
           class="d-inline-block align-text-top">
    </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="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active"
             target="fnhome__home"
             aria-current="page"
             href="{% url 'fnhome:home' %}">{% trans "Home" %}</a>
        </li>
        <li class="nav-item">
          <a class="nav-link"
             target="canteen__list_ingredients"
             href="{% url 'canteen:list_ingredients' %}">{% trans "Canteen" %}</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">{% trans "Bell" %}</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle"
             href="#"
             id="navbarDropdown"
             role="button"
             data-bs-toggle="dropdown"
             aria-expanded="false">{% trans "Develop" %}</a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
            <li>
              <a class="dropdown-item" href="#"></a>
            </li>
            <li>
              <a class="dropdown-item" href="#"></a>
            </li>
            <li>
              <hr class="dropdown-divider">
            </li>
            <li>
              <a class="dropdown-item" href="#"></a>
            </li>
          </ul>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">{% trans "About" %}</a>
        </li>
      </ul>
      <div class="d-flex ">
        {% if request.user.is_authenticated %}
          <ul class="nav-item">
            {% if request.user.avatar %}
              <a class="nav-link avatar-nav-link"
                 href="{% url 'fnprofile:edit_profile' %}"
                 target="fnprofile__edit_profile"
                 title="{{ request.user.username }}">
                <img src="{{ request.user.avatar.url }}"
                     alt="{{ request.user.username }}"
                     class="avatar-img">
              </a>
            {% else %}
              <a class="nav-link "
                 href="{% url 'fnprofile:edit_profile' %}"
                 target="fnprofile__edit_profile"
                 title="{{ request.user.username }}">
                {{ request.user.username }}
              </a>
            {% endif %}
          </ul>
          <ul class="nav-item ">
            <a class="nav-link" href="{% url 'fnprofile:log_out' %}">{% trans "Log out" %}</a>
          </ul>
        {% else %}
          <ul class="nav-item">
            <a class="nav-link" href="{% url 'fnprofile:log_in' %}">{% trans "Login" %}</a>
          </ul>
          <ul class="nav-item">
            <a class="nav-link" href="{% url 'fnprofile:new_profile' %}">{% trans "Sign Up" %}</a>
          </ul>
        {% endif %}
      </div>
    </div>
  </div>
</nav>
{% if messages %}
  <div class="container">
    <div class="row">
      <div class="col col-12 justify-content-center d-flex">
        <div class="messages">
          {% for message in messages %}
            <div class="alert alert-{{ message.tags }}">
              {{ message }}
              &nbsp;&nbsp;<span class="btn-close" title="{% trans "Hide messages." %}"></span>
            </div>
          {% endfor %}
        </div>
      </div>
    </div>
  </div>
{% endif %}