<script>
    import AccountLayout from "../../layouts/AccountLayout.svelte";
    import { post } from "../../modules/remote";
    let { channel } = $props();
    let email = $state("");
    let message = $state("");
    let isLoading = $state(false);
    $inspect(channel);
    function login(e) {
        e.preventDefault();
        isLoading = true;
        post(
            channel.lucentUrl + "/login",
            {
                email: email,
            },
            (data, err) => {
                isLoading = false;
                message = "You will receive an email with a login link";
            },
        );
    }
</script>

<AccountLayout {body} {channel}></AccountLayout>
{#snippet body()}
    <div class="wrapper-tiny">
        {#if message}
            <div class="alert alert-info" role="alert">
                {message}
            </div>
        {:else}
            <form onsubmit={login}>
                <div class="mb-3">
                    <label for="emailaddress" class="form-label"
                        >Email address</label
                    >
                    <input
                        type="email"
                        bind:value={email}
                        class="form-control"
                        id="emailaddress"
                        required
                    />
                </div>

                <div class="text-center mt-5 d-block">
                    <button aria-busy={isLoading}>Login</button>
                </div>
            </form>
        {/if}
    </div>
{/snippet}
