{% import 'VisualMFormBundle:ManageFormField:form.html.twig' as _form_field_form %}

{{ form_start(form_form, { attr : { class : 'form-horizontal vm-change-tracking form-html5-validation js-form-serialize' } }) }}

<section class="extra content-padding">
    <nav class="tabs">
        <ul>
            {% block form_tabs %}
                {% block form_tab_algemeen %}<li class="active"><a href="#algemeen" data-toggle="tab">{{ 'form.algemeen'|trans({}, 'forms') }}</a></li>{% endblock %}
                {% block form_tab_email %}<li><a href="#email" data-toggle="tab">{{ 'form.email'|trans({}, 'forms') }}</a></li>{% endblock %}
                {% block form_tab_velden %}<li><a href="#velden" data-toggle="tab">{{ 'form.fields'|trans({}, 'forms') }}</a></li>{% endblock %}
                {% block form_tab_form_html %}<li><a href="#form_html" data-toggle="tab">{{ 'form.form_html'|trans({}, 'forms') }}</a></li>{% endblock %}
                {% block form_tab_email_html %}<li><a href="#email_html" data-toggle="tab">{{ 'form.email_html'|trans({}, 'forms') }}</a></li>{% endblock %}
                {% block form_tab_kopie_email_html %}<li><a href="#kopie_email_html" data-toggle="tab">{{ 'form.kopie_email_html'|trans({}, 'forms') }}</a></li>{% endblock %}
                {% endblock %}
        </ul>
    </nav>
</section>

<section class="content-padding">

    {{ block_position('flashmessages') }}
    {{ form_errors(form_form) }}

    <div class="tab-content">

        {% block form_tab_content %}

            {% block form_algemeen %}
                <div id="algemeen" class="tab-pane active">

                    <div class="row">

                        <div class="col-xs-12 col-lg-6">
                            {{ form_row(form_form.titel) }}
                            {{ form_row(form_form.referentie, { help : 'form.referentie_help'|trans({}, 'forms') }) }}

                            <div class="spacer"></div>

                            {{ form_row(form_form.redirectPath, { help : 'form.redirect_path_help'|trans({}, 'forms') }) }}
                        </div>

                        <div class="col-xs-12 col-lg-6">
                            <p class="alert bg-natural">
                                {{ 'form.control_tip_html'|trans({}, 'forms')|raw }}
                            </p>
                        </div>

                    </div>

                </div>
            {% endblock %}

            {% block form_email %}
                <div id="email" class="tab-pane">

                    <div class="row">

                        <div class="col-xs-12 col-lg-6">

                            {{ form_row(form_form.emailOnderwerp, { help : 'form.email_onderwerp_help'|trans({}, 'forms') }) }}

                            <div class="spacer"></div>

                            {{ form_row(form_form.ontvangerEmail, { help : 'form.ontvanger_email_help'|trans({}, 'forms') }) }}
                            {{ form_row(form_form.ontvangerNaam, { help : 'form.ontvanger_naam_help'|trans({}, 'forms') }) }}
                            {{ form_row(form_form.bccEmail, { help : 'form.bcc_email_help'|trans({}, 'forms') }) }}

                            <div class="spacer"></div>

                            {{ form_row(form_form.afzenderEmail, { help : 'form.afzender_email_help'|trans({}, 'forms') }) }}
                            {{ form_row(form_form.afzenderNaam, { help : 'form.afzender_naam_help'|trans({}, 'forms') }) }}

                            <div class="spacer"></div>

                            {{ form_row(form_form.kopieNaarAfzender) }}
                            {{ form_row(form_form.kopieEmailOnderwerp, { help : 'form.kopie_email_onderwerp_help'|trans({}, 'forms') }) }}

                        </div>


                        <div class="col-xs-12 col-lg-6">
                            <p class="alert bg-natural">
                                {{ 'form.control_tip_html'|trans({}, 'forms')|raw }}
                            </p>
                        </div>

                    </div>

                </div>
            {% endblock %}

            {% block form_velden %}
                <div id="velden" class="tab-pane">
                    <div id="velden_accordion" class="js-form-field-container max-width" data-prototype="{{ _form_field_form.form_field_widget(form_form.fields.vars.prototype) | e }}">
                        {% for form_field_form in form_form.fields %}
                            {{ _form_field_form.form_field_widget(form_field_form) }}
                            {{ form_errors(form_field_form) }}
                        {% endfor %}
                        {{ form_errors(form_form.fields) }}
                        {% do form_form.fields.setRendered %}
                    </div>
                    <button type="button" class="btn btn-link js-form-field-add"><i class="icon icon-plus"></i> Veld toevoegen</button>
                </div>
            {% endblock %}

            {% block form_form_html %}
                <div id="form_html" class="tab-pane">
                    <div class="form-group clearfix {% if form_form.formHtml.vars.errors|length > 0 %}has-error{% endif %}">

                        <button
                            type="button"
                            class="btn btn-link"
                            data-url="{{ path('manage_form_render_template', { type : 'form' }) }}"
                            data-confirm="{{ 'form.generate_html.confirm'|trans({}, 'forms') }}"
                            data-target="{{ form_form.formHtml.vars.id }}"
                        ><i class="icon-gear"></i> {{ 'form.generate_html.label'|trans({}, 'forms') }}</button>

                        <div class="spacer spacer-small"></div>

                        {{ form_widget(form_form.formHtml, { attr : { class : 'codemirror', 'data-mode' : 'twig' } }) }}
                        {{ form_errors(form_form.formHtml) }}

                    </div>
                </div>
            {% endblock %}

            {% block form_email_html %}
                <div id="email_html" class="tab-pane">
                    <div class="form-group row clearfix {% if form_form.emailHtml.vars.errors|length > 0 %}has-error{% endif %}">
                        <div class="col-xs-12">
                            <button
                                type="button"
                                class="btn btn-link"
                                data-url="{{ path('manage_form_render_template', { type : 'email' }) }}"
                                data-confirm="{{ 'form.generate_html.confirm'|trans({}, 'forms') }}"
                                data-target="{{ form_form.emailHtml.vars.id }}"
                            ><i class="icon-gear"></i> {{ 'form.generate_html.label'|trans({}, 'forms') }}</button>

                            <div class="spacer spacer-small"></div>

                            {{ form_widget(form_form.emailHtml, { attr : { class : 'codemirror', 'data-mode' : 'twig' } }) }}
                            {{ form_errors(form_form.emailHtml) }}


                        </div>
                    </div>
                </div>
            {% endblock %}

            {% block form_kopie_email_html %}
                <div id="kopie_email_html" class="tab-pane">
                    <div class="form-group row clearfix {% if form_form.kopieEmailHtml.vars.errors|length > 0 %}has-error{% endif %}">
                        <div class="col-xs-12">
                            <button
                                type="button"
                                class="btn btn-link"
                                data-url="{{ path('manage_form_render_template', { type : 'email' }) }}"
                                data-confirm="{{ 'form.generate_html.confirm'|trans({}, 'forms') }}"
                                data-target="{{ form_form.kopieEmailHtml.vars.id }}"
                            ><i class="icon-gear"></i> {{ 'form.generate_html.label'|trans({}, 'forms') }}</button>

                            <div class="spacer spacer-small"></div>

                            {{ form_widget(form_form.kopieEmailHtml, { attr : { class : 'codemirror', 'data-mode' : 'twig' } }) }}
                            {{ form_errors(form_form.kopieEmailHtml) }}


                        </div>
                    </div>
                </div>
            {% endblock %}

        {% endblock form_tab_content %}

    </div>
</section>

<div class="form-actions hide">
    <div class="actions-group">
        {% if form.Id is not null %}
            {% if is_granted('ROLE_PERM_DELETE_FORM') %}
                <a href="{{ path('manage_form_delete', { id : form.Id }) }}" data-confirm="{{ 'form.action.delete.confirm'|trans({}, 'backend') }}" data-method="POST" class="btn btn-default" title="{{ 'form.action.delete.title'|trans({}, 'backend') }}"><i class="icon-trash"></i></a>
                {% endif %}
            {% endif %}
    </div>
    <section class="actions-group">
        {{ form_widget(form_form.save, { attr: { class : 'btn btn-default'} }) }}
    </section>
    <section class="actions-group">
        {{ form_widget(form_form.saveAndClose, { attr: { class : 'btn btn-primary' } }) }}
    </section>
</div>

{{ form_end(form_form) }}

<link rel="stylesheet" href="{{ asset('bundles/visualmform/codemirror-4.5/lib/codemirror.css') }}" />
<link rel="stylesheet" href="{{ asset('bundles/visualmform/codemirror-4.5/theme/monokai.css') }}" />
<link rel="stylesheet" href="{{ asset('bundles/visualmform/js/jquery-ui-custom/jquery-ui.min.css') }}" />
<link rel="stylesheet" href="{{ asset('bundles/visualmform/js/jquery-ui-custom/jquery-ui.structure.css') }}" />

{% set js %}
    <script type="text/javascript" src="{{ asset('bundles/visualmform/codemirror-4.5/lib/codemirror.js') }}"></script>
    <script type="text/javascript" src="{{ asset('bundles/visualmform/codemirror-4.5/mode/css/css.js') }}"></script>
    <script type="text/javascript" src="{{ asset('bundles/visualmform/codemirror-4.5/addon/mode/multiplex.js') }}"></script>
    <script type="text/javascript" src="{{ asset('bundles/visualmform/codemirror-4.5/mode/javascript/javascript.js') }}"></script>
    <script type="text/javascript" src="{{ asset('bundles/visualmform/codemirror-4.5/mode/xml/xml.js') }}"></script>
    <script type="text/javascript" src="{{ asset('bundles/visualmform/codemirror-4.5/mode/htmlmixed/htmlmixed.js') }}"></script>
    <script type="text/javascript" src="{{ asset('bundles/visualmform/codemirror-4.5/mode/htmlembedded/htmlembedded.js') }}"></script>    
    <script type="text/javascript" src="{{ asset('bundles/visualmform/codemirror-4.5/mode/jinja2/jinja2.js') }}"></script>
    <script type="text/javascript" src="{{ asset('bundles/visualmform/js/jquery-ui-custom/jquery-ui.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('bundles/visualmform/js/form/addedit.js') }}"></script>
{% endset %}
{{ append_javascript(js, 'visualm_form_form') }}

