{% extends 'base.html' %}

{% block title %}Change Password{% endblock %}

{% block content %}
<section class="content-section">
  <div class="section-heading mb-3">
    <h2 class="h5 fw-semibold mb-1">Change Password</h2>
    <p class="text-muted mb-0">Update your account password with a strong credential.</p>
  </div>

  <div class="surface-card p-4 skeleton-on-load">
    <form method="post" novalidate>
      {% csrf_token %}

      {% if form.non_field_errors %}
        <div class="alert alert-danger" role="alert">{{ form.non_field_errors }}</div>
      {% endif %}

      <div class="row g-3">
        <div class="col-md-4">
          <label class="form-label" for="id_old_password">Current Password</label>
          <div class="input-group password-field-group">
            {{ form.old_password }}
            <button
              class="btn btn-outline-secondary password-toggle-btn"
              type="button"
              data-password-toggle
              data-target="id_old_password"
              aria-controls="id_old_password"
              aria-label="Show password"
            >
              <i class="bi bi-eye-fill" aria-hidden="true"></i>
            </button>
          </div>
          <div class="caps-lock-hint" data-caps-lock-for="id_old_password" role="status" aria-live="polite">Caps Lock is on.</div>
          {% if form.old_password.errors %}<div class="invalid-feedback d-block">{{ form.old_password.errors|join:', ' }}</div>{% endif %}
        </div>
        <div class="col-md-4">
          <label class="form-label" for="id_new_password1">New Password</label>
          <div class="input-group password-field-group">
            {{ form.new_password1 }}
            <button
              class="btn btn-outline-secondary password-toggle-btn"
              type="button"
              data-password-toggle
              data-target="id_new_password1"
              aria-controls="id_new_password1"
              aria-label="Show password"
            >
              <i class="bi bi-eye-fill" aria-hidden="true"></i>
            </button>
          </div>
          <div class="caps-lock-hint" data-caps-lock-for="id_new_password1" role="status" aria-live="polite">Caps Lock is on.</div>
          {% if form.new_password1.errors %}<div class="invalid-feedback d-block">{{ form.new_password1.errors|join:', ' }}</div>{% endif %}
        </div>
        <div class="col-md-4">
          <label class="form-label" for="id_new_password2">Confirm Password</label>
          <div class="input-group password-field-group">
            {{ form.new_password2 }}
            <button
              class="btn btn-outline-secondary password-toggle-btn"
              type="button"
              data-password-toggle
              data-target="id_new_password2"
              aria-controls="id_new_password2"
              aria-label="Show password"
            >
              <i class="bi bi-eye-fill" aria-hidden="true"></i>
            </button>
          </div>
          <div class="caps-lock-hint" data-caps-lock-for="id_new_password2" role="status" aria-live="polite">Caps Lock is on.</div>
          {% if form.new_password2.errors %}<div class="invalid-feedback d-block">{{ form.new_password2.errors|join:', ' }}</div>{% endif %}
        </div>
      </div>

      <div class="mt-4 d-flex justify-content-end">
        <button type="submit" class="btn btn-brand">Update Password</button>
      </div>
    </form>
  </div>
</section>
{% endblock %}