{% extends "base.html" %}
{% block title %}Change Password — {{ target_user.username }} — Fossilrepo{% endblock %}

{% block content %}
<div class="mb-6">
  <a href="{% url 'organization:user_detail' username=target_user.username %}" class="text-sm text-brand-light hover:text-brand">&larr; Back to {{ target_user.username }}</a>
</div>

<div class="mx-auto max-w-2xl">
  <h1 class="text-2xl font-bold text-gray-100 mb-6">Change Password for {{ target_user.username }}</h1>

  <form method="post" class="space-y-6 rounded-lg bg-gray-800 p-6 shadow border border-gray-700">
    {% csrf_token %}

    {% for field in form %}
    <div>
      <label for="{{ field.id_for_label }}" class="block text-sm font-medium text-gray-300">
        {{ field.label }}{% if field.field.required %} <span class="text-red-400">*</span>{% endif %}
      </label>
      <div class="mt-1">{{ field }}</div>
      {% if field.errors %}
      <p class="mt-1 text-sm text-red-400">{{ field.errors.0 }}</p>
      {% endif %}
    </div>
    {% endfor %}

    <p class="text-sm text-gray-500">Password must be at least 8 characters and not entirely numeric or too common.</p>

    <div class="flex justify-end gap-3 pt-4">
      <a href="{% url 'organization:user_detail' username=target_user.username %}"
         class="rounded-md bg-gray-700 px-4 py-2 text-sm font-semibold text-gray-100 shadow-sm ring-1 ring-inset ring-gray-600 hover:bg-gray-600">
        Cancel
      </a>
      <button type="submit"
              class="rounded-md bg-brand px-4 py-2 text-sm font-semibold text-white shadow-sm hover:bg-brand-hover">
        Change Password
      </button>
    </div>
  </form>
</div>
{% endblock %}