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

{% block content_title %}{% endblock %}
{% block content_subtitle %}{% endblock %}

{% block content %}
<div class="flex bg-slate-50 dark:bg-slate-950">
  {% include "admin/includes/forge_sidebar.html" %}
  <main class="flex-1 min-h-screen">
    {% include "admin/includes/forge_topbar.html" with title="" subtitle="" %}
    <section class="p-6">
      <div class="w-full">
        <div class="mb-4 flex items-center gap-2 text-sm text-slate-500">
          {% forge_icon "key" "h-4 w-4" %}
          <span>{% trans "Security" %}</span>
          <span>&rsaquo;</span>
          <span class="text-slate-700 dark:text-slate-200 font-medium">{% trans "Change password" %}</span>
        </div>

        <form method="post" novalidate>
          {% csrf_token %}
          <div class="rounded-xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 overflow-hidden">
            <div class="px-4 py-3 border-b border-slate-200 dark:border-slate-700 bg-slate-50/70 dark:bg-slate-900/40">
              <h2 class="text-sm font-semibold uppercase tracking-wide text-slate-500">{% trans "Update your password" %}</h2>
            </div>

            {% if form.errors %}
              <div class="mx-4 mt-4 rounded-md border border-rose-200 bg-rose-50 dark:border-rose-900 dark:bg-rose-950/30 px-3 py-2 text-sm text-rose-700 dark:text-rose-300">
                {% trans "Please correct the errors below." %}
              </div>
            {% endif %}

            <div class="forge-form-row">
              <div class="forge-form-label">
                <label for="{{ form.old_password.id_for_label }}" class="block text-sm font-medium text-slate-700 dark:text-slate-200">
                  {{ form.old_password.label }}
                </label>
              </div>
              <div class="forge-form-control">
                {{ form.old_password }}
                {% if form.old_password.errors %}<ul class="text-xs text-rose-600 dark:text-rose-300">{% for error in form.old_password.errors %}<li>{{ error }}</li>{% endfor %}</ul>{% endif %}
              </div>
            </div>

            <div class="forge-form-row">
              <div class="forge-form-label">
                <label for="{{ form.new_password1.id_for_label }}" class="block text-sm font-medium text-slate-700 dark:text-slate-200">
                  {{ form.new_password1.label }}
                </label>
              </div>
              <div class="forge-form-control">
                {{ form.new_password1 }}
                {% if form.new_password1.help_text %}<p class="text-xs text-slate-500 mt-1">{{ form.new_password1.help_text|safe }}</p>{% endif %}
                {% if form.new_password1.errors %}<ul class="text-xs text-rose-600 dark:text-rose-300">{% for error in form.new_password1.errors %}<li>{{ error }}</li>{% endfor %}</ul>{% endif %}
              </div>
            </div>

            <div class="forge-form-row">
              <div class="forge-form-label">
                <label for="{{ form.new_password2.id_for_label }}" class="block text-sm font-medium text-slate-700 dark:text-slate-200">
                  {{ form.new_password2.label }}
                </label>
              </div>
              <div class="forge-form-control">
                {{ form.new_password2 }}
                {% if form.new_password2.help_text %}<p class="text-xs text-slate-500 mt-1">{{ form.new_password2.help_text|safe }}</p>{% endif %}
                {% if form.new_password2.errors %}<ul class="text-xs text-rose-600 dark:text-rose-300">{% for error in form.new_password2.errors %}<li>{{ error }}</li>{% endfor %}</ul>{% endif %}
              </div>
            </div>

            <div class="px-4 py-3 border-t border-slate-200 dark:border-slate-700 bg-white/95 dark:bg-slate-900/95">
              <div class="forge-submit-row">
                <button type="submit" class="forge-btn forge-btn-primary">
                  {% forge_icon "key" "h-4 w-4" %}
                  <span>{% trans "Change password" %}</span>
                </button>
              </div>
            </div>
          </div>
        </form>
      </div>
    </section>
  </main>
</div>
{% endblock %}