{# pages/profile/password.html — change password #}
{% extends "base.html" %}

{% block title %}Change Password — {{ title | default("Admin") }}{% endblock %}

{% block breadcrumb %}
{{ super() }}
<span class="text-[var(--color-gray-400)]">/</span>
<a href="{{ admin_path | default('/admin') }}/profile" class="hover:text-[var(--color-primary-600)] transition-colors">Profile</a>
<span class="text-[var(--color-gray-400)]">/</span>
<span class="text-[var(--color-gray-900)] font-medium">Change Password</span>
{% endblock %}

{% block content %}
<div class="space-y-6">
  <div class="page-header">
    <div class="page-header-left">
      <a href="{{ admin_path | default('/admin') }}/profile" class="page-header-back">
        {{ icon("chevron-left") }}
        Profile
      </a>
      <h1 class="page-header-title">Change Password</h1>
    </div>
  </div>

  {% if error %}
  <div class="p-4 rounded-lg bg-red-50 border border-red-200 text-red-700 text-sm">
    {{ error }}
  </div>
  {% endif %}

  <form method="post" action="{{ admin_path | default('/admin') }}/profile/password" class="space-y-6">
    <input type="hidden" name="csrf_token" value="{{ get_csrf_token(request) }}">

    <div class="bg-white rounded-xl border border-[var(--color-gray-200)] p-6">
      <h2 class="text-lg font-semibold text-[var(--color-gray-900)] mb-4">Password Requirements</h2>
      <ul class="text-sm text-[var(--color-gray-600)] space-y-1 list-disc list-inside">
        <li>At least 12 characters</li>
        <li>At least one uppercase letter</li>
        <li>At least one lowercase letter</li>
        <li>At least one digit</li>
        <li>At least one special character</li>
      </ul>
    </div>

    <div class="bg-white rounded-xl border border-[var(--color-gray-200)] p-6">
      <div class="grid grid-cols-1 gap-6">
        <div>
          <label for="current_password" class="block text-sm font-medium text-[var(--color-gray-700)] mb-1">Current Password</label>
          <input type="password" id="current_password" name="current_password" required
                 class="form-input w-full px-4 py-2.5 rounded-lg border border-[var(--color-gray-300)] bg-white text-[var(--color-gray-900)] focus:ring-2 focus:ring-[var(--color-primary-500)] focus:border-[var(--color-primary-500)] transition-colors">
        </div>
        <div>
          <label for="new_password" class="block text-sm font-medium text-[var(--color-gray-700)] mb-1">New Password</label>
          <input type="password" id="new_password" name="new_password" required
                 class="form-input w-full px-4 py-2.5 rounded-lg border border-[var(--color-gray-300)] bg-white text-[var(--color-gray-900)] focus:ring-2 focus:ring-[var(--color-primary-500)] focus:border-[var(--color-primary-500)] transition-colors">
        </div>
        <div>
          <label for="confirm_password" class="block text-sm font-medium text-[var(--color-gray-700)] mb-1">Confirm New Password</label>
          <input type="password" id="confirm_password" name="confirm_password" required
                 class="form-input w-full px-4 py-2.5 rounded-lg border border-[var(--color-gray-300)] bg-white text-[var(--color-gray-900)] focus:ring-2 focus:ring-[var(--color-primary-500)] focus:border-[var(--color-primary-500)] transition-colors">
        </div>
      </div>
    </div>

    <div class="sticky bottom-0 bg-white border border-[var(--color-gray-200)] rounded-xl p-4 flex items-center justify-end gap-3">
      <a href="{{ admin_path | default('/admin') }}/profile"
         class="px-4 py-2 rounded-lg border border-[var(--color-gray-300)] text-sm text-[var(--color-gray-700)] hover:bg-[var(--color-gray-50)] transition-colors">
        Cancel
      </a>
      <button type="submit"
              class="btn-primary px-4 py-2 rounded-lg bg-[var(--color-primary-600)] text-white text-sm font-medium hover:bg-[var(--color-primary-500)] transition-colors">
        Change Password
      </button>
    </div>
  </form>
</div>
{% endblock %}