{{template "base" .}}
{{define "title"}}
Reset Password
{{end}}

{{define "content"}}
<div class="row">
    <div class="col-md-6 offset-md-3">
        <div class="alert alert-danger text-center d-none" id="reset-messages"></div>
        <form action=""
              method="post"
              name="reset-form"
              id="reset-form"
              class="d-blick needs-validation"
              autocomplete="off"
              novalidate="">
            <h2 class="mt-2 mb-3 text-center">Reset Password</h2>
            <hr>
            <div class="mb-3">
                <label for="password" class="form-label">Password</label>
                <input type="password"
                       id="password"
                       name="password"
                       autocomplete="password-new"
                       required=""
                       class="form-control">
            </div>
            <div class="mb-3">
                <label for="verify-password" class="form-label">Verify Password</label>
                <input type="password"
                       id="verify-password"
                       name="verify-password"
                       autocomplete="verify-password-new"
                       required=""
                       class="form-control">
            </div>
            <hr>
            <a href="javascript:void(0)" id="reset-btn" class="btn btn-primary">Reset Password</a>
        </form>
    </div>
</div>
{{end}}
{{define "js"}}
<script type="module">
    import {reset} from "/static/js/login.js"
    document.getElementById("reset-btn").addEventListener("click", () => {
        reset({{.API}}, {{index .Data "email"}});
    })
</script>
{{end}}