{% extends "layout.html" %}

{% block content %}
  <section class="mx-auto max-w-xl ui-pane p-8">
    <div class="mb-6">
      <p class="ui-eyebrow">Access</p>
      <h1 class="ui-page-title">Forgot password</h1>
      <p class="ui-page-subtitle">Enter your email address and we'll send you a link to reset your password.</p>
    </div>

    {% if error %}
      <div class="mb-4 ui-alert border-rose-300 dark:border-rose-500/60 bg-rose-50 dark:bg-rose-500/10 text-rose-600 dark:text-rose-200">
        {{ error }}
      </div>
    {% endif %}

    <form class="space-y-4" method="post" action="/forgot-password">
      <div>
        <label class="ui-form-label" for="email">Email</label>
        <input
          class="ui-form-input mt-2 px-4 py-2.5"
          type="email"
          name="email"
          id="email"
          placeholder="you@example.com"
          required
        />
      </div>
      <button
        class="w-full ui-btn-primary hover:bg-brand-600 dark:hover:bg-brand-200 transition-colors"
        type="submit"
      >
        Send reset link
      </button>
    </form>

    <div class="mt-4 text-center">
      <a href="/login" class="text-sm text-slate-500 dark:text-slate-400 hover:text-brand-600 dark:hover:text-brand-300 transition-colors">
        Back to sign in
      </a>
    </div>
  </section>
{% endblock %}