{% load static %} {% block header %}
<header id="page-topbar">
  <div class="navbar-header">
    <div class="d-flex">
      <!-- LOGO -->
      <div class="navbar-brand-box">
        <a href="{% url 'dashboard' %}" class="logo logo-light">
          <span class="logo-sm">
            <img
              src="{{MEDIA_URL}}{{company_data.company_logo}}"
              class="small-logo"
              alt="logo-sm-light"
              height="70"
            />
          </span>
          <span class="logo-lg">
            <img
              src="{{MEDIA_URL}}{{company_data.company_logo}}"
              class="big-logo"
              alt="logo-light"
              height="70"
            />
          </span>
        </a>
      </div>
      <button
        type="button"
        class="btn btn-sm px-3 font-size-24 header-item waves-effect"
        id="vertical-menu-btn"
      >
        <i class="ri-menu-2-line align-middle"></i>
      </button>
      <div class="main-heading">
        <h1>{{company_data.company_name}}</h1>
      </div>
      <!-- App Search-->
      <div
        class="dropdown d-inline-block user-dropdown"
        style="position: absolute; right: 5px"
      >
        <button
          type="button"
          class="btn header-item"
          id="page-header-user-dropdown"
          data-bs-toggle="dropdown"
          aria-haspopup="true"
          aria-expanded="false"
        >
          <span class="d-xl-inline-block ms-1 mobile-visible"
            >{{user.first_name}} {{user.last_name}}</span
          >
          <i class="mdi mdi-chevron-down d-xl-inline-block"></i>
        </button>
        <div class="dropdown-menu dropdown-menu-end">
          <!-- item-->
          {% if user.is_authenticated %}
          <a class="dropdown-item" href="{% url 'change_password' %}">
            <i
              class="mdi mdi-lock text-muted font-size-16 align-middle me-1"
            ></i>
            <span class="align-middle" key="t-lock-screen"
              >Change Password</span
            >
          </a>
          <a class="dropdown-item text-danger" href="{% url 'auth-logout' %}">
            <i class="ri-shut-down-line align-middle me-1 text-danger"></i>
            <span class="align-middle" key="t-logout">Logout</span>
          </a>
          {% else %}
          <a class="dropdown-item" href="{% url 'auth-login' %}">
            <i
              class="mdi mdi-login-variant text-muted font-size-16 align-middle me-1"
            ></i>
            <span class="align-middle" key="t-login">Login</span>
          </a>
          {% endif %}
        </div>
      </div>
    </div>
  </div>
</header>
{% endblock header %}