{% load static %}
{% block navbar %}
<nav
class="layout-navbar container-xxl navbar navbar-expand-xl navbar-detached align-items-center bg-navbar-theme"
id="layout-navbar"
>
<div class="layout-menu-toggle navbar-nav align-items-xl-center me-3 me-xl-0 d-xl-none">
  <a class="nav-item nav-link px-0 me-xl-4" href="javascript:void(0)">
    <i class="bx bx-menu bx-sm"></i>
  </a>
</div>

<div class="navbar-nav-right d-flex align-items-center" id="navbar-collapse">
  <!-- Search -->
  <div class="navbar-nav align-items-center">
    <div class="nav-item d-flex align-items-center">
      <span class="fw-semibold">Welcome to {{function_name}}</span>
    </div>
  </div>
  <!-- /Search -->

  <ul class="navbar-nav flex-row align-items-center ms-auto">

    <!-- User -->
    <li class="nav-item navbar-dropdown dropdown-user dropdown">
      <a class="nav-link dropdown-toggle hide-arrow" href="javascript:void(0);" data-bs-toggle="dropdown">
        <div class="avatar avatar-online">
          {% if user_data.image  %}
              <img src="{{ user_data.users_images  }}{{ user_data.image }}" alt="Visitor Image"  class="rounded-circle">
          {% else %}
              <img src="{{user_data.default_image}}" alt="Default Image" style="width: 40px;" class="img-circle">
          {% endif %}
        </div>
      </a>
      <ul class="dropdown-menu dropdown-menu-end">
        <li>
          <a class="dropdown-item" href="#">
            <div class="d-flex">
              <div class="flex-shrink-0 me-3">
                <div class="avatar avatar-online">
                  {% if user_data.image  %}
                      <img src="{{ user_data.users_images  }}{{ user_data.image }}" alt="Visitor Image"  class="rounded-circle">
                  {% else %}
                      <img src="{{user_data.default_image}}" alt="Default Image" style="width: 40px;" class="img-circle">
                  {% endif %}
                </div>
              </div>
              <div class="flex-grow-1">
                <span class="fw-semibold d-block">{{username.user_name}}</span>
                <small class="text-muted"></small>
              </div>
            </div>
          </a>
        </li>
        <li>
          <div class="dropdown-divider"></div>
        </li>
        <li>
          <a class="dropdown-item" href="{% url 'visitors_edit' %}">
            <i class="bx bx-user me-2"></i>
            <span class="align-middle">My Profile</span>
          </a>
        </li>
        <li>
          <div class="dropdown-divider"></div>
        </li>
        <li>
          <a class="dropdown-item" href="{% url 'visitors_logout' %}">
            <i class="bx bx-power-off me-2"></i>
            <span class="align-middle">Log Out</span>
          </a>
        </li>
      </ul>
    </li>
    <!--/ User -->
  </ul>
</div>
</nav>
{% endblock navbar  %}