{% extends "base.html" %}


{% block head %}
{% include 'head_content.html' with title="LyProX · Sign up" %}
{% endblock head %}


{% block content %}

<section class="section">
    <div class="container">
        <div class="block columns is-centered">
            <div class="column is-6">
                <div class="box">
                    <p class="title is-3">Sign Up</p>
                    <p class="subtitle is-5">
                        Request an account by reaching out to us
                    </p>

                    <form action="{% url 'accounts:signup_request' %}" method="post">
                        {% csrf_token %}

                        {% if form.errors %}
                        <div class="notification is-danger is-light">
                            {{ form.non_field_errors }}
                        </div>
                        {% endif %}

                        <div class="field is-grouped">
                            <div class="control">
                                <label for="{{ form.title.id_for_label }}" class="label">
                                    {{ form.title.label }}
                                </label>
                                {{ form.title }}
                            </div>

                            <div class="control is-expanded">
                                <label for="{{ form.first_name.id_for_label }}" class="label">
                                    {{ form.first_name.label }}
                                </label>
                                {{ form.first_name }}
                            </div>

                            <div class="control is-expanded">
                                <label for="{{ form.last_name.id_for_label }}" class="label">
                                    {{ form.last_name.label }}
                                </label>
                                {{ form.last_name }}
                            </div>
                        </div>

                        <div class="field is-grouped">
                            <div class="control is-expanded">
                                <label for="{{ form.email.id_for_label }}" class="label">
                                    {{ form.email.label }}
                                </label>
                                {{ form.email }}
                            </div>

                            <div class="control is-expanded">
                                <label for="{{ form.institution.id_for_label }}" class="label">
                                    {{ form.institution.label }}
                                </label>
                                {{ form.institution }}
                            </div>
                        </div>

                        <div class="field">
                            <div class="control is-expanded">
                                <label for="{{ form.message.id_for_label }}" class="label">
                                    {{ form.message.label }}
                                </label>
                                {{ form.message }}
                            </div>
                        </div>

                        <div class="field is-grouped is-grouped-right">
                            <div class="control">
                                <button class="button is-primary" type="submit">
                                    <span class="icon">
                                        <i class="fas fa-paper-plane"></i>
                                    </span>
                                    <span>Submit</span>
                                </button>
                            </div>
                        </div>

                    </form>
                </div>
            </div>
        </div>
    </div>
</section>

{% endblock content %}