{% load static %}


<header class="pc-header">
    <div class="header-wrapper"> <!-- [Mobile Media Block] start -->
      <div class="me-auto pc-mob-drp">
        <ul class="list-unstyled">
          <!-- ======= Menu collapse Icon ===== -->
          <li class="pc-h-item pc-sidebar-collapse">
            <a href="#" class="pc-head-link ms-0" id="sidebar-hide">
              <i data-feather="menu"></i>
            </a>
          </li>
          <li class="pc-h-item pc-sidebar-popup">
            <a href="#" class="pc-head-link ms-0" id="mobile-collapse">
              <i data-feather="menu"></i>
            </a>
          </li>
          <li class="dropdown pc-h-item">
            <a
              class="pc-head-link dropdown-toggle arrow-none m-0 trig-drp-search"
              data-bs-toggle="dropdown"
              href="#"
              role="button"
              aria-haspopup="false"
              aria-expanded="false"
            >
              <i data-feather="search"></i>
            </a>
            <div class="dropdown-menu pc-h-dropdown drp-search">
              <form class="px-3 py-2">
                <input type="search" class="form-control border-0 shadow-none" placeholder="Search here. . ." />
              </form>
            </div>
          </li>
        </ul>
      </div>
      <!-- [Mobile Media Block end] -->
      <div class="ms-auto">
        <ul class="list-unstyled">
          <li class="dropdown pc-h-item">
            <a
              class="pc-head-link dropdown-toggle arrow-none me-0"
              data-bs-toggle="dropdown"
              href="#"
              role="button"
              aria-haspopup="false"
              aria-expanded="false"
            >
              <i data-feather="bell"></i>
              <span class="badge bg-success pc-h-badge">3</span>
            </a>
            <div class="dropdown-menu dropdown-notification dropdown-menu-end pc-h-dropdown">
              <div class="dropdown-header d-flex align-items-center justify-content-between">
                <h5 class="m-0">Notifications</h5>
                <a href="#!" class="btn btn-link btn-sm">Mark all read</a>
              </div>
              <div class="dropdown-body text-wrap header-notification-scroll position-relative" style="max-height: calc(100vh - 215px)">
                <p class="text-span">Today</p>
                <div class="card mb-0">
                  <div class="card-body">
                    <div class="d-flex">
                      <div class="flex-shrink-0">
                        <img class="img-radius avtar rounded-0" src="{% static "assets/images/user/avatar-1.jpg" %}" alt="Generic placeholder image">
                      </div>
                      <div class="flex-grow-1 ms-3">
                        <span class="float-end text-sm text-muted">2 min ago</span>
                        <h5 class="text-body mb-2">UI/UX Design</h5>
                        <p class="mb-0"
                          >Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of
                          type and scrambled it to make a type</p
                        >
                      </div>
                    </div>
                  </div>
                </div>
                <div class="card mb-0">
                  <div class="card-body">
                    <div class="d-flex">
                      <div class="flex-shrink-0">
                        <img class="img-radius avtar rounded-0" src="{% static "assets/images/user/avatar-2.jpg" %}" alt="Generic placeholder image">
                      </div>
                      <div class="flex-grow-1 ms-3">
                        <span class="float-end text-sm text-muted">1 hour ago</span>
                        <h5 class="text-body mb-2">Message</h5>
                        <p class="mb-0">Lorem Ipsum has been the industry's standard dummy text ever since the 1500.</p>
                      </div>
                    </div>
                  </div>
                </div>
                <p class="text-span">Yesterday</p>
                <div class="card mb-0">
                  <div class="card-body">
                    <div class="d-flex">
                      <div class="flex-shrink-0">
                        <img class="img-radius avtar rounded-0" src="{% static "assets/images/user/avatar-3.jpg" %}" alt="Generic placeholder image">
                      </div>
                      <div class="flex-grow-1 ms-3">
                        <span class="float-end text-sm text-muted">2 hour ago</span>
                        <h5 class="text-body mb-2">Forms</h5>
                        <p class="mb-0"
                          >Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of
                          type and scrambled it to make a type</p
                        >
                      </div>
                    </div>
                  </div>
                </div>
                <div class="card mb-0">
                  <div class="card-body">
                    <div class="d-flex">
                      <div class="flex-shrink-0">
                        <img class="img-radius avtar rounded-0" src="{% static "assets/images/user/avatar-4.jpg" %}" alt="Generic placeholder image">
                      </div>
                      <div class="flex-grow-1 ms-3">
                        <span class="float-end text-sm text-muted">12 hour ago</span>
                        <h5 class="text-body mb-2">Challenge invitation</h5>
                        <p class="mb-2"><span class="text-dark">Jonny aber</span> invites to join the challenge</p>
                        <button class="btn btn-sm btn-outline-secondary me-2">Decline</button>
                        <button class="btn btn-sm btn-primary">Accept</button>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="card mb-0">
                  <div class="card-body">
                    <div class="d-flex">
                      <div class="flex-shrink-0">
                        <img class="img-radius avtar rounded-0" src="{% static "assets/images/user/avatar-5.jpg" %}" alt="Generic placeholder image">
                      </div>
                      <div class="flex-grow-1 ms-3">
                        <span class="float-end text-sm text-muted">5 hour ago</span>
                        <h5 class="text-body mb-2">Security</h5>
                        <p class="mb-0"
                          >Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of
                          type and scrambled it to make a type</p
                        >
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="text-center py-2">
                <a href="#!" class="link-danger">Clear all Notifications</a>
              </div>
            </div>
          </li>
          <li class="dropdown pc-h-item header-user-profile">
            <a
              class="pc-head-link dropdown-toggle arrow-none me-0"
              data-bs-toggle="dropdown"
              href="#"
              role="button"
              aria-haspopup="false"
              data-bs-auto-close="outside"
              aria-expanded="false"
            >
              <i data-feather="user"></i>
            </a>
            <div class="dropdown-menu dropdown-user-profile dropdown-menu-end pc-h-dropdown p-0 overflow-hidden">
              <div class="dropdown-header d-flex align-items-center justify-content-between bg-primary">
                <div class="d-flex my-2">
                  <div class="flex-shrink-0">
                    <img src="{% static "assets/images/user/avatar-2.jpg" %}" alt="user-image" class="user-avtar wid-35" />
                  </div>
                  <div class="flex-grow-1 ms-3">
                    <h6 class="text-white mb-1">Carson Darrin 🖖</h6>
                    <span class="text-white text-opacity-75">carson.darrin@company.io</span>
                  </div>
                </div>
              </div>
              <div class="dropdown-body">
                <div class="profile-notification-scroll position-relative" style="max-height: calc(100vh - 225px)">
                  <a href="#" class="dropdown-item">
                    <span>
                      <svg class="pc-icon text-muted me-2">
                        <use xlink:href="#custom-setting-outline"></use>
                      </svg>
                      <span>Settings</span>
                    </span>
                  </a>
                  <a href="#" class="dropdown-item">
                    <span>
                      <svg class="pc-icon text-muted me-2">
                        <use xlink:href="#custom-share-bold"></use>
                      </svg>
                      <span>Share</span>
                    </span>
                  </a>
                  <a href="#" class="dropdown-item">
                    <span>
                      <svg class="pc-icon text-muted me-2">
                        <use xlink:href="#custom-lock-outline"></use>
                      </svg>
                      <span>Change Password</span>
                    </span>
                  </a>
                  <div class="d-grid my-2">
                    {% if request.user.is_authenticated %}
                    <a href="{% url "logout" %}" class="btn btn-primary">
                      <svg class="pc-icon me-2">
                        <use xlink:href="#custom-logout-1-outline"></use></svg
                      >Logout
                    </a>
                    {% else %}
                    <a href="{% url "login" %}" class="btn btn-primary">
                      <svg class="pc-icon me-2">
                        <use xlink:href="#custom-logout-1-outline"></use>
                      </svg>Login
                    </a>
                    {% endif %}
                  </div>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
</header>