{{define "title"}}Leave the Inner Circle{{end}}
{{define "content"}}
<div class="container">
    <section class="hero is-inner-circle is-bold">
        <div class="hero-body">
            <div class="container">
                <h1 class="title has-text-light">
                    <img src="/static/img/circle-24.png" class="mr-1">
                    Leave the Inner Circle
                </h1>
            </div>
        </div>
    </section>

    <div class="block p-4">
        <div class="level">
            <div class="level-item">
                <div class="card" style="max-width: 512px">
                    <header class="card-header has-background-link">
                        <p class="card-header-title has-text-light">
                            <img src="/static/img/circle-16.png" class="mr-2">
                            Leave the Inner Circle
                        </p>
                    </header>
                    <div class="card-content content">
                        <form id="leave_circle" method="POST" action="/inner-circle/leave">
                            {{InputCSRF}}
                            <input type="hidden" name="confirm" value="true">

                            <p>
                                Are you sure that you want to <strong>leave the {{PrettyCircle}}?</strong>
                            </p>

                            <p>
                                This action can not be un-done easily; after leaving the inner circle, the only
                                way back in is for somebody in the circle to invite you again.
                            </p>

                            <p>
                                In case you <strong>do not want</strong> to be invited into the circle again,
                                you can check the box below.
                            </p>

                            <label class="checkbox mb-4 has-text-warning">
                                <input type="checkbox"
                                    name="dont_reinvite"
                                    id="dont_reinvite"
                                    value="true">
                                Don't let anyone invite me to the {{PrettyCircle}} again.
                            </label>

                            <div class="block has-text-center">
                                <button type="submit" class="button is-danger">Leave the Inner Circle</button>
                                <button type="button" class="button is-success" onclick="history.back()">Cancel</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>
{{end}}
{{define "scripts"}}
<script>
document.addEventListener("DOMContentLoaded", () => {
    let $form = document.querySelector("#leave_circle"),
        $cb = document.querySelector("#dont_reinvite");
    
    $form.addEventListener("submit", (e) => {
        if ($cb.checked) {
            if (!window.confirm(
                "Are you sure you want to leave the circle, permanently?\n\n" +
                    "You have requested that nobody can re-invite you into the circle again in the future. " +
                    "This action CAN NOT be undone!\n\n" +
                    "If you want to leave open the possibility to be re-invited in the future, click Cancel " +
                    "and un-check that box."
            )) {
                e.preventDefault();
                return false;
            }
        }
    });
})
</script>
{{end}}