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

{% block title %}{% if form.user.has_usable_password %}{% translate 'Change password' %}{% else %}{% translate 'Set password' %}{% endif %} | {% daisy_config "SITE_TITLE" "Django Administration" %}{% endblock %}

{% block breadcrumbs %}
{% if not is_popup and 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>
      <a href="{% url 'admin:app_list' app_label=opts.app_label %}" class="text-base-content/80 hover:text-primary transition-colors">
        {{ opts.app_config.verbose_name }}
      </a>
    </li>
    <li>
      <a href="{% url opts|admin_urlname:'changelist' %}" class="text-base-content/80 hover:text-primary transition-colors">
        {{ opts.verbose_name_plural|capfirst }}
      </a>
    </li>
    <li>
      <a href="{% url opts|admin_urlname:'change' original.pk|admin_urlquote %}" class="text-base-content/80 hover:text-primary transition-colors">
        {{ original|truncatewords:"18" }}
      </a>
    </li>
    <li>
      <span class="font-medium text-base-content">
        {% if form.user.has_usable_password %}{% translate 'Change password' %}{% else %}{% translate 'Set password' %}{% endif %}
      </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{% if form_url %} action="{{ form_url }}"{% endif %} method="post" id="{{ opts.model_name }}_form" class="space-y-6" novalidate>
    {% csrf_token %}
    <input type="text" name="username" value="{{ original.get_username }}" class="hidden">
    {% if is_popup %}<input type="hidden" name="{{ is_popup_var }}" value="1">{% endif %}

    <div class="card bg-base-100 border border-base-200 shadow-sm overflow-hidden">
      <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">
              {% blocktranslate with username=original %}Enter a new password for the user <strong>{{ username }}</strong>.{% endblocktranslate %}
            </h2>
            {% if not form.user.has_usable_password %}
            <p class="text-xs text-warning mt-0.5">
              {% blocktranslate %}This action will <strong>enable</strong> password-based authentication for this user.{% endblocktranslate %}
            </p>
            {% endif %}
          </div>
        </div>
      </div>

      <div class="p-5 md:p-6 space-y-0 divide-y divide-base-200/60">
        {% if form.usable_password %}
        <div class="form-row py-4 first:pt-0 last:pb-0">
          <div class="form-control w-full space-y-1.5">
            <label class="flex items-center gap-3.5 p-3.5 rounded-xl border border-base-200 bg-base-200/20 hover:bg-primary/5 cursor-pointer transition-all duration-200">
              {{ form.usable_password }}
              <span class="text-sm font-semibold text-base-content">{{ form.usable_password.label }}</span>
            </label>
            {% if form.usable_password.help_text %}
              <div class="text-[11px] text-base-content/50 pt-0.5">
                {{ form.usable_password.help_text|safe }}
              </div>
            {% endif %}
          </div>
        </div>
        {% endif %}

        <!-- 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.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.password1.label }}</span>
                <span class="text-error/70 text-[10px]">*</span>
              </span>
            </label>
            {% if form.password1.errors %}
              <div class="field-errors mb-1.5">
                {{ form.password1.errors }}
              </div>
            {% endif %}
            <div class="daisy-field-wrapper w-full">
              {{ form.password1 }}
            </div>
            {% if form.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.password1.help_text|safe }}
                </div>
              </div>
            {% endif %}
          </div>
        </div>

        <!-- Password 2 -->
        <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.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.password2.label }}</span>
                <span class="text-error/70 text-[10px]">*</span>
              </span>
            </label>
            {% if form.password2.errors %}
              <div class="field-errors mb-1.5">
                {{ form.password2.errors }}
              </div>
            {% endif %}
            <div class="daisy-field-wrapper w-full">
              {{ form.password2 }}
            </div>
            {% if form.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.password2.help_text|safe }}</span>
              </div>
            {% endif %}
          </div>
        </div>
      </div>
    </div>

    <!-- Sticky Save Bar Bottom -->
    <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 opts|admin_urlname:'change' original.pk|admin_urlquote %}" class="btn btn-ghost btn-sm text-xs">
        {% translate 'Cancel' %}
      </a>
      <div class="flex items-center gap-2">
        {% if form.user.has_usable_password %}
          <input type="submit" name="unset-password" value="{% translate 'Disable password-based authentication' %}" class="btn btn-outline btn-warning btn-sm text-xs">
          <button type="submit" name="set-password" class="btn btn-primary btn-sm text-xs gap-1.5 shadow-md">
            {% daisy_icon "check" "w-4 h-4" %}
            <span>{% translate 'Change password' %}</span>
          </button>
        {% else %}
          <button type="submit" name="set-password" class="btn btn-primary btn-sm text-xs gap-1.5 shadow-md">
            {% daisy_icon "check" "w-4 h-4" %}
            <span>{% translate 'Enable password-based authentication' %}</span>
          </button>
        {% endif %}
      </div>
    </div>
  </form>
</div>
<script src="{% static 'admin/js/unusable_password_field.js' %}" defer></script>
{% endblock %}