{% extends "base.html" %}

{% block title %}Change Password{% endblock %}

{% block content %}
<section class="rounded-3xl border border-slate-200/80 bg-white/80 p-6 shadow-sm backdrop-blur">
  <h1 class="text-3xl font-bold tracking-tight">Change Password</h1>
  <p class="mt-3 text-sm text-slate-600">Use your current password to set a new one.</p>

  {% if !page.error.is_empty() %}
  <p class="mt-4 rounded-lg border border-rose-200 bg-rose-50 px-3 py-2 text-sm text-rose-700">{{ page.error }}</p>
  {% endif %}
  {% if !page.success.is_empty() %}
  <p class="mt-4 rounded-lg border border-emerald-200 bg-emerald-50 px-3 py-2 text-sm text-emerald-700">{{ page.success }}</p>
  {% endif %}

  <form method="post" action="/planning/password" class="mt-6 grid max-w-xl gap-4">
    <label class="grid gap-2">
      <span class="text-sm font-semibold text-slate-700">Current Password</span>
      <input
        type="password"
        name="current_password"
        required
        class="rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm text-slate-900 focus:border-teal-500 focus:outline-none"
      />
    </label>
    <label class="grid gap-2">
      <span class="text-sm font-semibold text-slate-700">New Password</span>
      <input
        type="password"
        name="new_password"
        required
        minlength="4"
        class="rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm text-slate-900 focus:border-teal-500 focus:outline-none"
      />
    </label>
    <label class="grid gap-2">
      <span class="text-sm font-semibold text-slate-700">Confirm New Password</span>
      <input
        type="password"
        name="confirm_password"
        required
        minlength="4"
        class="rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm text-slate-900 focus:border-teal-500 focus:outline-none"
      />
    </label>
    <div class="flex flex-wrap items-center gap-2">
      <button type="submit" class="rounded-lg bg-slate-900 px-4 py-2 text-sm font-semibold text-white hover:bg-slate-700">Update Password</button>
      <a href="/planning" class="rounded-lg border border-slate-300 bg-white px-4 py-2 text-sm font-semibold text-slate-800 hover:bg-slate-100">Back to Planning</a>
    </div>
  </form>
</section>
{% endblock %}