{% load static %}

<header class="header-global">

    {% if request.path == "/landing-freelancer/" or request.path == "/blank/" %}
    <nav id="navbar-main" aria-label="Primary navigation" class="navbar navbar-main navbar-expand-lg navbar-theme-primary headroom navbar-light navbar-theme-secondary">
    {% else %}
    <nav id="navbar-main" aria-label="Primary navigation" class="navbar navbar-main navbar-expand-lg navbar-theme-primary headroom navbar-dark navbar-theme-secondary">
    {% endif %}  
      <div class="container position-relative">
          <a class="navbar-brand me-lg-5" href="/">
              <img class="navbar-brand-dark" src="{% static 'assets/img/brand/light.svg' %}" alt="Logo light">
              <img class="navbar-brand-light" src="{% static 'assets/img/brand/dark.svg' %}" alt="Logo dark">
          </a>
          <div class="navbar-collapse collapse me-auto" id="navbar_global">
              <div class="navbar-collapse-header">
                  <div class="row">
                      <div class="col-6 collapse-brand">
                          <a href="/">
                              <img src="{% static 'assets/img/brand/dark.svg' %}" alt="Themesberg logo">
                          </a>
                      </div>
                      <div class="col-6 collapse-close">
                          <a href="#navbar_global" class="fas fa-times" data-bs-toggle="collapse" data-bs-target="#navbar_global" aria-controls="navbar_global" aria-expanded="false" title="close" aria-label="Toggle navigation"></a>
                      </div>
                  </div>
              </div>
              <ul class="navbar-nav navbar-nav-hover align-items-lg-center">
                  <li class="nav-item dropdown">
                      <a href="#" class="nav-link dropdown-toggle" id="frontPagesDropdown" aria-expanded="false" data-bs-toggle="dropdown">
                          Pages
                          <span class="fas fa-angle-down nav-link-arrow ms-1"></span>
                      </a>
                      <div class="dropdown-menu dropdown-megamenu px-0 py-2 p-lg-4" aria-labelledby="frontPagesDropdown">
                          <div class="row">
                              <div class="col-6 col-lg-4">
                                  <h6 class="d-block mb-3 text-primary">Main pages</h6>
                                  <ul class="list-style-none mb-4">
                                      <li class="mb-2 megamenu-item">
                                          <a class="megamenu-link" href="{% url 'about_us' %}">About</a>
                                      </li>
                                      <li class="mb-2 megamenu-item">
                                          <a class="megamenu-link" href="{% url 'contact_us' %}">Contact</a>
                                      </li>
                                  </ul>
                              </div>
                              <div class="col-6 col-lg-4">
                                  <h6 class="d-block mb-3 text-primary">Landings</h6>
                                  <ul class="list-style-none mb-4">
                                      <li class="mb-2 megamenu-item">
                                          <a class="megamenu-link" href="{% url 'landing_freelancer' %}">Freelancer</a>
                                      </li>
                                  </ul>
                              </div>
                              <div class="col-6 col-lg-4">
                                  <h6 class="d-block mb-3 text-primary">User</h6>
                                  <ul class="list-style-none mb-4">
                                    {% if request.user.is_authenticated %}
                                        <li class="mb-2 megamenu-item">
                                            <a class="megamenu-link" href="{% url 'password_change' %}">Change Password</a>
                                        </li>
                                        <li class="mb-2 megamenu-item">
                                            <a class="megamenu-link" href="{% url 'logout' %}">Logout</a>
                                        </li>
                                    {% else %}
                                      <li class="mb-2 megamenu-item">
                                          <a class="megamenu-link" href="{% url 'login' %}">Sign in</a>
                                      </li>
                                      <li class="mb-2 megamenu-item">
                                          <a class="megamenu-link" href="{% url 'register' %}">Sign up</a>
                                      </li>
                                    {% endif %}
                                  </ul>
                              </div>
                          </div>
                      </div>
                  </li>
                  <li class="nav-item dropdown">
                      <a href="#" class="nav-link dropdown-toggle" id="componentsDropdown" aria-expanded="false" data-bs-toggle="dropdown">
                          Components
                          <span class="fas fa-angle-down nav-link-arrow ms-1"></span>
                      </a>
                      <div class="dropdown-menu dropdown-megamenu-md p-0" aria-labelledby="componentsDropdown">
                          <div class="row g-0">
                              <div class="col-lg-6 bg-dark d-none d-lg-block me-0 me-3">
                                  <div class="px-0 py-3 text-center">
                                      <img src="{% static 'assets/img/megamenu_image.png' %}" alt="Pixel Components">
                                  </div>
                              </div>
                              <div class="col ps-0 py-3">
                                  <ul class="list-style-none">
                                      <li><a class="dropdown-item" href="{% url 'accordion' %}">Accordions</a></li>
                                      <li><a class="dropdown-item" href="{% url 'alerts' %}">Alerts</a></li>
                                      <li><a class="dropdown-item" href="{% url 'badges' %}">Badges</a></li>
                                      <li><a class="dropdown-item" href="{% url 'cards' %}">Cards</a></li>
                                      <li><a class="dropdown-item" href="{% url 'carousels' %}">Carousels</a></li>
                                      <li><a class="dropdown-item" href="{% url 'breadcrumbs' %}">Breadcrumbs</a></li>
                                      <li><a class="dropdown-item" href="{% url 'buttons' %}">Buttons</a></li>
                                  </ul>
                              </div>
                              <div class="col ps-0 py-3">
                                  <ul class="list-style-none">
                                      <li><a class="dropdown-item" href="{% url 'dropdowns' %}">Dropdowns</a></li>
                                      <li><a class="dropdown-item" href="{% url 'forms' %}">Forms</a></li>
                                      <li><a class="dropdown-item" href="{% url 'modals' %}">Modals</a></li>
                                      <li><a class="dropdown-item" href="{% url 'navs' %}">Navs</a></li>
                                      <li><a class="dropdown-item" href="{% url 'pagination' %}">Pagination</a></li>
                                      <li><a class="dropdown-item" href="{% url 'popovers' %}">Popovers</a></li>
                                  </ul>
                              </div>
                              <div class="col ps-0 py-3">
                                  <ul class="list-style-none">
                                      <li><a class="dropdown-item" href="{% url 'progress_bars' %}">Progress Bars</a></li>
                                      <li><a class="dropdown-item" href="{% url 'tables' %}">Tables</a></li>
                                      <li><a class="dropdown-item" href="{% url 'tabs' %}">Tabs</a> </li>
                                      <li><a class="dropdown-item" href="{% url 'toasts' %}">Toasts</a> </li>
                                      <li><a class="dropdown-item" href="{% url 'tooltips' %}">Tooltips</a></li>
                                      <li><a class="dropdown-item" href="{% url 'typography' %}">Typography</a></li>
                                  </ul>
                              </div>
                          </div>
                      </div>
                  </li>
                  <li class="nav-item dropdown">
                      <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown" id="supportDropdown" aria-expanded="false">
                          Support
                          <span class="fas fa-angle-down nav-link-arrow ms-1"></span>
                      </a>
                      <div class="dropdown-menu dropdown-menu-lg" aria-labelledby="supportDropdown">
                          <div class="col-auto px-0">
                              <div class="list-group list-group-flush">
                                  <a href="https://appseed.us/support/" target="_blank" class="list-group-item list-group-item-action d-flex align-items-center p-0 py-3 px-lg-4">
                                      <span class="icon icon-sm"><span class="fas fa-microphone-alt"></span></span>
                                      <div class="ms-4">
                                          <span class="d-block font-small fw-bold mb-0">Support</span>
                                          <span class="small">Need help? Ask us!</span>
                                      </div>
                                  </a>
                              </div>
                          </div>
                      </div>
                  </li>
              </ul>
          </div>
          <div class="d-flex align-items-center">              
            {% if request.user.is_authenticated %}
                <a href="{% url 'logout' %}"
                   class="btn btn-outline-gray-100 d-none d-lg-inline me-md-3"><span class="fas fa-sign-out-alt me-2"></span> Logout</a>            
            {% else %}
                <a href="{% url 'login' %}"
                    class="btn btn-outline-gray-100 d-none d-lg-inline me-md-3"><span class="fas fa-sign-in-alt me-2"></span> Sign IN</a>            
            {% endif %}
              <a target="_blank" href="https://appseed.us/product/pixel-bootstrap/django/" class="btn btn-tertiary"><i class="fas fa-cloud-download-alt me-2"></i> Download</a>
              <button class="navbar-toggler ms-2" type="button" data-bs-toggle="collapse" data-bs-target="#navbar_global" aria-controls="navbar_global" aria-expanded="false" aria-label="Toggle navigation">
                  <span class="navbar-toggler-icon"></span>
              </button>
          </div>
      </div>
  </nav>
</header>