{% 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">Your account</div>
            <div class="p-3">
              <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 email") }}
                {% 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 password") }}
                {% 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 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>
  </main>
{% endblock content %}