{% extends "base.html" %}
{% load wagtailcore_tags navigation_tags wagtailimages_tags %}

{% block content %}

    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <h1 class="index-header__title">{{ page.title }}</h1>
            </div>
            <div class="col-md-8 index-header__body-introduction">
                {% if page.intro %}
                    <p class="intro">{{ page.intro|richtext }}</p>
                {% endif %}
                {% if page.body %}
                    {{ page.body }}
                {% endif %}
            </div>
        </div>
    </div>

    <div class="container">
        <div class="row">
            <div class="col-md-8 form-page">
                {% comment %}
        You could render your form using a Django rendering shortcut such as `{{ form.as_p }}` but that will tend towards unsemantic code, and make it difficult to style. You can read more on Django form at:
        https://docs.djangoproject.com/en/3.2/topics/forms/#form-rendering-options
        {% endcomment %}
                <form action="{% pageurl page %}" method="POST">
                    {% csrf_token %}
                    {% if form.subject.errors %}
                        <ol>
                            {% for error in form.subject.errors %}
                                <li><strong>{{ error|escape }}</strong></li>
                            {% endfor %}
                        </ol>
                    {% endif %}

                    {% for field in form %}
                        <div class="form-page__field" aria-required={% if field.field.required %}"true"{% else %}"false"{% endif %}>

                            {{ field.label_tag }}{% if field.field.required %}<span class="required">*</span>{% endif %}

                            {% if field.help_text %}
                                <p class="help">{{ field.help_text }}</p>
                            {% endif %}

                            {{ field }}
                        </div>
                    {% endfor %}

                    <input type="submit">
                </form>
            </div>
        </div>
    </div>
{% endblock content %}