{% extends 'base_auth.html' %}

{% block title %}Reset Password{% endblock %}

{% block content %}
<section class="surface-card p-4 p-lg-5 skeleton-on-load">
  <div class="mb-4 text-center">
    <h1 class="h4 fw-bold mb-1">Reset password</h1>
    <p class="text-muted mb-0">Set a new secure password for your account.</p>
  </div>

  {% if validlink %}
    <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="mb-3">
        <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="mb-3">
        <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>

      <button type="submit" class="btn btn-brand w-100">Update Password</button>
    </form>
  {% else %}
    <div class="alert alert-warning mb-0" role="alert">
      This password reset link is invalid or already used. Please request a new link.
    </div>
  {% endif %}
</section>
{% endblock %}