{% extends "layout/base.html" %}
{% load widget_tweaks %}

{% block title %}Homepage{% endblock title %}

{% block content %}
<h1>Django project running.</h1>

<div class="row">
  <div class="col-md-4 offset-md-4">
    <form method="post" id="id_contact_form" data-post-url="{% url 'home' %}">
        {% csrf_token %}

        <div class="form-group">
            <p>{{ contact_form.name.label }}</p>
            {% render_field contact_form.name class+="form-control" %}
            {{ contact_form.name.errors }}
        </div>
        <div class="form-group">
            <p>{{ contact_form.email.label }}</p>
            {% render_field contact_form.email class+="form-control" %}
            {{ contact_form.email.errors }}
        </div>
        <div class="form-group">
            <p>{{ contact_form.message.label }}</p>
            {% render_field contact_form.message class+="form-control" %}
            {{ contact_form.message.errors }}
        </div>
        <div class="actions">
            <button type="submit" class="btn btn-success">Enviar</button>
        </div>
    </form>
  </div>
</div>
{% endblock content %}

{% block js %}
<script>
$(function() {
    'use strict';

    $('#id_contact_form').on('submit', function() {
        var post_url = $("#id_contact_form").data("post-url");

        var formData = new FormData(this);

        $.ajax({
            url : post_url,
            type: "POST",
            data : formData,
            processData: false,
            contentType: false,
            success:function(response){
                var message = response.content.message
                alert(message);
            },
        });

        return false;
    });
});
</script>
{% endblock %}