{% extends "admin/base_site.html" %}
{% load i18n static daisy_theme %}

{% block title %}{% translate 'Password change' %} | {% daisy_config "SITE_TITLE" "Django Administration" %}{% endblock %}

{% block breadcrumbs %}
{% if daisy_theme.SHOW_BREADCRUMBS %}
<div class="breadcrumbs text-sm py-2 px-4 bg-base-100/50 border-b border-base-200">
  <ul>
    <li>
      <a href="{% url 'admin:index' %}" class="flex items-center gap-1.5 text-base-content/80 hover:text-primary transition-colors">
        {% daisy_icon "home" "w-4 h-4" %}
        <span>{% translate 'Home' %}</span>
      </a>
    </li>
    <li>
      <span class="font-medium text-base-content">{% translate 'Password change' %}</span>
    </li>
  </ul>
</div>
{% endif %}
{% endblock %}

{% block content %}
<div class="daisy-changeform w-full space-y-6">
  <!-- Form Error Summary Banner -->
  {% if form.errors %}
  <div class="alert alert-error text-xs p-4 shadow-sm rounded-xl flex items-start gap-3">
    {% daisy_icon "alert-circle" "w-5 h-5 flex-shrink-0 mt-0.5" %}
    <div>
      <h3 class="font-bold text-sm">
        {% blocktranslate count counter=form.errors.items|length %}Please correct the error below.{% plural %}Please correct the errors below.{% endblocktranslate %}
      </h3>
      {% if form.non_field_errors %}
        <div class="mt-2 space-y-1">
          {{ form.non_field_errors }}
        </div>
      {% endif %}
    </div>
  </div>
  {% endif %}

  <form method="post" class="space-y-6" novalidate>
    {% csrf_token %}

    <!-- Password Change Card -->
    <div class="card bg-base-100 border border-base-200 shadow-sm overflow-hidden">
      <!-- Header with subtle gradient & icon -->
      <div class="bg-gradient-to-l from-primary/5 via-base-100 to-base-100 border-b border-base-200 px-5 md:px-6 py-4 flex items-center justify-between">
        <div class="flex items-center gap-3">
          <div class="w-8 h-8 rounded-xl bg-primary/10 text-primary flex items-center justify-center shrink-0">
            {% daisy_icon "key" "w-4 h-4" %}
          </div>
          <div>
            <h2 class="text-sm md:text-base font-bold text-base-content">{% translate 'Change password' %}</h2>
            <p class="text-xs text-base-content/60 mt-0.5">
              {% translate 'Please enter your old password, for security’s sake, and then enter your new password twice so we can verify you typed it in correctly.' %}
            </p>
          </div>
        </div>
      </div>

      <div class="p-5 md:p-6 space-y-0 divide-y divide-base-200/60">
        <!-- Old Password -->
        <div class="form-row py-4 first:pt-0 last:pb-0">
          <div class="form-control w-full space-y-1.5">
            <label for="{{ form.old_password.id_for_label }}" class="label py-0 px-0 flex justify-between items-center">
              <span class="label-text text-xs font-bold text-base-content/70 flex items-center gap-1.5">
                <span class="w-1.5 h-1.5 rounded-full bg-primary shrink-0" title="{% translate 'Required' %}"></span>
                <span>{{ form.old_password.label }}</span>
                <span class="text-error/70 text-[10px]">*</span>
              </span>
            </label>
            {% if form.old_password.errors %}
              <div class="field-errors mb-1.5">
                {{ form.old_password.errors }}
              </div>
            {% endif %}
            <div class="daisy-field-wrapper w-full">
              {{ form.old_password }}
            </div>
            {% if form.old_password.help_text %}
              <div class="text-[11px] text-base-content/50 pt-0.5 leading-normal flex items-start gap-1">
                {% daisy_icon "help-circle" "w-3 h-3 shrink-0 mt-0.5 opacity-60" %}
                <span>{{ form.old_password.help_text|safe }}</span>
              </div>
            {% endif %}
          </div>
        </div>

        <!-- New Password 1 -->
        <div class="form-row py-4 first:pt-0 last:pb-0">
          <div class="form-control w-full space-y-1.5">
            <label for="{{ form.new_password1.id_for_label }}" class="label py-0 px-0 flex justify-between items-center">
              <span class="label-text text-xs font-bold text-base-content/70 flex items-center gap-1.5">
                <span class="w-1.5 h-1.5 rounded-full bg-primary shrink-0" title="{% translate 'Required' %}"></span>
                <span>{{ form.new_password1.label }}</span>
                <span class="text-error/70 text-[10px]">*</span>
              </span>
            </label>
            {% if form.new_password1.errors %}
              <div class="field-errors mb-1.5">
                {{ form.new_password1.errors }}
              </div>
            {% endif %}
            <div class="daisy-field-wrapper w-full">
              {{ form.new_password1 }}
            </div>
            {% if form.new_password1.help_text %}
              <div class="text-[11px] text-base-content/60 pt-0.5 leading-relaxed bg-base-200/50 p-3 rounded-lg border border-base-200 flex items-start gap-2">
                {% daisy_icon "help-circle" "w-4 h-4 shrink-0 mt-0.5 text-info" %}
                <div class="space-y-1 flex-1">
                  {{ form.new_password1.help_text|safe }}
                </div>
              </div>
            {% endif %}
          </div>
        </div>

        <!-- New Password 2 (Confirm) -->
        <div class="form-row py-4 first:pt-0 last:pb-0">
          <div class="form-control w-full space-y-1.5">
            <label for="{{ form.new_password2.id_for_label }}" class="label py-0 px-0 flex justify-between items-center">
              <span class="label-text text-xs font-bold text-base-content/70 flex items-center gap-1.5">
                <span class="w-1.5 h-1.5 rounded-full bg-primary shrink-0" title="{% translate 'Required' %}"></span>
                <span>{{ form.new_password2.label }}</span>
                <span class="text-error/70 text-[10px]">*</span>
              </span>
            </label>
            {% if form.new_password2.errors %}
              <div class="field-errors mb-1.5">
                {{ form.new_password2.errors }}
              </div>
            {% endif %}
            <div class="daisy-field-wrapper w-full">
              {{ form.new_password2 }}
            </div>
            {% if form.new_password2.help_text %}
              <div class="text-[11px] text-base-content/50 pt-0.5 leading-normal flex items-start gap-1">
                {% daisy_icon "help-circle" "w-3 h-3 shrink-0 mt-0.5 opacity-60" %}
                <span>{{ form.new_password2.help_text|safe }}</span>
              </div>
            {% endif %}
          </div>
        </div>
      </div>
    </div>

    <!-- Sticky Save/Submit Bar at Bottom (matching change_form.html) -->
    <div class="submit-row sticky bottom-0 z-20 bg-base-100/95 backdrop-blur-md border border-base-200 p-3 sm:p-4 rounded-xl shadow-xl flex flex-wrap items-center justify-between gap-3">
      <a href="{% url 'admin:index' %}" class="btn btn-ghost btn-sm text-xs">
        {% translate 'Cancel' %}
      </a>
      <button type="submit" class="btn btn-primary btn-sm text-xs gap-2 shadow-md hover:shadow-lg transition-all duration-150">
        {% daisy_icon "check" "w-4 h-4" %}
        <span>{% translate 'Change my password' %}</span>
      </button>
    </div>
  </form>
</div>
{% endblock %}