{% extends 'base.html' %}

{% block content %}
    <h1> Sign up below to access the game. </h1> 

    <!-- Make it so the user has to sign up to access the game to record the highscore -->
<div class="container" style="width: 850px;">
    <br/>
    <h1 style="color: rgb(20, 157, 221);">Register</h1>
    <br/>
    <form method="POST" action="register">
        {% csrf_token %}
        <div class="mb-3">
            <label for="exampleFormControlInput1" class="form-label" style="color: rgb(20, 157, 221);">Username</label>
            <input type="text" class="form-control" id="exampleFormControlInput1" name="username">

            <label for="exampleFormControlInput1" class="form-label" style="color: rgb(20, 157, 221);">E-mail</label>
            <input type="email" class="form-control" id="exampleFormControlInput1" name="email">

            <label for="exampleFormControlInput1" class="form-label" style="color: rgb(20, 157, 221);">Password</label>
            <input type="password" class="form-control" id="exampleFormControlInput1" name="password1">

            <label for="exampleFormControlInput1" class="form-label" style="color: rgb(20, 157, 221);">Confirm your password</label>
            <input type="password" class="form-control" id="exampleFormControlInput1" name="password2">
        </div>
        <div class="d-grid gap-2 col-6 mx-auto">
            <input type="submit" value="Submit" class="btn btn-success">
        </div>
        <div class="d-grid gap-2 d-md-flex justify-content-md-end">            
            <form>
                <input type="button" value="Back" onclick="history.back()" class="btn btn-outline-danger" >
            </form>
        </div>
        <div class="d-grid gap-2 d-md-block">
            <form>
                <a href="login"><input type="button" value="Login" class="btn btn-outline-warning" ></a>
            </form>
        </div>
    </form>
</div>
{% endblock %}


    <!-- <h1> Sign up below to access the game. </h1> 

    <form>
        <input type="button" value="Back" onclick="history.back()">
    </form>
    
    <form method="POST" action="register">
        {% csrf_token %}
        <p>Username: </p>
        <input type="text" name="username"/>

        <p>E-mail: </p>
        <input type="email" name="email"/>

        <p>Password: </p>
        <input type="password" name="password1"/>

        <p>Confirm your Password: </p>
        <input type="password" name="password2"/> <br>

        <input type="submit"/> <br>

        <a href="login"> Login</a>
    </form> -->