{% extends 'template.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/login.css' ) }}">
<link rel="stylesheet" href="{{ url_for( 'static', filename='g_login/see_hide_pswd.css' ) }}">
{% endblock css %}

{% block navbar %}
{% include 'z_comps/navbar.html' %}
{% endblock navbar %}

{% 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 class="form-title">Bienvenido de vuelta</h2>
    <p class="form-subtitle">Ingresa tus credenciales para continuar</p>
  </div>

  <form method="POST" action="{{ url_for('login') }}" class="login-form">
    {{ form.hidden_tag() }}
  
    <!-- {# email usuario #} -->
    <div class="form-row">
      {{ form.email(class_="form-control", placeholder="usuario@email.com", type="email") }}
    </div>
    
    <!-- {# password usuario #} -->
    <div class="form-row password-wrapper">
      {{ form.password(class_="form-control", placeholder="L4_c0ntr4z3ñ4", autocomplete="on") }}
      <button type="button" class="password-toggle" id="toggleBtn"><i class="bi bi-eye-slash"></i></button>
    </div>
  
    <button type="submit" class="btn btn-primary">
      Iniciar Sesión
    </button>
  
    <div class="form-footer">
      <a href="{{ url_for('recover_pswd') }}" class="forgot-password">¿Olvidaste tu contraseña?</a>
    </div>
  </form>
  
</div>

{% endblock body %}


{% block js %}

{% include 'z_comps/if_flash.html' %}

{% include 'z_comps/aos_script.html' %}

<script src="{{ url_for('static', filename='g_login/see_hide_pswd.js') }}"></script>

{% endblock js %}