{% extends "layout.html" %} {% block content %}
  <main class="container mt-4">
    <section class="row justify-content-center">
      <!-- action is empty string so that we post back to our current route -->
      <form class="col-md-6" action="" method="post">
        <!-- hidden tag helps protect against CSRF (by using CSRF token) -->
        {{ form.hidden_tag() }}
        <fieldset class="bg-white rounded shadow border">
          <div class="text-center h3 primary-colour m-2 pb-2 border-bottom">Register</div>
          <div class="p-4">
            <section class="form-group">
              {{ form.first_name.label(class="primary-colour") }}
              {% if form.first_name.errors %}
                {{ form.first_name(class="form-control is-invalid") }}
                <div class="text-danger">
                  {% for error in form.first_name.errors %}
                    <small>{{ error }}</small>
                  {% endfor %}
                </div>
              {% else %}
                {{ form.first_name(class="form-control", placeholder="Enter first name") }}
              {% endif %}
            </section>
            <section class="form-group">
              {{ form.last_name.label(class="primary-colour") }}
              {% if form.last_name.errors %}
                {{ form.last_name(class="form-control is-invalid") }}
                <div class="text-danger">
                  {% for error in form.last_name.errors %}
                    <small>{{ error }}</small>
                  {% endfor %}
                </div>
              {% else %}
                {{ form.last_name(class="form-control", placeholder="Enter last name") }}
              {% endif %}
            </section>
            <section class="form-group">
              {{ form.email.label(class="primary-colour") }}
              {% if form.email.errors %}
                {{ form.email(class="form-control is-invalid") }}
                <div class="text-danger">
                  {% for error in form.email.errors %}
                    <small>{{ error }}</small>
                  {% endfor %}
                </div>
              {% else %}
                {{ form.email(class="form-control", placeholder="Enter email") }}
                <small class="form-text text-muted">We will never share your email with anyone else.</small>
              {% endif %}
            </section>

            <section class="form-group">
              {{ form.password.label(class="primary-colour") }}
              {% if form.password.errors %}
                {{ form.password(class="form-control is-invalid") }}
                <div class="text-danger">
                  {% for error in form.password.errors %}
                      <small>{{ error }}</small>
                  {% endfor %}
                </div>
              {% else %}
                {{ form.password(class="form-control", placeholder="Enter password") }}
              {% endif %}
            </section>

            <section class="form-group">
              {{ form.password2.label(class="primary-colour") }}
              {% if form.password2.errors %}
                {{ form.password2(class="form-control is-invalid") }}
                <div class="text-danger">
                  {% for error in form.password2.errors %}
                      <small>{{ error }}</small>
                  {% endfor %}
                </div>
              {% else %}
                {{ form.password2(class="form-control", placeholder="Re-enter password") }}
              {% endif %}
            </section>

            <section class="d-flex justify-content-between">
              <a class="btn btn-secondary" href="{{ url_for('main.index') }}" title="Cancel and return to landing page">Cancel</a>
              {{ form.submit(class="btn btn-primary") }}
            </section>

          </div>
        </fieldset>
      </form>
    </section>
    <section class="d-flex justify-content-center">
      <small class="primary-colour mt-3">
        Already have an account? <a href="{{ url_for('users.login') }}" title="Go to login page">Login</a>
      </small>
    </section>
  </main>
{% endblock content %}