{% extends '@OroUI/actions/update.html.twig' %}
{% form_theme form with ['@OroForm/Form/fields.html.twig'] %}

{% oro_title_set({params : {'%title%': 'oro.dotmailer.integration.connection.label'|trans} }) %}

{% set formAction = path('oro_dotmailer_integration_connection') %}

{% block bodyClass %}dotmailer-page{% endblock %}
{% block navButtons %}{% endblock navButtons %}

{% block pageHeader %}
    {% set title = 'oro.dotmailer.integration.connection.label'|trans %}
    {% include '@OroUI/page_title_block.html.twig' with { title: title } %}
{% endblock pageHeader %}

{% block content_data %}
    {% import '@OroUI/macros.html.twig' as UI %}

    {% set button %}
        {% if entity and entity.transport.clientId and entity.transport.clientKey %}
            {% if loginUserUrl %}
                <div class="control-group">
                    <div class="controls">
                        {{ UI.button({
                            'path':  path('oro_dotmailer_oauth_disconnect', {'id': entity.id}),
                            'aCss':  'btn btn-primary',
                            'label': 'oro.dotmailer.integration.disconnect.label'|trans,
                            'title': 'oro.dotmailer.integration.disconnect.label'|trans,
                        }) }}
                    </div>
                </div>
            {% else %}
                <div class="control-group">
                    <div class="controls">
                        {{ UI.button({
                            'path':  connectUrl,
                            'aCss':  'btn btn-primary',
                            'label': 'oro.dotmailer.integration.connect.label'|trans,
                            'title': 'oro.dotmailer.integration.connect.label'|trans,
                        }) }}
                    </div>
                </div>
            {% endif %}
        {% endif %}
    {% endset %}

    {% set id = 'oro_dotmailer_integration_connection' %}
    {% set dataBlocks = {} %}
    {% if loginUserUrl %}
        {% set dotmailerSection %}
            <input type="hidden" data-focusable="true" /> {# fake input to make sure focus is not set on the bottom form dropdown#}
            <iframe src="{{ loginUserUrl }}" width="100%" height="1650" frameborder="0"></iframe>
        {% endset %}

        {% set dataBlocks = dataBlocks|merge([{
            'title': 'oro.dotmailer.channel_type.label'|trans,
            'subblocks': [{
                'title': '',
                'data': [
                    dotmailerSection
                ]
            }]
        }] ) %}
    {% endif %}

    {% set dataBlocks = dataBlocks|merge([{
            'title': 'oro.dotmailer.integration.choose_connection.label'|trans,
            'subblocks': [{
                'title': '',
                'data': [
                    form_row(form.channel),
                    button
                ]
            }]
    }] ) %}

    {% set data = {
        'formErrors': form_errors(form) ? form_errors(form) : null,
        'dataBlocks': dataBlocks
    } %}

    {% set fieldsToSendOnChannelChange = [form.channel.vars.full_name] %}
    {% if form._token is defined %}
        {% set fieldsToSendOnChannelChange = fieldsToSendOnChannelChange|merge([form._token.vars.full_name]) %}
    {% endif %}
    <script type="text/javascript">
        loadModules(['orodotmailer/js/integration-connection'], function (IntegrationConnection) {
            "use strict";

            $(function () {
                var options = {
                    formSelector: '#{{ form.vars.id }}',
                    channelSelector: '#{{ form.channel.vars.id }}',
                    fieldsSets: {
                        channel: {{ fieldsToSendOnChannelChange|json_encode|raw }}
                    }
                };

                new IntegrationConnection(options);
            });
        });
    </script>

    {{ parent() }}
{% endblock content_data %}