{% extends "base.html" %}
{% block title %}
  Reset Password
{% endblock title %}
{% block main %}
  <section class="py-5 bg-gray-50 dark:bg-gray-900">
    <div class="flex flex-col items-center justify-center px-6 py-8 mx-auto max-w-md animate__animated animate__fadeIn">
      <a class="flex items-center mb-6 text-2xl font-semibold text-gray-900 dark:text-white">
        {{ _("Reset Your Password") }}
      </a>
      <div class="w-full bg-white rounded-lg shadow dark:border dark:bg-gray-800 dark:border-gray-700">
        <div class="p-6 space-y-4 md:space-y-6 sm:p-8">
          <div class="mb-4">
            <h1 class="text-xl font-bold leading-tight tracking-tight text-gray-900 md:text-2xl dark:text-white">
              {{ _("Choose a new password") }}
            </h1>
            <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">
              {{ _("For user:") }} <span class="font-semibold text-gray-900 dark:text-white">{{ username }}</span>
            </p>
            {% if expires_at %}
              <p class="mt-1 text-xs text-gray-500 dark:text-gray-500">
                {{ _("This link expires on") }} {{ expires_at.strftime("%Y-%m-%d %H:%M UTC") if expires_at.strftime else expires_at }}
              </p>
            {% endif %}
          </div>
          {% if error %}
            <div class="p-4 mb-4 text-sm text-red-800 rounded-lg bg-red-50 dark:bg-gray-800 dark:text-red-400"
                 role="alert">
              <span class="font-medium">{{ _("Error:") }}</span> {{ error }}
            </div>
          {% endif %}
          <form class="space-y-4 md:space-y-6" method="post">
            <div>
              <label for="new_password"
                     class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
                {{ _("New Password") }}
              </label>
              <input type="password"
                     name="new_password"
                     id="new_password"
                     minlength="8"
                     maxlength="128"
                     placeholder="{{ _('Enter new password (8-128 characters)') }}"
                     class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary focus:border-primary block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white"
                     required>
            </div>
            <div>
              <label for="confirm_password"
                     class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
                {{ _("Confirm Password") }}
              </label>
              <input type="password"
                     name="confirm_password"
                     id="confirm_password"
                     minlength="8"
                     maxlength="128"
                     placeholder="{{ _('Confirm new password') }}"
                     class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary focus:border-primary block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white"
                     required>
            </div>
            <div class="text-xs text-gray-500 dark:text-gray-400">
              <p>{{ _("Password must be:") }}</p>
              <ul class="list-disc list-inside mt-1">
                <li>{{ _("Between 8 and 128 characters") }}</li>
                <li>{{ _("Match the confirmation") }}</li>
              </ul>
            </div>
            <button type="submit"
                    class="w-full text-white bg-primary hover:bg-primary-dark focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary dark:hover:bg-primary-dark dark:focus:ring-primary-800">
              {{ _("Reset Password") }}
            </button>
          </form>
        </div>
      </div>
    </div>
  </section>
{% endblock main %}