{% extends "site/site_base.html" %}

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

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

{% block body %}
  <div class="dz-auth-container">
    <div class="card bg-base-100 shadow-xl dz-auth-card">
      <div class="card-body">
        <a href="/" class="dz-auth-logo text-primary font-bold text-xl">{{ product_name }}</a>
        <h1 class="card-title text-2xl justify-center">{{ title }}</h1>

        <div id="dz-auth-error" class="alert alert-error hidden" role="alert"></div>

        <form id="dz-auth-form" method="POST" action="{{ action_url }}">
          <input type="hidden" id="token" name="token" value="">

          <div class="form-control w-full">
            <label class="label" for="new_password">
              <span class="label-text">New Password</span>
            </label>
            <input type="password" id="new_password" name="new_password" required minlength="8" autocomplete="new-password" class="input input-bordered w-full">
          </div>

          <div class="form-control w-full">
            <label class="label" for="confirm_password">
              <span class="label-text">Confirm Password</span>
            </label>
            <input type="password" id="confirm_password" name="confirm_password" required minlength="8" autocomplete="new-password" class="input input-bordered w-full">
          </div>

          <button type="submit" class="btn btn-primary w-full mt-4">
            {{ button_text }}
          </button>
        </form>

        <p class="dz-auth-switch text-center text-sm mt-4">
          <a href="{{ other_page }}" class="link link-primary">{{ other_link_text }}</a>
        </p>
      </div>
    </div>
  </div>
{% endblock %}

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