{% extends "main/base.html" %}
{% load static %}
{% load recaptcha2 %}
{% load widget_tweaks %}
{% block bootstrap3_extra_head %}
    <link rel="stylesheet" type="text/css" href="{% static 'main/css/main.css' %}"type="text/css" media="screen"/>
    {% recaptcha_init %}
{% endblock %}
{% block title %}Contact Us{% endblock %}
{% block content %}
    {% if form.errors %}
        {% for field in form %}
            {% for error in field.errors %}
                <div class="alert alert-danger">
                    {% if field.id_for_label == 'id_captcha' %}
                        <strong>reCAPTCHA: </strong>
                    {% endif%}
                    <strong>{{ error|escape }}</strong>
                </div>
            {% endfor %}
        {% endfor %}
        {% for error in form.non_field_errors %}
            <div class="alert alert-danger">
                <strong>{{ error|escape }}</strong>
            </div>
        {% endfor %}
    {% endif %}

    <form method="post" action="{% url 'contact_form' %}" class="form-horizontal">
        {% csrf_token %}
        <div class="form-group">
            <label for="id_name" class="control-label col-sm-2">{{ form.name.label }}:</label>
            <div class="controls col-sm-10">
                {{ form.name|add_class:"form-control col-sm-10" }}
            </div>
        </div>
        <div class="form-group">
            <label for="id_email" class="control-label col-sm-2">{{ form.email.label }}:</label>
            <div class="controls col-sm-10">
                {{ form.email|add_class:"form-control col-sm-10" }}
            </div>
        </div>
        <div class="form-group">
            <label for="id_body" class="control-label col-sm-2">{{ form.body.label }}:</label>
            <div class="controls col-sm-10">
                {{ form.body|add_class:"form-control col-sm-10" }}
            </div>
        </div>
        <div class="form-group bottom20">
            {{ form.captcha }}
        </div>
        <input type="submit" value="Send" class="btn btn-primary btn-lg sm-col-12" />
    </form>

{% endblock content %}