{% extends "bare_base.html" %} {% block title %}Register{% endblock %} {% block
toolbar_attrs %}style="position: fixed; top: 0; background: transparent;"{%
endblock %} {% block content%}
<style>
    #_page {
        display: grid;
        place-items: center;
        height: 100dvh;
        max-height: 100dvh;
        width: 100dvw;
    }
</style>

<div class="flex flex-col gap-2">
    <main class="small flex flex-col items-center gap-2">
        <div
            id="success"
            class="w-full card round flex flex-col gap-2"
            style="display: none; width: 100%"
        ></div>
        <div
            id="error"
            class="mdnote note-error full"
            style="display: none"
        ></div>

        <div
            class="card round gap-4 flex-col md:flex-row"
            style="
                width: 50rem;
                max-width: 100dvw;
                display: flex;
                padding: 2rem;
            "
            id="forms"
        >
            <div class="w-full flex flex-col gap-4">
                <h2 class="no-margin">Hello!</h2>

                <p class="w-full">
                    Create a new account with a unique username to continue.
                </p>

                <p class="w-full">
                    By continuing, you agree to the terms of use.
                </p>
            </div>

            <form
                class="card more_padding secondary round w-full flex flex-col gap-2"
                action="/api/v1/auth/register"
                id="register-user"
            >
                <label for="username"><b>Username</b></label>

                <input
                    type="text"
                    name="username"
                    id="username"
                    placeholder="my-unique-username"
                    class="w-full round"
                    required="true"
                    minlength="4"
                    maxlength="32"
                />

                <hr />

                <button class="theme:primary w-full round">
                    Create Account
                    <svg
                        xmlns="http://www.w3.org/2000/svg"
                        width="18"
                        height="18"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        stroke-width="2"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        class="lucide lucide-arrow-right"
                        aria-label="Right arrow symbol"
                    >
                        <path d="M5 12h14" />
                        <path d="m12 5 7 7-7 7" />
                    </svg>
                </button>
            </form>
        </div>

        <div class="footernav w-full justify-center">
            <div class="item">
                <a href="/">Homepage</a>
            </div>

            <div class="item">
                <a
                    href="{{ base.starstraw }}/spirit/login?callback={{ callback }}"
                >
                    Login
                </a>
            </div>
        </div>

        <!-- prettier-ignore -->
        <script type="text/plain" style="display: none" id="callback">{{ callback }}</script>

        <script>
            use("starstraw", (mod) => {
                mod.render_register(
                    document.getElementById("register-user"),
                    document.getElementById("callback").innerText,
                );
            });
        </script>
    </main>
</div>
{% call super() %} {% endblock %}