{% load static %}
<!DOCTYPE html>
<html lang="en" class="js has-scroll-init has-scroll-smooth">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="description" content="More than a Doc..." />
    <meta
      name="keywords"
      content="Task, ToDo list, list, todo, django todo, To-Do List"
    />
    <meta name="author" content="the_desiinger" />
    <link rel="icon" href="{% static 'images/fav_icon.png' %}" />
    <title>Reset Password Page</title>

    <!-- Preload CSS -->
    <link
      rel="preload"
      as="style"
      href="{% static '/css/reset_password.css' %}"
    />
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="{% static '/css/reset.css' %}" />
    <link rel="stylesheet" href="{% static '/css/bootstrap.min.css' %}" />
    <link rel="stylesheet" href="{% static '/css/reset_password.css' %}" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/TweenMax.min.js"></script>
    <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"
    />

    <script>
      document.documentElement.className = "js";
      var supportsCssVars = function () {
        var e,
          t = document.createElement("style");
        return (
          (t.innerHTML = "root: { --tmp-var: bold; }"),
          document.head.appendChild(t),
          (e = !!(
            window.CSS &&
            window.CSS.supports &&
            window.CSS.supports("font-weight", "var(--tmp-var)")
          )),
          t.parentNode.removeChild(t),
          e
        );
      };
      supportsCssVars() ||
        alert(
          "Please view this work in a modern browser that supports CSS Variables."
        );
    </script>
  </head>
  <body
    id="pageTop"
    class="page-content"
    data-spy="scroll"
    data-target="#mainNav"
  >
    <!--======================== Main-Section ================================-->
    <main>
      <!--=========================================== smooth-scroll-effect ===============================-->
      <div data-scroll class="page page--layout-2">
        <div class="content content--full content--alternate"></div>
        <!-- End content -->

        <!--=========================================== Hero-Section ===============================-->
        <div id="hero">
          <div class="container-fluid">
            <div class="hero-intro">
              <div id="return_link">
                <a href="javascript:history.back()">
                  <img
                    id="return-link_img"
                    src="{% static '/images/return_link-img.png' %}"
                    class="img-fluid"
                    alt="return-link_img"
                  />
                  <h6>return back</h6>
                </a>
              </div>
              <!-- End return_link -->

              <div class="row">
                <div class="col-md-6">
                  <div id="page_logo">
                    <img src="{% static '/images/fav_icon.png' %}" alt="" />
                  </div>

                  <h1>Forgot Password?</h1>
                  <p>
                    Enter the email address you used when you joined and we’ll
                    send you instructions to reset your password.
                  </p>
                  <p>
                    For security reasons, we do NOT store your password. So rest
                    assured that we will never send your password via email.
                  </p>
                </div>
                <!-- End col-->

                <div class="col-md-6 align-self-center">
                  <div class="card shadow-sm">
                    <div class="card-body">
                      <form action="" method="POST">
                        <!--  -->
                        {% csrf_token %}
                        <!--  -->
                        {{form.as_p}}

                        <div id="mobile__input">
                          <center>
                            <input
                              id="btn_style"
                              type="submit"
                              class="button btn btn-lg shadow-sm"
                              value="Send reset instruction"
                            />
                          </center>
                        </div>
                        <!-- End mobile__input-->

                        <div id="desktop__input">
                          <input
                            id="btn_style"
                            type="submit"
                            class="button btn btn-lg shadow-sm"
                            value="Send reset instruction"
                          />
                        </div>
                        <!-- End mobile__input-->
                      </form>
                    </div>
                    <!-- End card-body-->
                  </div>
                  <!-- End card-->
                </div>
                <!-- End col-->
              </div>
              <!-- End row -->
            </div>
            <!-- End hero-intro-->
          </div>
          <!-- End container-fluid -->
        </div>
        <!-- End hero -->

        <!--  -->
        <!--=========================================== page--layout ===============================-->
      </div>
      <!-- End page--layout -->
    </main>
    <!-- End Main-Section -->

    <!--=============================================== JavaScript ===================================-->
    <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.0/gsap.min.js"></script>

    <!-- unpkg -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>
    <!-- Custom Links -->
    <script src="{% static '/js/jquery-min.js' %}"></script>
    <script src="{% static '/js/bootstrap.min.js' %}"></script>
  </body>
</html>
