<form
        th:fragment="form"
        class="halo-form"
        th:action="@{/password-reset/email/{resetToken}(resetToken=${resetToken})}"
        method="post"
        th:object="${form}"
>
    <div class="alert alert-error" role="alert" th:if="${error}">
        <strong th:if="${error == 'rate_limit_exceeded'}" th:text="#{error.rate_limit_exceeded}"></strong>
    </div>
    <div class="form-item">
        <label for="password" th:text="#{form.password.label}">Password</label>
        <th:block
                th:replace="~{gateway_fragments/input :: password(id = 'password', name = 'password', required = 'true', minlength = 5, maxlength = 257, enableToggle = true)}"
        ></th:block>
        <p class="alert alert-error" th:if="${#fields.hasErrors('password')}" th:errors="*{password}"></p>
    </div>
    <div class="form-item">
        <label for="confirmPassword" th:text="#{form.confirmPassword.label}">Confirm Password</label>
        <th:block
                th:replace="~{gateway_fragments/input :: password(id = 'confirmPassword', name = 'confirmPassword', required = 'true', minlength = 5, maxlength = 257, enableToggle = true)}"
        ></th:block>
        <p class="alert alert-error" th:if="${#fields.hasErrors('confirmPassword')}" th:errors="*{confirmPassword}"></p>
    </div>
    <div class="form-item">
        <div class="alert" th:text="#{form.password.tips}"></div>
    </div>
    <div class="form-item">
        <button type="submit" th:text="#{form.submit}"></button>
    </div>

    <script th:inline="javascript">
        document.addEventListener("DOMContentLoaded", function () {
            setupPasswordConfirmation("password", "confirmPassword");
        });
    </script>
</form>