{% extends "base.html" %}

{% block body %}
<section class="section">
  <div class="container">
    <h1 class="title">{{ title }}</h1>
    <form class="box" hx-post="{{ endpoint }}" hx-params="not dry" hx-target-400="#error-message-retype"
      hx-on:input="document.getElementById('error-message-retype').innerHTML = ''">
      <input type="hidden" name="token" value="{{ token }}" />

      <input type="hidden" name="dry" value="true" />

      <div class="field">
        <label class="label" for="password">{{ new_password_label }}</label>
        <div class="control">
          <input class="input" hx-post="{{ endpoint }}" hx-params="*" hx-trigger="keyup changed delay:500ms"
            hx-target="#password-strength" hx-target-400="#password-strength" placeholder="**********" name="password"
            type="password" required hx-swap="outerHTML" maxlength=256
            hx-on:input="document.getElementById('password-strength').innerHTML = ''">
        </div>
        <div id="password-strength" class="mb-3 help content"></div>
      </div>

      <div class="field">
        <label class="label" for="passwordretyped">{{ retype_label }}</label>
        <div class="control">
          <input class="input" placeholder="**********" name="passwordretyped" type="password" maxlength=256 required>
        </div>
        <div id="error-message-retype" class="mb-3 help is-danger"></div>
      </div>

      <div class="level">
        <input class="button is-primary level-left" type="submit" value="{{ submit_button_label }}" />
      </div>
    </form>
  </div>
</section>
{% endblock %}