{% extends "base.html" %}

{% block title %}Set New Password • Keywarden{% endblock %}

{% block content %}
  <div class="mx-auto max-w-md rounded-2xl border border-gray-200 bg-white p-6 shadow-sm sm:p-8">
    <h1 class="text-2xl font-semibold tracking-tight text-gray-900">Set a new password</h1>
    {% if validlink %}
      <form method="post" class="mt-6 space-y-4">
        {% csrf_token %}
        <div>
          <label class="mb-2 block text-sm font-medium text-gray-900" for="{{ form.new_password1.id_for_label }}">New password</label>
          {{ form.new_password1 }}
        </div>
        <div>
          <label class="mb-2 block text-sm font-medium text-gray-900" for="{{ form.new_password2.id_for_label }}">Confirm password</label>
          {{ form.new_password2 }}
        </div>
        {% if form.errors %}
          <div class="rounded-lg bg-red-50 p-3 text-sm text-red-800">
            Please fix the errors and try again.
          </div>
        {% endif %}
        <button
          type="submit"
          class="inline-flex w-full items-center justify-center rounded-lg bg-blue-700 px-5 py-2.5 text-sm font-semibold text-white hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300"
        >
          Update password
        </button>
      </form>
    {% else %}
      <p class="mt-4 text-sm text-gray-600">
        This password reset link is invalid or expired.
      </p>
      <a
        href="{% url 'accounts:password_reset' %}"
        class="mt-6 inline-flex w-full items-center justify-center rounded-lg border border-gray-200 bg-gray-50 px-5 py-2.5 text-sm font-semibold text-gray-800 hover:bg-gray-100"
      >
        Request a new reset link
      </a>
    {% endif %}
  </div>
{% endblock %}