{% extends 'h_tmp_usr/z_tmp.html' %}

{% block css %}
<link rel="stylesheet" href="{{ url_for('static', filename='f_contact/form.css') }}">
<link rel="stylesheet" href="{{ url_for( 'static', filename='g_login/see_hide_pswd.css' ) }}">
{% endblock css %}

{% block body %}



<style>
  main{
    place-items: center;
  }
</style>



<div class="form-container" data-aos="fade-down" data-aos-delay="0" data-aos-duration="800" data-aos-easing="ease-in-out">
  <div class="form-header">
    <h2>Cambio de Contraseña</h2>
  </div>
  <form method="POST" action="{{ url_for('change_pswd') }}" class="login-form">
    {{ form.hidden_tag() }}
  

    <div class="form-row password-wrapper">
      {{ form.cur_pswd(class_="form-control", placeholder="Contraseña actual", id="cur_pswd", maxlength="60", autocomplete="new-password", type="password") }}
      <button type="button" class="password-toggle"><i class="bi bi-eye-slash"></i></button>
    </div>
    
    <div class="form-row password-wrapper">
      {{ form.new_pswd(class_="form-control", placeholder="Nueva Contraseña", id="new_pswd", maxlength="60", autocomplete="new-password", type="password") }}
      <button type="button" class="password-toggle"><i class="bi bi-eye-slash"></i></button>
    </div>
  
    <ul style="list-style-type:none;">
      <li><span id="lengt10">❌</span> Al menos 10 caracteres.</li>
      <li><span id="atl1num">❌</span> Al menos un número.</li>
      <li><span id="atl1mayusc">❌</span> Al menos una mayúscula.</li>
      <li><span id="atl1chrspe">❌</span> Al menos un caracter especial: <b><i>/[!@#$%&*()_+\-=[\]{};':"\\|,.<>\/?¡¿]/</i></b>.</li>
    </ul>
  
    <button type="submit" class="btn btn-primary">
      <i class="bi bi-lock-fill"></i> Cambiar de Contraseña
    </button>
  </form>
</div>



{% endblock body %}

{% block js %}
<script type="module" src="{{ url_for( 'static', filename='h_tmp_user/change_pswd.js' ) }}"></script>


<!-- {# aos script #} -->
{% include 'z_comps/aos_script.html' %}

<!-- {# if flash #} -->
{% include 'z_comps/if_flash.html' %}




{% endblock js %}