{% extends 'base.html' %}
{% load i18n %}

{% block title %}
    <title>House Wars - Signup</title>
{% endblock %}

{% block formtitle %}
    <h1 class="text-center mt-1 mb-4">Signup</h1>
{% endblock %}

{% block content %}
    <form method="POST">
        {% csrf_token %}
        {{ wizard.management_form }}
        <div class="steps-form">
            <div class="steps-row setup-panel">
                <div class="steps-step">
                    <button name="wizard_goto_step" class="btn btn-primary btn-circle" type="disabled" value="user">1</button>
                    <p>Student Information</p>
                </div>
                <div class="steps-step">
                    <button name="wizard_goto_step" class="btn btn-secondary btn-circle" type="submit"
                        value="activity">2</button>
                    <p>Activity Information</p>
                </div>
            </div>
        </div>

        {% if messages %}
            {% for message in messages %}
                <div class="alert alert-{{  message.tags  }}">
                    {{ message }}
                </div>
            {% endfor %}
        {% endif %}
        
        <label for="name" class="form-label">Name:</label>
        <div class="row mb-3" id="name">
            <div class="col">
                {{ form.first_name }}
            </div>
            <div class="col">
                {{ form.last_name }}
            </div>
        </div>
        <div class="mb-3">
            <label for="email" class="form-label">Email:</label>
            {{ form.email }}
        </div>
        <div class="mb-3">
            <label for="grade" class="form-label">Grade:</label>
            {{ form.grade }}
        </div>
        <div class="mb-3">
            <label for="house" class="form-label">House:</label>
            {{ form.house }}
        </div>
        
        <div class="form-group d-flex justify-content-center">        
            <input class="btn btn-outline-primary btn-100" type="submit" value="Submit" />
        </div>
    </form>
{% endblock %}