{% extends 'template.html' %}

{% block css %}
{% endblock css %}

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

{% block body %}


<!-- En tu template (frontend) -->
{% with messages = get_flashed_messages(with_categories=true) %}
  {% if messages %}
        {% for category, message in messages %}
            <div class="alert alert-{{ category }}">{{ message }}</div>
        {% endfor %}
  {% endif %}
{% endwith %}



<form method="POST" action="{{ url_for('recover_pswd') }}" class="w-100 mx-auto p-4 border rounded shadow" novalidate>
  {{ form.hidden_tag() }}
  {{ form.csrf_token }}
  
  <div class="mb-3">
    {{ form.email.label(class="form-label fw-bold") }}
    {{ form.email(
        class="form-control" + (" is-invalid" if form.email.errors else ""),
        **{"aria-describedby": "emailHelp"}
    ) }}
    
    {% if form.email.errors %}
      <div class="invalid-feedback">
        {% for error in form.email.errors %}
          {{ error }}
        {% endfor %}
      </div>
    {% endif %}
    
    <div id="emailHelp" class="form-text">{{ form.email.description }}</div>
  </div>

  <button type="submit" class="btn btn-primary w-100 py-2 mb-3">
    <i class="bi bi-envelope-fill me-2"></i> Recuperar contraseña
  </button>

  <div class="text-center mt-3">
    <a href="{{ url_for('login') }}" class="text-decoration-none">
      <i class="bi bi-arrow-left me-1"></i> Regresar al Log In
    </a>
  </div>
</form>


{% endblock body %}

{% block js %}

{% endblock js %}