{% extends 'base.html' %}
{% load static %}
{% load humanize %}
{% load widget_tweaks %}
{% load embed_video_tags %}

{% block title %} Password Reset {% endblock title %}

{% block content %}

    <!-- scroll-to-top start -->
    <div class="scroll-to-top">
      <span class="scroll-icon">
        <i class="fa fa-rocket" aria-hidden="true"></i>
      </span>
    </div>
    <!-- scroll-to-top end -->

  <div class="full-wh">
    <!-- STAR ANIMATION -->
    <div class="bg-animation">
      <div id='stars'></div>
      <div id='stars2'></div>
      <div id='stars3'></div>
      <div id='stars4'></div>
    </div><!-- / STAR ANIMATION -->
  </div>
  <div class="page-wrapper">
      <!-- header-section start  -->
  <header class="header">
    <div class="header__bottom">
      <div class="container">
        <nav class="navbar navbar-expand-xl p-0 align-items-center">
          <a class="site-logo site-title" href="login.html"><img src="https://res.cloudinary.com/daniela1/image/upload/v1699125102/logo_zmipkr.png" alt="site-logo"></a>
          <div id="google_translate_element"></div> 
              <script type="text/javascript"> 
              function googleTranslateElementInit() {new google.translate.TranslateElement({pageLanguage: 'en'}, 'google_translate_element');}
              </script>
              <script type="text/javascript" src="../../translate.google.com/translate_a/elementa0d8.js?cb=googleTranslateElementInit"></script>
          <ul class="account-menu responsive-account-menu ml-3">
                        <li class="icon"><a href="{% url 'userdashboard:login' %}"><i class="las la-user"></i></a></li>
                      </ul> 
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="menu-toggle"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav main-menu ml-auto">
              <li> <a href="{% url 'zeeprimeapp:home' %}">Home</a></li>
                                              <li><a href="{% url 'zeeprimeapp:about_us' %}">About</a></li>
                                          <li><a href="{% url 'zeeprimeapp:contact_us' %}">Contact</a></li>
            </ul>
            <div class="nav-right">
              <ul class="account-menu ml-3">
                                <li class="icon"><a href="{% url 'userdashboard:login' %}"><i class="las la-user"></i></a></li>
                              </ul> 
              <select class="select d-inline-block w-auto ml-xl-3 langSel">
                                  <option value="en"  selected  >English</option>
                              </select>
            </div>
          </div>
        </nav>
      </div>
    </div><!-- header__bottom end -->
  </header>
  <!-- header-section end  -->

        <!-- account section start -->
    <div class="account-section bg_img" data-background="https://res.cloudinary.com/daniela1/image/upload/v1664313966/IMG2_dhqgdk.jpg">
      <div class="container">
        <div class="row justify-content-center">
          <div class="col-xl-5 col-lg-7">
            <div class="account-card">
              <div class="account-card__header bg_img overlay--one" data-background="https://res.cloudinary.com/daniela1/image/upload/v1664313860/IMG_hh3ala.jpg">
                <h2 class="section-title">Welcome To <span class="base--color">Alliance Finance Limited</span></h2>
                <p>Invest in tokenised: shares of Coursera, Apple, Tesla, Gamestop, AMC, Gold, Oil, FTSE, Dow, EUR.cx/USD.cx, GBP.cx/USD.cx and 2,000+ world-renowned tokenised markets.</p>
              </div>
              <div class="account-card__body">
                <form action="." class="mt-4" method="post">
                  {% csrf_token %}
                  <br />
                  {% if messages %} 
                    {% for msg in messages %}
                    <div class="alert alert-danger text-center" role="alert">
                      {{ msg }}
                    </div>
                    {% endfor %} 
                  {% endif %}

                  {% if validlink %}
                  <div class="form-group">
                    <label>Enter Password</label>
                    {% if form.new_password1.errors %}
                    <div class="alert alert-danger">{{ form.new_password1.errors }}</div>
                    {% endif %}
                    {% render_field form.new_password1 class+="form-control" placeholder="Enter Password*" %}
                     </div>

                     <div class="form-group">
                      <label>Confirm Password</label>
                      {% if form.new_password2.errors %}
                      <div class="alert alert-danger">{{ form.new_password2.errors }}</div>
                      {% endif %}
                      {% render_field form.new_password2 class+="form-control" placeholder="Confirm Password" %}
                       </div>
                       
                  <div class="form-group d-flex justify-content-center">
                  </div>
                <div class="mt-3">
<button type="submit" class="cmn-btn">SAVE</button>
</div>
<div class="form-row mt-2">
<div class="col-sm-6">
  <div class="form-group form-check pl-0">
    <p class="f-size-14">Forgot Password? <a href="{% url 'password_reset' %}" class="base--color">Reset Now</a></p>
  </div>
</div>
<div class="col-sm-6 text-sm-right">
  <p class="f-size-14">Haven't an account? <a href="{% url 'userdashboard:register' %}" class="base--color">Sign Up</a></p>
</div>
</div>
</form>
                       {% else %}
                       <p><span class="text-danger">The Password reset link is invalid, possibly because it has been used. Please request for 
                         a new password reset link
                           <div class="registration">
                             <a class="btn btn-block btn-primary" href="/account/password_reset/"> REQUEST A NEW LINK</a>
                           </div>
                         </p>
                         <hr />
                         <div class="registration">
                           <a class="btn btn-block btn-danger" href="{% url 'userdashboard:login' %}"> GO BACK TO LOGIN</a>
                         </div>
                       {% endif %}

              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- account section end -->
{% endblock content %}