{% extends "base.html" %}

{% block content %}
        <section class="heading">
            <div class="container">
                <div class="text-center">
                    <h2>{{ page.heading }}</h2>
                    <div class="row">
                        <div class="col-xs-12 col-sm-8 col-sm-offset-2">
                            {{ page.content }}
                        </div>
                    </div>
                </div>
                
                {% if contact_form_success %}
                    <div class="text-center">
                        <h3>Your message has been sent</h3>
                        <p>{{ page.message_sent_message }}</p>
                    </div>
                {% else %}
                    <form method="post">
                        {% csrf_token %}
                        <div class="row">
                            <div class="col-xs-12 col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2">
                                <div class="contact-form">
                                    <div class="form-row">
                                        Society or Organisation name:
                                        <div class="field-container">
                                            {{ contact_form.company }}
                                            {{ contact_form.company.errors }}
                                        </div>
                                    </div>

                                    <div class="form-row">
                                        What is your enquiry?
                                        <div class="field-container">
                                            {{ contact_form.message }}
                                            {{ contact_form.message.errors }}
                                        </div>
                                    </div>

                                    <div class="form-row">
                                        Your details:
                                        <div class="row">
                                            <div class="col-xs-6">
                                                <div class="field-container">
                                                    {{ contact_form.name }}
                                                    {{ contact_form.name.errors }}
                                                </div>
                                            </div>
                                            <div class="col-xs-6">
                                                <div class="field-container">
                                                    {{ contact_form.email }}
                                                    {{ contact_form.email.errors }}
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="text-center">
                                        <button class="contactbtn">SUBMIT</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                {% endif %}
            </div>
        </section>
{% endblock %}