{% 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">Reset password</h1>
      <p class="ui-page-subtitle">Enter a new password for your account.</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="/reset-password/{{ token }}">
      <div>
        <label class="ui-form-label" for="new_password">New password</label>
        <input
          class="ui-form-input mt-2 px-4 py-2.5"
          type="password"
          name="new_password"
          id="new_password"
          placeholder="Enter new password"
          required
        />
      </div>
      <div>
        <label class="ui-form-label" for="confirm_password">Confirm password</label>
        <input
          class="ui-form-input mt-2 px-4 py-2.5"
          type="password"
          name="confirm_password"
          id="confirm_password"
          placeholder="Confirm new password"
          required
        />
      </div>
      <button
        class="w-full ui-btn-primary hover:bg-brand-600 dark:hover:bg-brand-200 transition-colors"
        type="submit"
      >
        Reset password
      </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 %}