{% extends '__layout__.html' %}
{% block title %}Reset Password{% endblock %}
{% block head %}
<style>

.auth-container{height:100vh;display:flex;align-items:center;justify-content:center;background:rgba(15,15,15,.5);backdrop-filter:blur(10px)}
.auth-box{background:rgba(23,23,23,.7);border-radius:8px;box-shadow:0 8px 32px rgba(0,0,0,.2);padding:25px;width:100%;max-width:420px;border:1px solid rgba(255,255,255,.05)}
.auth-box h1{font-weight:700;margin-bottom:5px;color:#fff}
.auth-box p{color:#aaa;margin-bottom:20px}
.auth-box input, .auth-box select{background:rgba(30,30,30,.6);border:1px solid rgba(255,255,255,.1);color:#fff;padding:12px 15px;border-radius:6px;margin-bottom:12px;backdrop-filter:blur(5px);transition:all .2s;width:100%}
.auth-box input:focus, .auth-box select:focus{border-color:rgba(255,255,255,.3);box-shadow:0 0 0 2px rgba(255,255,255,.1)}
.auth-box button{width:100%;padding:12px;border-radius:6px;background:linear-gradient(45deg,#6b46c1,#9f7aea);border:none;color:#fff;font-weight:600;margin-top:5px;transition:all .3s}
.auth-box button:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(107,70,193,.3)}
.auth-box .links{text-align:center;margin-top:15px;color:#aaa}
.auth-box .links a{color:#9f7aea;text-decoration:none;transition:color .2s}
.auth-box .links a:hover{color:#b794f4;text-decoration:underline}
.alert{border-radius:6px;padding:10px;margin-bottom:15px;text-align:center}
.alert-danger{background:rgba(220,38,38,.1);border:1px solid rgba(220,38,38,.3);color:#ef4444}
.alert-success{background:rgba(34,197,94,.1);border:1px solid rgba(34,197,94,.3);color:#22c55e}
.cf-turnstile{margin:0 auto 15px;display:table}
body {
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
}

.navbar,
.sidebar,
.subnav-bar,
#footer,
#websitewidemessage {
  display: none !important;
}

.main-content {
  margin-left: 0 !important;
  padding: 0 !important;
}
</style>
<script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>
{% endblock %}
{% block content %}
<div class="auth-container">
  <div class="auth-box">
    <center><h1>VORTEXI</h1>
    <p>Please enter the email linked to your account</p></center>
    {% with messages = get_flashed_messages(with_categories=true) %}
      {% if messages %}
        {% for category, message in messages %}
          {% if category == 'error': %}
          <div class="alert alert-danger">{{ message }}</div>
          {% endif %}
          {% if category == 'success': %}
          <div class="alert alert-success">{{ message }}</div>
          {% endif %}
        {% endfor %}
      {% endif %}
    {% endwith %}
    <form method="post">
      <input type="email" id="email" name="email" placeholder="Email" required>
      <div class="cf-turnstile" data-theme="dark" data-sitekey="{{turnstilekey}}"></div>
      <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
      <button type="submit">Reset Password</button>
    </form>
    <div class="links">
      <p>Remember your password? <a href="/login">Login</a></p>
    </div>
  </div>
</div>

{% endblock %}