{% extends "ui/templates/base/layout.html" %}

{% block content %}
<div class="mx-auto max-w-lg rounded-3xl bg-white p-6 shadow-soft">
  <h2 class="text-xl font-semibold text-slate-900">Reset Password</h2>
  <p class="mt-2 text-sm text-slate-500">
    Enter the OTP sent to your registered email and set your new password.
  </p>

  <form method="post" action="/reset-password" class="mt-6 space-y-4">
    <input type="hidden" name="csrf_token" value="{{ csrf_token }}" />

    <div>
      <label class="mb-2 block text-sm font-medium text-slate-700">OTP</label>
      <input
        type="text"
        name="otp"
        class="w-full rounded-2xl border border-slate-300 px-4 py-2.5 text-sm outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-100"
        placeholder="Enter OTP"
        required
      />
    </div>

    <div>
      <label class="mb-2 block text-sm font-medium text-slate-700">New Password</label>
      <input
        type="password"
        name="new_password"
        class="w-full rounded-2xl border border-slate-300 px-4 py-2.5 text-sm outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-100"
        placeholder="Enter new password"
        required
      />
    </div>

    <div>
      <label class="mb-2 block text-sm font-medium text-slate-700">Confirm Password</label>
      <input
        type="password"
        name="confirm_password"
        class="w-full rounded-2xl border border-slate-300 px-4 py-2.5 text-sm outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-100"
        placeholder="Re-enter new password"
        required
      />
    </div>

    <button
      type="submit"
      class="inline-flex rounded-xl bg-brand-600 px-4 py-2.5 text-sm font-medium text-white hover:bg-brand-700"
    >
      Reset Password
    </button>
  </form>

  <div class="mt-4 text-sm">
    <a class="text-brand-700 underline" href="/login">Back to login</a>
  </div>
</div>
{% endblock %}