{% extends "shell.html" %}

{% block title %}Register{% endblock %}

{% block head %}
<link rel="stylesheet" href="/static/auth.css"/>
{% endblock %}

{% block page %}
<div class="main">
    <a id="alyphebig" href="https://asklyphe.com/">
        <div id="lyphebig">
            <div class="bent-surrounding">
                <img id="lypheimg" src="/static/img/lyphebent.png" alt="image of lyphe, our mascot!">
            </div>
            <div id="lyphetitle">
                <img src="/static/img/logo.png" alt="ask Lyphe!"/>
                <p>the best search engine!</p>
            </div>
        </div>
    </a>
    <h1>register</h1>
    <div class="form">
        {% match error %}
        {% when Some with (val) %}
        <div class="error">{{ val }}</div>
        {% when None %}
        {% endmatch %}
        {% if success %}
        <div class="success">your account has been registered! before attempting to login, please check your email for a
            link to verify your account
        </div>
        {% endif %}
        <form method="post">
            <table class="form-table">
                <tr>
                    <td><label for="username">username</label></td>
                    <td><input class="textbox" type="text" id="username" name="username" placeholder="lyphe"
                               value="{{ username }}"/></td>
                </tr>
                <tr>
                    <td><label for="email">email</label></td>
                    <td><input class="textbox" type="email" id="email" name="email" placeholder="e@mail.com"
                               value="{{ email }}"/></td>
                </tr>
                <tr>
                    <td><label for="password">password</label></td>
                    <td><input class="textbox" type="password" id="password" name="password"/></td>
                </tr>
                <tr>
                    <td><label for="verifypassword">verify password</label></td>
                    <td><input class="textbox" type="password" id="verifypassword" name="verifypassword"/></td>
                </tr>
                <tr>
                    <td><label for="invitecode">invite code</label></td>
                    <td><input class="textbox" type="password" id="invitecode" name="invitecode"
                               value="{{ invite_code }}"/></td>
                </tr>
            </table>
            <div class="form-buttons">
                <input class="button register-button" type="submit" value="register!"/>
                <a class="bigbutton" href="/login">i have an account</a>
            </div>
        </form>
    </div>
</div>

{% include "ui/footer.html" %}
{% endblock %}