{% load i18n bootstrap3 popupcrud_list %}
<form class='form-horizontal' id='create-edit-form' action='{{ form_url }}' method='post' accept-charset='utf-8'>
    {% csrf_token %}
    {% bootstrap_form form layout='horizontal' %}
    {% if formset %}
        {% render_formset formset %}
        {% comment %}
        Note that we're using $.one() instead of the more natural @.on() as we want 
        the handler to be removed after running. Otherwise, with every activation of
        the modal, an extra row of 'Add' button will be added to the bottom of the 
        formset form table and an extra set of 'Delete' buttons will be added to
        the end of every form row.
        {% endcomment %}
        <script>
        $(document).one("crudform.ready", function(event) {
            console.log("Crudform is ready!")
            $("#id_formset table tbody tr").formset({
                prefix: "{{ formset.prefix }}",
                addText: '<button type="button" class="btn btn-default btn-sm" aria-label="Add"><span class="glyphicon glyphicon-plus-sign"></span> {% trans "Add " %}</button>',
                deleteText: "<span class='glyphicon glyphicon-trash' title='{% trans "Remove" %}'></span>",
                });
        });
        </script>
    {% endif %}
    {% trans "Save" as submit %}
    {% trans "Reset" as reset %}
    <div class="form-group">
        <div class="col-md-offset-3 col-md-9">
            {% bootstrap_button submit button_type="submit" button_class="btn-primary" %}
            {# {% bootstrap_button reset button_type="reset" button_class="btn-default" %} #}
            {% if request.is_ajax %}
            {% trans "Cancel" as cancel %}
            <button type="button" class="btn btn-default" data-dismiss="modal">{% trans 'Cancel' %}</button>
            {% endif %}
        </div>
    </div>
</form>