{% extends "base_anon.html" %}

{% block title %}Sign up{% endblock %}

{% block main %}

<h5 class="card-title float-end">Sign up</h5>

<div id="result" class="alert alert-danger" style="display: none"></div>

<form action="{{ url('auth/register') }}" method="post" onsubmit="return register(this)">
    <div class="form-floating mb-2">
        <input type="email" name="email" class="form-control" placeholder="" required>
        <label class="form-label">Email address</label>
    </div>
    <div class="form-floating mb-2">
        <input type="password" name="password" class="form-control" placeholder="" required>
        <label class="form-label">Password</label>
    </div>
    <button type="submit" class="btn btn-primary">Sign up</button>
</form>

<p class="mt-2">
<a href="{{ url('login') }}">Sign in if you already have an account</a>
</p>

<script>
function register(form) {
    const message = 'Successful registration! Please type your email and password.';
    const successURL = `{{ url("login") }}?message=${encodeURIComponent(message)}`;
    submitFormAsJSON(form, successURL);
    return false;
}
</script>

{% endblock %}
