{% set includes_collection = false %}
{% verbatim %}{{ form_start(form, { attr : { class : 'form-horizontal' } }) }}{% endverbatim %}

{% for field in form.fields %}
{% set placeholder = "'placeholder': '" ~ field.titel ~ "'" %}
{% set css_class = "'class': '" ~ field.getCssClass() ~ "'" %}

{% if field.type starts with 'form#' %}
{% set includes_collection = true %}
<!-- Subform #{{ field.volgorde }} {{ field.titel }} -->
{% verbatim %}{%{% endverbatim %} macro subform_{{ field.referentie }}(form) {% verbatim %}%}{% endverbatim %}
    <div class="vm-subform-item">
    {% verbatim %}{%{% endverbatim %} include 'VisualMFormEntity~{{ field.type|slice(5,-2) }}~formHtml' {% verbatim %}%}{% endverbatim %}
    </div>
{% verbatim %}{%{% endverbatim %} endmacro {% verbatim %}%}{% endverbatim %}

<div class="form-group field__row {% verbatim %}{%{% endverbatim %} if form.{{ field.referentie }}.vars.errors|length > 0 {% verbatim %}%}{% endverbatim %}has-error{% verbatim %}{%{% endverbatim %} endif {% verbatim %}%}{% endverbatim %}">
    {% if field.label %}
    <label for="{% verbatim %}{{{% endverbatim %} form.{{ field.referentie }}.vars.id {% verbatim %}}}{% endverbatim %}" class="col-xs-12 col-sm-4 control-label">{{ field.titel }} {% if field.verplicht %}<sup class="required">*</sup>{% endif %}</label>
    {% endif %}
    <div class="col-xs-12 col-sm-8 vm-subform-container" data-prototype="{% verbatim %}{{{% endverbatim %} _self.subform_{{ field.referentie }}(form.{{ field.referentie }}.vars.prototype)|e {% verbatim %}}}{% endverbatim %}">
        {% verbatim %}{%{% endverbatim %} for sub_form in form.{{ field.referentie }} {% verbatim %}%}{% endverbatim %}
            {% verbatim %}{{{% endverbatim %} _self.subform_{{ field.referentie }}(sub_form) {% verbatim %}}}{% endverbatim %}
        {% verbatim %}{%{% endverbatim %} endfor {% verbatim %}%}{% endverbatim %}
        {% verbatim %}{{{% endverbatim %} form_errors(form.{{ field.referentie }}) {% verbatim %}}}{% endverbatim %}
    </div>
</div>
{% else %}
<!-- Field #{{ field.volgorde }} {{ field.titel }} -->
<div class="form-group field__row {% verbatim %}{%{% endverbatim %} if form.{{ field.referentie }}.vars.errors|length > 0 {% verbatim %}%}{% endverbatim %}has-error{% verbatim %}{%{% endverbatim %} endif {% verbatim %}%}{% endverbatim %}">
    {% if field.label %}
    <label for="{% verbatim %}{{{% endverbatim %} form.{{ field.referentie }}.vars.id {% verbatim %}}}{% endverbatim %}" class="col-xs-12 col-sm-4 control-label">{{ field.titel }} {% if field.verplicht %}<sup class="required">*</sup>{% endif %}</label>
    {% endif %}
    <div class="col-xs-12 col-sm-8">
        {% verbatim %}{{{% endverbatim %} form_widget(form.{{ field.referentie }} ,
            { 'attr': { {% if placeholder != null %} {{placeholder|raw}} {% endif %}{% if css_class != null %} {{css_class|raw}} {% endif %}}}) {% verbatim %}}}{% endverbatim %}
        {% verbatim %}{{{% endverbatim %} form_errors(form.{{ field.referentie }}) {% verbatim %}}}{% endverbatim %}
    </div>
</div>
{% endif %}

{% endfor %}

<div class="form-group field__row">
    <div class="col-xs-12 col-sm-8 col-sm-push-4">
        {% verbatim %}{{ form_errors(form) }}{% endverbatim %}
        <button type="submit" class="btn btn-primary">Verstuur</button>
    </div>
</div>

{% verbatim %}{{ form_widget(form.spamcheck) }}{% endverbatim %}
{% verbatim %}{{ form_widget(form.accept) }}{% endverbatim %}
{% verbatim %}{{ form_end(form) }}{% endverbatim %}

<script type="text/javascript">
    (function(document) {

        var form_name = {% verbatim %}{{{% endverbatim %} form.vars.full_name|json_encode|raw {% verbatim %}}}{% endverbatim %};
            form = document.querySelector('form[name="' + form_name + '"]');

        form.addEventListener('submit', function (e) {
            var field_name = {% verbatim %}{{{% endverbatim %} form.spamcheck.vars.full_name|json_encode|raw {% verbatim %}}}{% endverbatim %},
                field = this.querySelector('input[name="' + field_name + '"]');

            field.value = 'NO_SPAM';
        }, false);

    })(document);
</script>

{% if includes_collection %}
    <script type="text/javascript">
    (function($) {
        var form_name = {% verbatim %}{{{% endverbatim %} form.vars.full_name|json_encode|raw {% verbatim %}}}{% endverbatim %};
            form = $('form[name="' + form_name + '"]');

        form.find('.vm-subform-container[data-prototype]').each(function() {
          	var container = $(this),
                prototype = container.attr('data-prototype'),
				add_btn = $('<button type="button" class="btn btn-default">+</button>'),
                index = container.find('.vm-subform-item').length + 1;

          	add_btn.on('click', function () {
            	var $prototype
           		$prototype = $(prototype.replace(/__name__/g, index));
              	$prototype.append('<button type="button" class="btn btn-default vm-subform-del">-</button>');
              	index++;
            	$prototype.insertBefore(add_btn);
        	});

            container.on('click', '.vm-subform-del', function() {
				$(this).parents('.vm-subform-item').first().remove();
            });

          	container.append(add_btn);
        });


    })(jQuery);
    </script>
{% endif %}
