{% extends "base.html" %}

{% block title %}Set New Password | TrustForge{% endblock %}
{% block meta_description %}Create a new password for your TrustForge account securely.{% endblock %}

{% block content %}
<section class="py-5 py-lg-6">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-lg-7 col-xl-6">
        <div class="tf-panel tf-panel-centered tf-auth-card">
          <div class="tf-eyebrow">Create new password</div>
          <h1 class="tf-page-title">{{ auth_page_title }}</h1>
          <p class="tf-page-subtitle">{{ auth_page_description }}</p>
          {% if validlink %}
            <form method="post" novalidate class="mt-4">
              {% csrf_token %}
              {% if form.non_field_errors %}
                <div class="alert alert-danger">{{ form.non_field_errors|join:', ' }}</div>
              {% endif %}
              <div class="mb-3">
                <label class="form-label">New password</label>
                {{ form.new_password1 }}
                {% if form.new_password1.errors %}<div class="text-danger small mt-1">{{ form.new_password1.errors|join:', ' }}</div>{% endif %}
              </div>
              <div class="mb-3">
                <label class="form-label">Confirm new password</label>
                {{ form.new_password2 }}
                {% if form.new_password2.errors %}<div class="text-danger small mt-1">{{ form.new_password2.errors|join:', ' }}</div>{% endif %}
              </div>
              <button type="submit" class="btn tf-btn tf-btn-primary w-100">Update password</button>
            </form>
          {% else %}
            <div class="tf-empty-state text-center mt-4">
              <h2 class="h4 mb-2">Reset link unavailable</h2>
              <p class="text-secondary-emphasis mb-0">This reset link is invalid or has already been used. Request a fresh one below.</p>
            </div>
            <a class="btn tf-btn tf-btn-primary mt-4" href="{% url 'password_reset' %}">Request a new link</a>
          {% endif %}
        </div>
      </div>
    </div>
  </div>
</section>
{% endblock %}