{% extends 'layout.html' %}
{% from 'bootstrap5/form.html' import render_field %}

{% block app_content %}
<div class="card text-center">
    <div class="card-body">
        <img class="mb-4" src="{{ url_for('static', filename='img/banner.png')
                               }}" alt="GoatHacks Banner">
        <h1 class="h3 mb-3 fw-normal">Welcome to GoatHacks!</h1>
        <p class="card-text">Please use this page to register for this year's
        Hackathon. Accounts from prior years are not carried over!</p>

        <div class="text-center">
            <form action="" method="post" class="form" role="form">
                {{ form.csrf_token() }}
                <div class="form-floating mb-3 required">
                    {{ form.email(class="form-control") }}
                    {{ form.email.label() }}
                </div>
                <div class="row">
                    <div class="col">
                        <div class="form-floating mb-3 required">
                            {{ form.password(class="form-control") }}
                            {{ form.password.label() }}
                        </div>
                    </div>
                    <div class="col">
                        <div class="form-floating mb-3 required">
                            {{ form.password_confirm(class="form-control") }}
                            {{ form.password_confirm.label() }}
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col">
                        <div class="form-floating mb-3 required">
                            {{ form.first_name(class="form-control") }}
                            {{ form.first_name.label() }}
                        </div>
                    </div>
                    <div class="col">
                        <div class="form-floating mb-3 required">
                            {{ form.last_name(class="form-control") }}
                            {{ form.last_name.label() }}
                        </div>
                    </div>
                </div>
                <div class="form-floating mb-3 required">
                    {{ form.school(class="form-control") }}
                    {{ form.school.label() }}
                </div>
                <div class="form-floating mb-3 required">
                    {{ form.phone_number(class="form-control") }}
                    {{ form.phone_number.label() }}
                </div>
                <div class="form-floating mb-3 required">
                    {{ form.gender(class="form-control") }}
                    {{ form.gender.label() }}
                </div>
                <div class="form-check mb-3 required">
                    {{ form.agree_coc }}
                    {{ form.agree_coc.label() }}
                </div>
                {{ render_field(form.submit) }}
            </form>
        </div>
    </div>
</div>
{% endblock %}