{% extends "site/site_base.html" %}
{% from 'macros/auth_page_wrapper.html' import auth_page_card %}

{% block title %}{{ title }} - {{ product_name }}{% endblock %}

{% block body_class %}dz-auth-page{% endblock %}
{% block body_attrs %}hx-history="false"{% endblock %}

{% block body %}
{% call auth_page_card(title, product_name) %}
  {# Submission intercepted by _reset_password_script.html (preventDefault + fetch with X-CSRF-Token header). #}
  <form id="dz-auth-form" action="{{ action_url }}" class="space-y-3">
    <input type="hidden" id="token" name="token" value="">

    <div class="w-full space-y-1">
      <label for="new_password" class="block text-[13px] font-medium text-[hsl(var(--foreground))]">New Password</label>
      <input type="password" id="new_password" name="new_password" required minlength="8" autocomplete="new-password"
             class="w-full h-8 px-3 rounded-[4px] bg-[hsl(var(--background))] border border-[hsl(var(--border))] text-[13px] text-[hsl(var(--foreground))] placeholder:text-[hsl(var(--muted-foreground))] focus:outline-none focus:ring-1 focus:ring-[hsl(var(--ring))] transition-[box-shadow,border-color] duration-[120ms] [transition-timing-function:cubic-bezier(0.2,0,0,1)]">
    </div>
    <div class="w-full space-y-1">
      <label for="confirm_password" class="block text-[13px] font-medium text-[hsl(var(--foreground))]">Confirm Password</label>
      <input type="password" id="confirm_password" name="confirm_password" required minlength="8" autocomplete="new-password"
             class="w-full h-8 px-3 rounded-[4px] bg-[hsl(var(--background))] border border-[hsl(var(--border))] text-[13px] text-[hsl(var(--foreground))] placeholder:text-[hsl(var(--muted-foreground))] focus:outline-none focus:ring-1 focus:ring-[hsl(var(--ring))] transition-[box-shadow,border-color] duration-[120ms] [transition-timing-function:cubic-bezier(0.2,0,0,1)]">
    </div>

    <button type="submit"
            class="w-full h-9 rounded-[4px] bg-[hsl(var(--primary))] text-[hsl(var(--primary-foreground))] text-[13px] font-medium hover:brightness-110 transition-[filter] duration-[80ms] [transition-timing-function:cubic-bezier(0.2,0,0,1)] mt-4">
      {{ button_text }}
    </button>
  </form>

  <p class="text-center text-[13px] mt-4">
    <a href="{{ other_page }}" class="text-[hsl(var(--primary))] hover:underline">{{ other_link_text }}</a>
  </p>
{% endcall %}
{% endblock %}

{% block scripts_extra %}
<script>
{% include "site/auth/_reset_password_script.html" %}
</script>
{% endblock %}