{% extends "djams/base_app_site.html" %}
{% load static %}
{% load form_filters %} 

{% block main_content_holder %}
{% block content %}

<style>
    body{
        background: url("{% static 'djams/images/balloons.jpg' %}") no-repeat center center fixed; 

 -webkit-background-size: cover;
  	-moz-background-size: cover;
  	-o-background-size: cover;
  	background-size: cover;
	background-color: black;
    }


.panel-default {
 opacity: 0.9;
 margin-top:30px;
}
.form-group.last {
 margin-bottom:0px;
}

</style>

<div class="container h-100">
        <div class="row h-100 justify-content-center align-items-center">
                <form class="form-horizontal" style='background-color: #dae1ed; border-radius: 15px; min-width:30%; opacity:0.9;' method='POST'>
                    <div class='col-md-12'>  
                  <h3>Change Password</h3>
                  </div>
                        {% csrf_token %}
                        <div class='vspacer_15'></div>
                    <div class='col-md-12'>
                        <div class="form-group">
                            <label for="inputPassword3">Old Password</label>
                            {{ form.old_password|addclass:'form-control'}}

                            {% if form.old_password.errors %}
                            {% for error in form.old_password.errors %}
                               <div class="alert alert-danger" role="alert">
                               <strong>ERROR</strong> {{ error|escape }}
                               </div>
                            {% endfor %}
                        {% endif %}
                        </div>
                      </div>

                      <div class='col-md-12'>
                        <div class="form-group">
                            <label for="inputPassword3">New Password</label>
                            {{ form.new_password1|addclass:'form-control'}}
                            <small id="help" class="form-text text-muted">Passwords must be at least 10 characters long and may be passphrases with or without spaces.</small>
                            {% if form.new_password1.errors %}
                            {% for error in form.new_password1.errors %}
                               <div class="alert alert-danger" role="alert">
                               <strong>Error:</strong> {{ error|escape }}
                               </div>
                            {% endfor %}
                        {% endif %}

                        </div>   
                      </div> 
                        
                        <div class='col-md-12'>

                        <div class="form-group">
                            <label for="inputPassword3">Re-enter Password</label>
                            {{ form.new_password2|addclass:'form-control'}}
                            {% if form.new_password2.errors %}
                            {% for error in form.new_password2.errors %}
                               <div class="alert alert-danger" role="alert">
                               <strong>Error:</strong> {{ error|escape }}
                               </div>
                            {% endfor %}
                        {% endif %}

                        </div> 
                      </div>                          

                        <!-- <div class="form-group">
                            <div class="col-sm-offset-3 col-sm-12">
                                <div class="checkbox">
                                    <label>
                                        <input type="checkbox">
                                        Remember me
                                    </label>
                                </div>
                            </div>
                        </div> -->
                        <div class="form-group last">
                            <div class="col-sm-12">
                                <div class="col-sm-4 mx-auto">
                                <button type="submit" class='btn btn-primary' id="login-button">Change Password</button>
                                <!-- <button type="reset" class="btn btn-default btn-sm">
                                    Reset password</button> -->
                                </div>
                            </div>
                        </div>
                        <div class='vspacer_15'></div>

                    </form>
        </div>
      </div>

    {% endblock content %}
    {% endblock main_content_holder %}