{% load static %}


<!-- Navbar -->
<div class="container position-sticky z-index-sticky top-0">
    <div class="row">
      <div class="col-12">
        <nav
          class="navbar navbar-expand-lg  blur border-radius-xl top-0 z-index-fixed shadow position-absolute my-3 p-2 start-0 end-0 mx-4">
          <div class="container-fluid px-0">
            <a class="navbar-brand font-weight-bolder ms-sm-3 text-sm"
              href="{% url "index" %}" rel="tooltip"
              title="Designed and Coded by Creative Tim" data-placement="bottom">
              Django Material Kit
            </a>
            <button class="navbar-toggler shadow-none ms-2" type="button" data-bs-toggle="collapse"
              data-bs-target="#navigation" aria-controls="navigation" aria-expanded="false"
              aria-label="Toggle navigation">
              <span class="navbar-toggler-icon mt-2">
                <span class="navbar-toggler-bar bar1"></span>
                <span class="navbar-toggler-bar bar2"></span>
                <span class="navbar-toggler-bar bar3"></span>
              </span>
            </button>
            <div class="collapse navbar-collapse pt-3 pb-2 py-lg-0 w-100" id="navigation">
              <ul class="navbar-nav navbar-nav-hover ms-auto">
                <li class="nav-item dropdown dropdown-hover mx-2">
                  <a class="nav-link ps-2 d-flex cursor-pointer align-items-center font-weight-semibold"
                    id="dropdownMenuPages" data-bs-toggle="dropdown" aria-expanded="false">
                    <i class="material-symbols-rounded opacity-6 me-2 text-md">dashboard</i>
                    Pages
                    <img src="{% static "assets/img/down-arrow-dark.svg" %}" alt="down-arrow" class="arrow ms-auto ms-md-2">
                  </a>
                  <div class="dropdown-menu dropdown-menu-animation ms-n3 dropdown-md p-3 border-radius-xl mt-0 mt-lg-3"
                    aria-labelledby="dropdownMenuPages">
                    <div class="d-none d-lg-block">
                      <h6 class="dropdown-header text-dark font-weight-bolder d-flex align-items-center px-1">
                        Landing Pages
                      </h6>
                      <a href="{% url "about-us" %}" class="dropdown-item border-radius-md">
                        <span>About Us</span>
                      </a>
                      <a href="{% url "contact-us" %}" class="dropdown-item border-radius-md">
                        <span>Contact Us</span>
                      </a>
                      <a href="{% url "author" %}" class="dropdown-item border-radius-md">
                        <span>Author</span>
                      </a>
                      <h6 class="dropdown-header text-dark font-weight-bolder d-flex align-items-center px-1 mt-3">
                        Account
                      </h6>
                      <a href="{% url 'login' %}" class="dropdown-item border-radius-md">
                        <span>Sign In</span>
                      </a>
                    </div>

                    <div class="d-lg-none">
                      <h6 class="dropdown-header text-dark font-weight-bolder d-flex align-items-center px-1">
                        Landing Pages
                      </h6>

                      <a href="{% url "about-us" %}" class="dropdown-item border-radius-md">
                        <span>About Us</span>
                      </a>
                      <a href="{% url "contact-us" %}" class="dropdown-item border-radius-md">
                        <span>Contact Us</span>
                      </a>
                      <a href="{% url "author" %}" class="dropdown-item border-radius-md">
                        <span>Author</span>
                      </a>

                      <h6 class="dropdown-header text-dark font-weight-bolder d-flex align-items-center px-1 mt-3">
                        Account
                      </h6>
                      <a href="{% url 'login' %}" class="dropdown-item border-radius-md">
                        <span>Sign In</span>
                      </a>

                    </div>

                  </div>
                </li>

                <li class="nav-item dropdown dropdown-hover mx-2">
                  <a class="nav-link ps-2 d-flex cursor-pointer align-items-center font-weight-semibold"
                    id="dropdownMenuBlocks" data-bs-toggle="dropdown" aria-expanded="false">
                    <i class="material-symbols-rounded opacity-6 me-2 text-md">view_day</i>
                    Sections
                    <img src="{% static "assets/img/down-arrow-dark.svg" %}" alt="down-arrow" class="arrow ms-auto ms-md-2">
                  </a>
                  <ul
                    class="dropdown-menu dropdown-menu-end dropdown-menu-animation dropdown-md dropdown-md-responsive p-3 border-radius-lg mt-0 mt-lg-3"
                    aria-labelledby="dropdownMenuBlocks">
                    <div class="d-none d-lg-block">
                      <li class="nav-item dropdown dropdown-hover dropdown-subitem">
                        <a class="dropdown-item py-2 ps-3 border-radius-md" href="{% url "presentation" %}">
                          <div class="w-100 d-flex align-items-center justify-content-between">
                            <div>
                              <h6
                                class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">
                                Page Sections</h6>
                              <span class="text-sm">See all sections</span>
                            </div>
                            <img src="{% static "assets/img/down-arrow.svg" %}" alt="down-arrow" class="arrow">
                          </div>
                        </a>
                        <div class="dropdown-menu mt-0 py-3 px-2 mt-3">
                          <a class="dropdown-item ps-3 border-radius-md mb-1"
                            href="{% url "page_header" %}">
                            Page Headers
                          </a>
                          <a class="dropdown-item ps-3 border-radius-md mb-1"
                            href="{% url "features" %}">
                            Features
                          </a>
                        </div>
                      </li>

                      <li class="nav-item dropdown dropdown-hover dropdown-subitem">
                        <a class="dropdown-item py-2 ps-3 border-radius-md" href="{% url "presentation" %}">
                          <div class="w-100 d-flex align-items-center justify-content-between">
                            <div>
                              <h6
                                class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">
                                Navigation</h6>
                              <span class="text-sm">See all navigations</span>
                            </div>
                            <img src="{% static "assets/img/down-arrow.svg" %}" alt="down-arrow" class="arrow">
                          </div>
                        </a>
                        <div class="dropdown-menu mt-0 py-3 px-2 mt-3">
                          <a class="dropdown-item ps-3 border-radius-md mb-1" href="{% url "navbar" %}">
                            Navbars
                          </a>
                          <a class="dropdown-item ps-3 border-radius-md mb-1"
                            href="{% url "nav_tabs" %}">
                            Nav Tabs
                          </a>
                          <a class="dropdown-item ps-3 border-radius-md mb-1"
                            href="{% url "pagination" %}">
                            Pagination
                          </a>
                        </div>
                      </li>

                      <li class="nav-item dropdown dropdown-hover dropdown-subitem">
                        <a class="dropdown-item py-2 ps-3 border-radius-md" href="{% url "presentation" %}">
                          <div class="w-100 d-flex align-items-center justify-content-between">
                            <div>
                              <h6
                                class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">
                                Input Areas</h6>
                              <span class="text-sm">See all input areas</span>
                            </div>
                            <img src="{% static "assets/img/down-arrow.svg" %}" alt="down-arrow" class="arrow">
                          </div>
                        </a>
                        <div class="dropdown-menu mt-0 py-3 px-2 mt-3">
                          <a class="dropdown-item ps-3 border-radius-md mb-1" href="{% url "inputs" %}">
                            Inputs
                          </a>
                          <a class="dropdown-item ps-3 border-radius-md mb-1" href="{% url "forms" %}">
                            Forms
                          </a>
                        </div>
                      </li>

                      <li class="nav-item dropdown dropdown-hover dropdown-subitem">
                        <a class="dropdown-item py-2 ps-3 border-radius-md" href="{% url "presentation" %}">
                          <div class="w-100 d-flex align-items-center justify-content-between">
                            <div>
                              <h6
                                class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">
                                Attention Catchers</h6>
                              <span class="text-sm">See all examples</span>
                            </div>
                            <img src="{% static "assets/img/down-arrow.svg" %}" alt="down-arrow" class="arrow">
                          </div>
                        </a>
                        <div class="dropdown-menu mt-0 py-3 px-2 mt-3">
                          <a class="dropdown-item ps-3 border-radius-md mb-1"
                            href="{% url "alerts" %}">
                            Alerts
                          </a>
                          <a class="dropdown-item ps-3 border-radius-md mb-1"
                            href="{% url "modals" %}">
                            Modals
                          </a>
                          <a class="dropdown-item ps-3 border-radius-md mb-1"
                            href="{% url "tooltips" %}">
                            Tooltips & Popovers
                          </a>
                        </div>
                      </li>

                      <li class="nav-item dropdown dropdown-hover dropdown-subitem">
                        <a class="dropdown-item py-2 ps-3 border-radius-md" href="{% url "presentation" %}">
                          <div class="w-100 d-flex align-items-center justify-content-between">
                            <div>
                              <h6
                                class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">
                                Elements</h6>
                              <span class="text-sm">See all elements</span>
                            </div>

                            <img src="{% static "assets/img/down-arrow.svg" %}" alt="down-arrow" class="arrow">
                          </div>
                        </a>
                        <div class="dropdown-menu mt-0 py-3 px-2 mt-3">
                          <a class="dropdown-item ps-3 border-radius-md mb-1" href="{% url "avatars" %}">
                            Avatars
                          </a>
                          <a class="dropdown-item ps-3 border-radius-md mb-1" href="{% url "badges" %}">
                            Badges
                          </a>
                          <a class="dropdown-item ps-3 border-radius-md mb-1"
                            href="{% url "breadcrumbs" %}">
                            Breadcrumbs
                          </a>
                          <a class="dropdown-item ps-3 border-radius-md mb-1" href="{% url "buttons" %}">
                            Buttons
                          </a>
                          <a class="dropdown-item ps-3 border-radius-md mb-1" href="{% url "dropdowns" %}">
                            Dropdowns
                          </a>
                          <a class="dropdown-item ps-3 border-radius-md mb-1"
                            href="{% url "progress_bars" %}">
                            Progress Bars
                          </a>
                          <a class="dropdown-item ps-3 border-radius-md mb-1" href="{% url "toggles" %}">
                            Toggles
                          </a>
                          <a class="dropdown-item ps-3 border-radius-md mb-1"
                            href="{% url "typography" %}">
                            Typography
                          </a>
                        </div>
                      </li>
                    </div>

                    <div class="row d-lg-none">
                      <div class="col-md-12">
                        <div class="d-flex mb-2">
                          <div class="icon h-10 me-3 d-flex mt-1">
                            <i class="ni ni-single-copy-04 text-gradient text-primary"></i>
                          </div>
                          <div class="w-100 d-flex align-items-center justify-content-between">
                            <div>
                              <h6
                                class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">
                                Page Sections</h6>
                            </div>
                          </div>
                        </div>
                        <a class="dropdown-item ps-3 border-radius-md mb-1"
                          href="{% url "page_header" %}">
                          Page Headers
                        </a>
                        <a class="dropdown-item ps-3 border-radius-md mb-1"
                          href="{% url "features" %}">
                          Features
                        </a>

                        <div class="d-flex mb-2 mt-3">
                          <div class="icon h-10 me-3 d-flex mt-1">
                            <i class="ni ni-laptop text-gradient text-primary"></i>
                          </div>
                          <div class="w-100 d-flex align-items-center justify-content-between">
                            <div>
                              <h6
                                class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">
                                Navigation</h6>
                            </div>
                          </div>
                        </div>
                        <a class="dropdown-item ps-3 border-radius-md mb-1" href="{% url "navbar" %}">
                          Navbars
                        </a>
                        <a class="dropdown-item ps-3 border-radius-md mb-1" href="{% url "nav_tabs" %}">
                          Nav Tabs
                        </a>
                        <a class="dropdown-item ps-3 border-radius-md mb-1"
                          href="{% url "pagination" %}">
                          Pagination
                        </a>


                        <div class="d-flex mb-2 mt-3">
                          <div class="icon h-10 me-3 d-flex mt-1">
                            <i class="ni ni-badge text-gradient text-primary"></i>
                          </div>
                          <div class="w-100 d-flex align-items-center justify-content-between">
                            <div>
                              <h6
                                class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">
                                Input Areas</h6>
                            </div>
                          </div>
                        </div>
                        <a class="dropdown-item ps-3 border-radius-md mb-1" href="{% url "inputs" %}">
                          Inputs
                        </a>
                        <a class="dropdown-item ps-3 border-radius-md mb-1" href="{% url "forms" %}">
                          Forms
                        </a>


                        <div class="d-flex mb-2 mt-3">
                          <div class="icon h-10 me-3 d-flex mt-1">
                            <i class="ni ni-notification-70 text-gradient text-primary"></i>
                          </div>
                          <div class="w-100 d-flex align-items-center justify-content-between">
                            <div>
                              <h6
                                class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">
                                Attention Catchers</h6>
                            </div>
                          </div>
                        </div>
                        <a class="dropdown-item ps-3 border-radius-md mb-1"
                          href="{% url "alerts" %}">
                          Alerts
                        </a>
                        <a class="dropdown-item ps-3 border-radius-md mb-1"
                          href="{% url "modals" %}">
                          Modals
                        </a>
                        <a class="dropdown-item ps-3 border-radius-md mb-1"
                          href="{% url "tooltips" %}">
                          Tooltips & Popovers
                        </a>


                        <div class="d-flex mb-2 mt-3">
                          <div class="icon h-10 me-3 d-flex mt-1">
                            <i class="ni ni-app text-gradient text-primary"></i>
                          </div>
                          <div class="w-100 d-flex align-items-center justify-content-between">
                            <div>
                              <h6
                                class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">
                                Elements</h6>
                            </div>
                          </div>
                        </div>
                        <a class="dropdown-item ps-3 border-radius-md mb-1" href="{% url "avatars" %}">
                          Avatars
                        </a>
                        <a class="dropdown-item ps-3 border-radius-md mb-1" href="{% url "badges" %}">
                          Badges
                        </a>
                        <a class="dropdown-item ps-3 border-radius-md mb-1" href="{% url "breadcrumbs" %}">
                          Breadcrumbs
                        </a>
                        <a class="dropdown-item ps-3 border-radius-md mb-1" href="{% url "buttons" %}">
                          Buttons
                        </a>
                        <a class="dropdown-item ps-3 border-radius-md mb-1" href="{% url "dropdowns" %}">
                          Dropdowns
                        </a>
                        <a class="dropdown-item ps-3 border-radius-md mb-1"
                          href="{% url "progress_bars" %}">
                          Progress Bars
                        </a>
                        <a class="dropdown-item ps-3 border-radius-md mb-1" href="{% url "toggles" %}">
                          Toggles
                        </a>
                        <a class="dropdown-item ps-3 border-radius-md mb-1" href="{% url "typography" %}">
                          Typography
                        </a>
                      </div>
                    </div>

                  </ul>
                </li>

                <li class="nav-item dropdown dropdown-hover mx-2">
                  <a class="nav-link ps-2 d-flex cursor-pointer align-items-center font-weight-semibold"
                    id="dropdownMenuDocs" data-bs-toggle="dropdown" aria-expanded="false">
                    <i class="material-symbols-rounded opacity-6 me-2 text-md">article</i>
                    Docs
                    <img src="{% static "assets/img/down-arrow-dark.svg" %}" alt="down-arrow" class="arrow ms-auto ms-md-2">
                  </a>
                  <ul
                    class="dropdown-menu dropdown-menu-end dropdown-menu-animation dropdown-md dropdown-md-responsive mt-0 mt-lg-3 p-3 border-radius-lg"
                    aria-labelledby="dropdownMenuDocs">
                    <div class="d-none d-lg-block">
                      <ul class="list-group">
                        <li class="nav-item list-group-item border-0 p-0">
                          <a class="dropdown-item py-2 ps-3 border-radius-md"
                            href="https://app-generator.dev/docs/products/django/material-kit/index.html>
                            <h6
                              class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">
                              Getting Started</h6>
                            <span class="text-sm">All about overview, and quick start</span>
                          </a>
                        </li>
                        <li class="nav-item list-group-item border-0 p-0">
                          <a class="dropdown-item py-2 ps-3 border-radius-md"
                            href="https://app-generator.dev/docs/products/django-libs/theme-material-kit.html">
                            <h6
                              class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">
                              UI Theme</h6>
                            <span class="text-sm">Install the UI in your project</span>
                          </a>
                        </li>
                      </ul>
                    </div>

                    <div class="row d-lg-none">
                      <div class="col-md-12 g-0">
                        <a class="dropdown-item py-2 ps-3 border-radius-md" href="https://app-generator.dev/docs/products/django/material-kit/index.html">
                          <h6
                            class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">
                            Getting Started</h6>
                          <span class="text-sm">All about overview, and quick start</span>
                        </a>

                        <a class="dropdown-item py-2 ps-3 border-radius-md" href="https://app-generator.dev/docs/products/django-libs/theme-material-kit.html">
                          <h6
                            class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">
                            UI Theme</h6>
                          <span class="text-sm">Install the UI in your project</span>
                        </a>
                      </div>
                    </div>

                  </ul>
                </li>

                {% if request.user.is_authenticated %}
                <li class="nav-item ms-lg-auto">
                  <a class="nav-link nav-link-icon me-2" href="{% url 'logout' %}">
                    <i class="fa fa-sign-out me-1"></i>
                    <p class="d-inline text-sm z-index-1 font-weight-semibold" data-bs-toggle="tooltip"
                      data-bs-placement="bottom" title="Logout">Logout</p>
                  </a>
                </li>
                {% else %}
                <li class="nav-item ms-lg-auto">
                  <a class="nav-link nav-link-icon me-2" href="{% url 'login' %}">
                    <i class="fa fa-sign-in me-1"></i>
                    <p class="d-inline text-sm z-index-1 font-weight-semibold" data-bs-toggle="tooltip"
                      data-bs-placement="bottom" title="Sign IN">Sign IN</p>
                  </a>
                </li>
                {% endif %}
                
                <li class="nav-item my-auto ms-3 ms-lg-0">

                  <a href="https://app-generator.dev/product/material-kit/django/"
                    class="btn  bg-gradient-dark  mb-0 mt-2 mt-md-0">Download</a>

                </li>
              </ul>
            </div>
          </div>
        </nav>
        <!-- End Navbar -->
      </div>
    </div>
</div>