{% load i18n wagtailsettings_tags coyote_tags %}
{% get_settings %}
<section class="contact_form {{self.coyote_bg}}" id="{{ self.coyote_anchor }}">
    <div class="container">
        <div class="row">
            <div class="col-lg-7 mx-auto text-center block-lead">
                <div class="px-lg-0 px-3">
                    {% if self.title %}
                        <h2 class="mb-2 display-5 fw-bold">{{self.title}}</h2>
                    {% endif %}
                    {% if self.body %}
                    <div class="mb-5">
                        {{ self.body }}
                    </div>
                    {% endif %}
                    {% optional_url 'contact_form:contact-form-handler' as contact_form_url %}
                    {% if contact_form_url %}
                    <form id="contact-form" method="post" action="{{ contact_form_url }}">
                        {% csrf_token %}
                        <div class="controls">
                            <div class="row">
                                {% for field in form %}
                                <div class="col-lg-12">
                                    <div class="form_field_wrapper" cite="{{ field.field.widget.attrs.placeholder }}">
                                        {% render_optional_template 'oscar/partials/form_field.html' field=field placeholder=field.field.widget.attrs.placeholder nolabel=True as rendered_field %}
                                        {% if rendered_field %}
                                            {{ rendered_field }}
                                        {% else %}
                                            {{ field }}
                                        {% endif %}
                                    </div>
                                </div>
                                {% endfor %}
                                <div class="col-lg-12 p-0">
                                    <input type="submit" class="btn btn-primary btn-send" value="{% trans 'Submit' %}">
                                </div>
                            </div>
                        </div>
                    </form>
                    {% else %}
                    <p class="mb-0">{% trans "The contact form is currently unavailable." %}</p>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</section>