{% extends "layouts/dashboard.html" %}
{% block breadcrumbs %}
<nav class="flex items-center gap-1.5 font-meta text-xs text-ruforum-text-muted" aria-label="Breadcrumb">
  <a href="{% url 'core:dashboard' %}" class="hover:text-ruforum-primary transition-colors">Dashboard</a>
  <svg class="crumb-sep" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 18l6-6-6-6"/></svg>
  <a href="{% url 'accounts:profile' %}" class="hover:text-ruforum-primary transition-colors">Account</a>
  <svg class="crumb-sep" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 18l6-6-6-6"/></svg>
  <span class="text-ruforum-text">Change password</span>
</nav>
{% endblock %}
{% block content %}
<div class="mb-6">
  <h1 class="font-display text-2xl font-bold text-ruforum-text">Change password</h1>
  <p class="mt-1 text-sm text-ruforum-text-muted">Update the password you use to sign in. You'll stay signed in on this device.</p>
</div>

<div class="max-w-xl space-y-6">
  <div class="card p-6">
    <form method="post" action="{% url 'accounts:password_change' %}" class="space-y-5">
      {% csrf_token %}

      {% if form.non_field_errors %}
        <div class="flex items-start gap-2.5 rounded-lg border border-red-200 bg-red-50 px-3.5 py-3 text-xs text-red-700" role="alert">
          <svg class="mt-0.5 h-3.5 w-3.5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z"/>
          </svg>
          <span>{{ form.non_field_errors }}</span>
        </div>
      {% endif %}

      {% for field in form %}
        {% include "components/forms/field.html" with field=field %}
      {% endfor %}

      <div class="flex items-center gap-3 pt-1">
        <button type="submit" class="btn-primary">
          <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a1.5 1.5 0 001.5-1.5v-7.5a1.5 1.5 0 00-1.5-1.5H6.75a1.5 1.5 0 00-1.5 1.5v7.5a1.5 1.5 0 001.5 1.5z"/>
          </svg>
          Update password
        </button>
        <a href="{% url 'accounts:profile' %}" class="btn-secondary">Cancel</a>
      </div>
    </form>
  </div>

  <p class="text-xs text-ruforum-text-muted">
    Forgot your current password?
    <a href="{% url 'accounts:password_reset' %}" class="font-medium text-ruforum-primary hover:underline">Reset it by email instead</a>.
  </p>
</div>
{% endblock %}