{% extends "base.html" %}
{% block titulo %}
  Cambiar Contraseña
{% endblock titulo %}
{% block content1 %} 
<script type="text/javascript">
  $("#navUser").attr('class','dropdown active');
  $("#navCambiarContra").attr('class','active');
</script>
<form action="/Cambiar_Contra/" method="POST" data-toggle="validator" role="form"> {% csrf_token %}
  <div class="row">
    <div class="col-md-6 col-md-offset-3" >
        <div class="panel panel-default">
          <div class="panel-heading"> <strong>CAMBIAR CONTRASEÑA</strong></div>
          <div class="panel-body">
            <div class="row" id="Result">
              {% ifnotequal resultado '' %}
              {% ifequal resultado 'exito' %}
              <h4 class="bg-success" align="center">
                 Se cambio tu contraseña!!
              </h4>
              {% else %}
              <h4 class="bg-danger" align="center">
                :( la operacion Fallo {{resultado}}
              </h4>
              {% endifequal %}
              {% endifnotequal %}
            </div>
            <div class="row">
              <div class="col-md-12">
                <div class="panel panel-primary">
                  <div class="panel-body">
                    <div class="row">
                      <div class="col-md-4">
                        <label >Contraseña Anterior:</label>
                      </div>
                      <div class="col-md-8">
                        <div class="form-group">
                        <div class="fg-line">
                          <input type="text" class="form-control"name="passA" required>
                           <div class="form-control-feedback" style="text-align:left;" ></div>
                        </div>
                        </div>
                        <p></p>
                      </div>
                    </div>
                    <div class="row" id="campoAp">
                      <div class="col-md-4">
                        <label>Contraseña Nueva:</label>
                      </div>
                      <div class="col-md-8">
                        <div class="form-group">
                        <div class="fg-line">
                           <input type="password" class="form-control" id="password1">
                           <div class="form-control-feedback" style="text-align:left;" ></div>
                        </div>
                        </div>                             
                        <p></p>
                      </div>
                    </div> 
                    <div class="row">
                      <div class="col-md-8 col-md-offset-4">
                        <div class="form-group">
                        <div class="fg-line">
                            <input type="password" class="form-control" data-match="#password1" data-match-error="la contraseña no coinside" name="passN" placeholder="vuelva a ercribir la contraseña">
                           <div class="form-control-feedback" style="text-align:left;" ></div>
                        </div>
                        </div>                             
                        <p></p>
                      </div>
                    </div>
                     <div class="row">
                      <div class="col-md-4 col-md-offset-4 ">
                        <button class="btn btn-warning btn-block btn-sm" type="submit">Guardar</button>
                      </div>
                    </div>
                  </div>
                </div>  
              </div>
            </div>
            
            <script type="text/javascript">
            $(document).ready(function(){
              $('input').on('keypress', function(e){
                if(e.keyCode == 13)
                  {
                  var inputs = $(this).parents("form").eq(0).find(":input.form-control");
                  var idx = inputs.index($(this));
                    if (idx == inputs.length - 1) {
                        inputs[0].select()
                        } 
                    else {
                        inputs[idx + 1].focus(); //  handles submit buttons
                        inputs[idx + 1].select();
                        }
                    return false;
                  }
                });
            })
            </script>
          </div>
        </div>
    </div>
  </div>
</form> 
{% endblock content1 %}