{% extends "phone_auth/base.html" %}

{% block title_block %}
    Sign Up
{% endblock title_block %}

{% block body_block %}

    <!--suppress HtmlUnknownAttribute -->
<div class="phoneauthform">
    <h3 class="phoneauthform-title">Sign Up</h3>
    <form class="phoneauthform-content" method="POST">
        {% csrf_token %}
        {{ form.non_field_errors }}

        <div class="fieldWrapper">
            {{ form.first_name.errors }}
            <label for="id_first_name">
                First Name{% if form.first_name.field.required %}*{% endif %}:
            </label>
            <input type="text"
                   id="id_first_name"
                   name="{{ form.first_name.html_name }}"
                   {% if form.first_name.value %}
                        value="{{ form.first_name.value }}"
                   {% endif %}
                   {% if form.first_name.field.required %}required{% endif %}>
        </div>

        <div class="fieldWrapper">
            {{ form.last_name.errors }}
            <label for="id_last_name">
                Last Name{% if form.last_name.field.required %}*{% endif %}:
            </label>
            <input type="text"
                   id="id_last_name"
                   name="{{ form.last_name.html_name }}"
                   {% if form.last_name.value %}
                        value="{{ form.last_name.value }}"
                   {% endif %}
                   {% if form.last_name.field.required %}required{% endif %}>
        </div>

        <div class="fieldWrapper">
            {{ form.username.errors }}
            <label for="id_username">
                Username{% if form.username.field.required %}*{% endif %}:
            </label>
            <input type="text"
                   id="id_username"
                   name="{{ form.username.html_name }}"
                   {% if form.username.value %}
                        value="{{ form.username.value }}"
                   {% endif %}
                   {% if form.username.field.required %}required{% endif %}>
        </div>

        <div class="fieldWrapper">
            {{ form.email.errors }}
            <label for="id_email">
                Email{% if form.email.field.required %}*{% endif %}:
            </label>
            <input type="email"
                   id="id_email"
                   name="{{ form.email.html_name }}"
                   {% if form.email.value %}
                        value="{{ form.email.value }}"
                   {% endif %}
                   {% if form.email.field.required %}required{% endif %}>
        </div>

        <div class="fieldWrapper">
            {{ form.phone.errors }}
            <label for="id_phone">
                Phone{% if form.phone.field.required %}*{% endif %}:
            </label>
            <input type="tel"
                   id="id_phone"
                   name="{{ form.phone.html_name }}"
                   {% if form.phone.value %}
                        value="{{ form.phone.value }}"
                   {% endif %}
                   {% if form.phone.field.required %}required{% endif %}>
        </div>

        <div class="fieldWrapper">
            {{ form.password.errors }}
            <label for="id_password">
                Password{% if form.password.field.required %}*{% endif %}:
            </label>
            <input type="password"
                   id="id_password"
                   name="{{ form.password.html_name }}"
                   {% if form.password.field.required %}required{% endif %}>
        </div>

        <div class="fieldWrapper">
            {{ form.confirm_password.errors }}
            <label for="id_confirm_password">
                Confirm Password{% if form.confirm_password.field.required %}*{% endif %}:
            </label>
            <input type="password"
                   id="id_confirm_password"
                   name="{{ form.confirm_password.html_name }}"
                   {% if form.confirm_password.field.required %}required{% endif %}>
        </div>

        <button class="phoneauth-button" type="submit">Submit</button>
    </form>
    <div class="dpa-help-text">
        <p>
            Have an account? <a href="{% url 'phone_auth:phone_login' %}">Log in</a>
        </p>
    </div>
</div>
{% endblock body_block %}