<?php if (isset($_SESSION['message'])): ?>
  <div class="alert alert-<?php echo $_SESSION['message_type']; ?>">
      <?php 
          echo $_SESSION['message']; 
          unset($_SESSION['message']);
      ?>
  </div>
<?php endif; ?>

<!doctype html>
<html lang="es">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Recuperación de constraseña - Sistema de Trámite</title>
    <link rel="icon" type="image/png" href="<?= BASE_HREF ?>assets/favicon.png">
    <link rel="stylesheet" href="<?= BASE_HREF ?>css/simplebar.css">
    <link href="https://fonts.googleapis.com/css2?family=Overpass:wght@300;400;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="<?= BASE_HREF ?>css/feather.css">
    <link rel="stylesheet" href="<?= BASE_HREF ?>css/daterangepicker.css">
    <link rel="stylesheet" href="<?= BASE_HREF ?>css/app-light.css" id="lightTheme">
    <link rel="stylesheet" href="<?= BASE_HREF ?>css/app-dark.css" id="darkTheme" disabled>
  </head>
  <body class="light">
    <div class="wrapper vh-100">
      <div class="row align-items-center h-100">
        <div class="col-lg-4 col-md-6 col-10 mx-auto text-center">
          <div class="card shadow p-4">
            <div class="text-center mb-2">
              <h4 class="mb-0 font-weight-bold">MESA DE PARTES DIGITAL</h4>
              <small class="text">UGEL CORONGO</small>
            </div>
            <a class="navbar-brand mx-auto mb-4 flex-fill text-center" href="<?= BASE_HREF ?>">
              <img src="<?= BASE_SRC ?>assets/favicon.png" alt="Logo del sistema" class="navbar-brand-img brand-sm" style="height: 100px; width: auto;">
            </a>
            <h4 class="mb-3">📩 Revisa tu correo electrónico</h4>
            <p class="mb-1">Hemos enviado un enlace para restablecer tu contraseña a:</p>
            <p><strong><?= htmlspecialchars($emailToShow) ?></strong></p>
            <p class="text-muted">Haz clic en el enlace para continuar con la recuperación de tu cuenta.</p>

            <hr class="my-4">

            <form action="<?= BASE_ACTION ?>auth/resend-reset-code" method="POST">
              <input type="hidden" name="email" value="<?= htmlspecialchars($email) ?>">
              <button type="submit" class="btn btn-outline-primary btn-block">¿No recibiste el correo? Reenviarlo</button>
            </form>

            <p class="text-muted mt-4">Si no ves el correo en tu bandeja de entrada, revisa en "Spam" o "Promociones".</p>
          </div>
        </div>
      </div>
    </div>

    <script src="<?= BASE_SRC ?>js/jquery.min.js"></script>
    <script src="<?= BASE_SRC ?>js/popper.min.js"></script>
    <script src="<?= BASE_SRC ?>js/moment.min.js"></script>
    <script src="<?= BASE_SRC ?>js/bootstrap.min.js"></script>
    <script src="<?= BASE_SRC ?>js/simplebar.min.js"></script>
    <script src="<?= BASE_SRC ?>js/daterangepicker.js"></script>
    <script src="<?= BASE_SRC ?>js/jquery.stickOnScroll.js"></script>
    <script src="<?= BASE_SRC ?>js/tinycolor-min.js"></script>
    <script src="<?= BASE_SRC ?>js/config.js"></script>
    <script src="<?= BASE_SRC ?>js/apps.js"></script>
  </body>
</html>
