{% extends "ui/templates/base/layout.html" %}
{% block content %}
<div class="mx-auto max-w-2xl rounded-2xl border bg-white p-6 shadow-soft">
  <h1 class="text-2xl font-semibold">Change Password</h1>
  <p class="mt-1 text-sm text-slate-500">Enter your current password, then confirm the password change using the OTP sent to your registered email.</p>

  {% if flash %}
  <div class="mt-4 rounded-xl border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-900">
    {{ flash }}
  </div>
  {% endif %}

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

    <label class="block">
      <span class="mb-2 block text-sm font-medium text-slate-700">Current Password</span>
      <input type="password" name="current_password" class="w-full rounded-xl border px-3 py-2" required />
    </label>

    <label class="block">
      <span class="mb-2 block text-sm font-medium text-slate-700">New Password</span>
      <input type="password" name="new_password" class="w-full rounded-xl border px-3 py-2" required />
    </label>

    <label class="block">
      <span class="mb-2 block text-sm font-medium text-slate-700">Confirm New Password</span>
      <input type="password" name="confirm_password" class="w-full rounded-xl border px-3 py-2" required />
    </label>

    <div class="flex gap-3 pt-2">
      <button type="submit" class="rounded-xl bg-slate-900 px-4 py-2 text-sm text-white">Send OTP</button>
      <a href="/system-settings" class="rounded-xl border px-4 py-2 text-sm">Cancel</a>
    </div>
  </form>
</div>
{% endblock %}