{% extends "base.html" %}
{% block title %}Recuperar contraseña — GhostCart{% endblock %}
{% block content %}
<div class="auth-card">
  <h2>Recuperar contraseña</h2>
  <p style="color:var(--text-dim); margin-bottom:16px; font-size:0.9rem;">
    Este laboratorio no envía correos reales: el enlace de restablecimiento
    se muestra aquí mismo, como si acabaras de recibirlo en tu bandeja de entrada.
  </p>
  <div class="field">
    <label>Email de tu cuenta</label>
    <input type="email" id="input-email" required>
  </div>
  <button class="btn" id="btn-request" style="width:100%">Enviar enlace de restablecimiento</button>
  <div class="status-line" id="request-status"></div>

  <div id="email-box" style="display:none; margin-top:20px; background:#0f0f12; border:1px solid #2a2a2e; border-radius:6px; padding:16px;">
    <p style="color:var(--text-dim); font-size:0.85rem; margin-bottom:10px;">📧 Correo simulado recibido:</p>
    <p style="margin-bottom:14px;">Hola <strong id="email-username"></strong>, pulsa el siguiente enlace para elegir una nueva contraseña. El enlace caduca tras su primer uso.</p>
    <a id="email-link" href="#" class="btn">Restablecer mi contraseña</a>
  </div>
</div>
<script src="{{ url_for('static', filename='app.js') }}"></script>
{% endblock %}