<!DOCTYPE html>
<html lang="en">
<head>
    <title>RenewCMS | Setup</title>
    {{.Head}}

    <style>
        .form-container {
            max-width: 24rem;
        }
    </style>
</head>
<body class="d-flex min-vh-100 vw-100 justify-content-center align-items-center text-dark">
<div class="container">
    <div class="d-flex flex-column m-auto form-container">
        <div>
            <h1>RenewCMS</h1>
            <h2>Verify your email</h2>
        </div>
        <p>An e-mail with the validation link was sent to the address you just registered.</p>
        <p>If you misspelled the address or just didn't receive any e-mails, please check your spams or cancel the
            account creation.</p>
        <form action="" method="post" class="d-flex">
            <button class="btn btn-outline-primary w-100" type="submit">
			<span class="visually-hidden spinner-border spinner-border-sm"
                  role="status"></span>
                <span>Cancel</span>
            </button>
        </form>
    </div>
</div>

<script>
    const button = document.querySelector("button")

    function setButtonLoading() {
        button.classList.add("disabled")
        button.querySelector("button > span + span").classList.add("visually-hidden")
        button.querySelector("button > span:first-child").classList.remove("visually-hidden")
    }

    window.addEventListener('submit', setButtonLoading)
    button.addEventListener('click', setButtonLoading)
</script>

</body>
</html>
