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

{% block title %} Change Password {% 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 %}


                    <div class="form-group">
                      <label>Enter Old Password</label>
                      {% if form.old_password.errors %}
                      <div class="alert alert-danger text-center" role="alert">
                          {{ form.old_password.errors}}
                        </div>
                      {% endif %}
                      {% render_field form.old_password placeholder="Old Password*" class="form-control" %}
                    </div>

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



                      <div class="form-group">
                        <label>Confirm New Password</label>
                        {% if form.new_password2.errors %}
                        <div class="alert alert-danger" role="alert">
                            {{ form.new_password2.errors}}
                          </div>
                        {% endif %}
                        {% render_field form.new_password2 placeholder="Confirm New Password*" class="form-control" %}
                      </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>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- account section end -->
{% endblock content %}