{% extends "Base.html" %}
{% block head %}
    <title>Register Page</title>
    <link href="/static/css/bootstrap.min.css" rel="stylesheet" >
    <link href="/static/sign-in/signin.css" rel="stylesheet">
    <script src="/static/js/bootstrap.bundle.min.js"></script>
    <script src="/static/js/jquery-3.4.1.js"></script>
    <script src="/static/js/Register.js"></script>
    <style>
    form.form-signin{
        width: 700%;
    }
    input{
        float: right;
        width: 38%;
    }
    select{
        float: right;
        width: 38%;
    }
    </style>
{% endblock %}

{% block body %}
    <form class="form-signin" method="POST" action='{% url 'register' %}' ><br><br>
        <h1>註冊</h1>
        <br>
        <p style="text-align:center;">請填寫以下資料</p>
        <p style="color:green">{{ note }}</p>
        {% csrf_token %}
        <div>
        <p>{{ form.username.label_tag }} {{ form.username }}</p>
        </div>
        <div>
        <p>{{ form.password1.label_tag }} <input type="password" name="password1" id="id_password1" required/></p>
        <p id='alertBox1'></p>
        </div>

        <div>
        <p>{{ form.password2.label_tag }} <input type="password" name="password2" id="id_password2" required/></p>
        <p id='alertBox2'></p>
        </div>


        <button class="btn btn-lg btn-primary btn-block" type="submit"><a href='' style="color:black">註冊</a></button>
        <br>

        <p>已經有帳戶了?</p>
        <button class="btn btn-lg btn-primary btn-block" type="button"><a href='{% url 'login' %}' style="color:black">登入</a></button>
    </form>
{% endblock %}