{% 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) %}
  {# The form is intercepted by _auth_form_script.html (preventDefault + fetch with X-CSRF-Token header). #}
  {# `method` attribute omitted — submission is always via the JS handler; CSRF protection is header-based. #}
  <form id="dz-auth-form" action="{{ action_url }}" class="space-y-3">
    <div class="w-full space-y-1">
      <label for="email" class="block text-[13px] font-medium text-[hsl(var(--foreground))]">Email</label>
      <input type="email" id="email" name="email" required autocomplete="email"
             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="password" class="block text-[13px] font-medium text-[hsl(var(--foreground))]">Password</label>
      <input type="password" id="password" name="password" required autocomplete="current-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-right text-[12px] mt-2">
    <a href="/forgot-password" class="text-[hsl(var(--muted-foreground))] hover:text-[hsl(var(--foreground))] hover:underline">Forgot password?</a>
  </p>

  <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/_auth_form_script.html" %}
</script>
{% endblock %}