{% macro form_field_widget(form_field_form) %}
    <div class="panel panel-default js-form-field">

        <div class="panel-heading">


            <a class="panel-title collapsed" data-toggle="collapse" data-parent="#velden_accordion" href="#veld{{ form_field_form.vars.id }}Collapse">
                {{ 'form_field.field'|trans({}, 'forms') }} #<span data-source="#{{ form_field_form.volgorde.vars.id }}"></span> "<span data-source="#{{ form_field_form.titel.vars.id }}"></span> / <span data-source="#{{ form_field_form.type.vars.id }}"></span>"
                <i class="icon-arrow-up"></i>
                <i class="icon-arrow-down"></i>
            </a>

            <a href="" class="js-form-field-del pull-right" data-confirm="{{ 'form_field.delete.confirm'|trans({}, 'forms') }}"><i class="icon-trash"></i></a>

        </div>
        <div class="panel-body collapsable collapse {% if form_field_form.titel.vars.value is empty %}in{% endif %}" id="veld{{ form_field_form.vars.id }}Collapse">
            {{ form_row(form_field_form.volgorde, { attr : { class : 'js-form-field-volgorde' } } ) }}
            <div class="row">
                <div class="col-sm-6">
                    {{ form_row(form_field_form.titel, { label_attr : { class : 'col-xs-12 control-label' }, container_cls : 'col-xs-12' } ) }}
                    {{ form_row(form_field_form.referentie, { label_attr : { class : 'col-xs-12 control-label' }, container_cls : 'col-xs-12' } ) }}
                    {{ form_row(form_field_form.type, { label_attr : { class : 'col-xs-12 control-label' }, container_cls : 'col-xs-12' } ) }}
                    {{ form_row(form_field_form.css_class, { label_attr : { class : 'col-xs-12 control-label' }, container_cls : 'col-xs-12' } ) }}

                </div>
                <div class="col-sm-6">
                    <div class="row">
                        <div class="col-sm-6">
                            {{ form_row(form_field_form.verplicht, { label_attr : { class : 'col-xs-12 control-label' }, container_cls : 'col-xs-12' } ) }}
                            {{ form_row(form_field_form.label, { label_attr : { class : 'col-xs-12 control-label' }, container_cls : 'col-xs-12' } ) }}
                        </div>
                        <div class="col-sm-6">
                            {{ form_row(form_field_form.rijen, { label_attr : { class : 'col-xs-12 control-label' }, container_cls : 'col-xs-12' } ) }}
                        </div>
                    </div>
                    {{ form_row(form_field_form.regex, { label_attr : { class : 'col-xs-12 control-label' }, container_cls : 'col-xs-12' } ) }}
                    {{ form_row(form_field_form.waarden, { label_attr : { class : 'col-xs-12 control-label' }, container_cls : 'col-xs-12' } ) }}
                </div>
            </div>
        </div>
    </div>
{% endmacro %}
