{% extends '@OroUI/actions/update.html.twig' %}
{% import '@OroQueryDesigner/macros.html.twig' as QD %}

{% oro_title_set({params : {
    '%entity.name%': entity.entity,
    '%entityName%': 'oro.dotmailer.datafieldmapping.entity_label'|trans }
}) %}
{% set entityId = entity.id %}

{% set formAction = form.vars.value.id ? path('oro_dotmailer_datafield_mapping_update', { 'id': form.vars.value.id }) : path('oro_dotmailer_datafield_mapping_create')  %}
{% block bodyClass %}dotmailer-page{% endblock %}
{% block navButtons %}
    {% import '@OroUI/macros.html.twig' as UI %}

    {% if form.vars.value.id and is_granted('DELETE', form.vars.value) %}
        {{ UI.deleteButton({
            'dataUrl': path('oro_api_delete_dotmailer_datafield_mapping', {'id': form.vars.value.id}),
            'dataRedirect': path('oro_dotmailer_datafield_mapping_index'),
            'aCss': 'no-hash remove-button',
            'dataId': form.vars.value.id,
            'entity_label': 'oro.dotmailer.datafieldmapping.entity_label'|trans
        }) }}

        {{ UI.buttonSeparator() }}
    {% endif %}
    {{ UI.cancelButton(path('oro_dotmailer_datafield_mapping_index')) }}
    {% set html = '' %}
    {% if is_granted('oro_dotmailer_datafield_mapping_create') %}
        {% set html = html ~ UI.saveAndNewButton({
            'route': 'oro_dotmailer_datafield_mapping_create'
        }) %}
    {% endif %}
    {% if form.vars.value.id or is_granted('oro_dotmailer_datafield_mapping_update') %}
        {% set html = html ~ UI.saveAndStayButton({
            'route': 'oro_dotmailer_datafield_mapping_update',
            'params': {'id': '$id'}
        }) %}
    {% endif %}
    {{ UI.dropdownSaveButton({'html': html}) }}
{% endblock navButtons %}

{% block pageHeader %}
    {% if entityId %}
        {% set breadcrumbs = {
            'entity': entity,
            'indexPath': path('oro_dotmailer_datafield_mapping_index'),
            'indexLabel': 'oro.dotmailer.datafieldmapping.entity_plural_label'|trans,
            'entityTitle': 'oro.dotmailer.datafieldmapping.entity_label'|trans
        } %}
        {{ parent() }}
    {% else %}
        {% set title = 'oro.ui.create_entity'|trans({'%entityName%': 'oro.dotmailer.datafieldmapping.entity_label'|trans}) %}
        {% include '@OroUI/page_title_block.html.twig' with { title: title } %}
    {% endif %}
{% endblock pageHeader %}

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

    {% set id = 'dotmailer-datafield-mapping-form' %}
    {% set type = 'oro_dotmailer_datafield_mapping' %}
    {% set dataBlocks = [{
        'title': 'oro.dotmailer.block.general'|trans,
        'subblocks': [{
            'title': '',
            'data': [
                form_row(form.channel),
                form_row(form.entity),
                form_row(form.syncPriority)
            ]
        }]
    }] %}
    {% set dataBlocks =  dataBlocks|merge( [{
        'title': 'oro.dotmailer.block.mapping'|trans,
        'subblocks': [{
            'title': '',
            'data': [
                form_row(form.config_source),
                UI.scrollSubblock(
                    '',
                    [
                        dataFieldMappingUpdate.mapping_form(
                            form.config,
                            {'id': type ~ '-mapping-form'}
                        ),
                        dataFieldMappingUpdate.mapping_list(
                            {
                                'id': type ~ '-mapping-list',
                                'rowId': type ~ '-mapping-row'
                            }
                        ),
                    ],
                    '',
                    '',
                    type ~ '-mappings'
                ),
            ]
        }]
    }] ) %}

    {% set dataBlocks = dataBlocks|merge(oro_form_additional_data(form, 'oro.dotmailer.block.additional'|trans)) %}

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

    {{ QD.query_designer_column_chain_template('column-chain-template') }}
    {{ dataFieldMappingUpdate.initJsWidgets(type, form, entities) }}

    {{ parent() }}
{% endblock content_data %}
{% macro mapping_form(form, attr, params) %}
    {% import '@OroUI/macros.html.twig' as UI %}
    {% set attr = attr|default({})|merge({
        'class': (attr.class|default('') ~ ' dotmailer-mapping-form clearfix')|trim
    }) %}
    <div{{ UI.attributes(attr) }}>
        {{ form_row(form.entityFields, {
            'label': 'oro.dotmailer.datafieldmappingconfig.entity_fields.label',
            'attr': {
                'data-purpose': 'multiple-entityfield-selector',
                'data-validation': { NotBlank: {'message': 'oro.dotmailer.datafieldmappingconfig.validation.entity_field_required'|trans } }|json_encode
            }
        }) }}
        {{ form_row(form.dataField, {
            'label': 'oro.dotmailer.datafieldmappingconfig.data_field.label',
            'attr': {
                'data-purpose': 'datafield-selector',
                'data-validation': { NotBlank: null }|json_encode
            }
        }) }}
        {{ form_row(form.isTwoWaySync, {
            'label': 'oro.dotmailer.datafieldmappingconfig.is_two_way_sync.label',
            'attr': {
                'class': 'two-way-sync-selector',
                'data-purpose': 'two-way-sync-selector'
            }
        }) }}
        <div class="pull-right">
            <div class="btn-group">
                {{ UI.clientButton({
                    'aCss': 'no-hash cancel-button column-form-button',
                    'label' : 'oro.query_designer.form.action.cancel'|trans
                }) }}
            </div>
            <div class="btn-group">
                {{ UI.clientButton({
                    'visible': false,
                    'aCss': 'no-hash btn-success save-button column-form-button',
                    'label' : 'oro.query_designer.form.action.save'|trans
                }) }}
            </div>
            <div class="btn-group">
                {{ UI.clientButton({
                    'visible': false,
                    'aCss': 'no-hash btn-primary add-button column-form-button',
                    'label' : 'oro.query_designer.form.action.add'|trans
                }) }}
            </div>
        </div>
    </div>
{% endmacro %}
{% macro mapping_list(attr) %}
    {% import '@OroUI/macros.html.twig' as UI %}
    {% import _self as dataFieldMappingUpdate %}

    {% set attr = attr|default({})|merge({'class': (attr.class|default('') ~ ' grid-container query-designer-grid-container')|trim}) %}
    <div{{ UI.attributes(attr) }}>
        <table class="grid grid-main-container table-hover table table-bordered table-condensed">
            <thead>
            <tr>
                <th class="entityfield-column"><span>{{ 'oro.dotmailer.datafieldmappingconfig.entity_fields.label'|trans }}</span></th>
                <th class="datafield-column"><span>{{ 'oro.dotmailer.datafieldmappingconfig.data_field.label'|trans }}</span></th>
                <th class="twowaysync-column"><span>{{ 'oro.dotmailer.datafieldmappingconfig.is_two_way_sync.label'|trans }}</span></th>
                <th class="action-column"><span>{{ 'oro.query_designer.datagrid.column.actions'|trans }}</span></th>
            </tr>
            </thead>
            <tbody class="mapping-container">
            </tbody>
        </table>
    </div>
    {{ dataFieldMappingUpdate.mapping_template(attr.rowId) }}
{% endmacro %}
{% macro mapping_template(id) %}
    <script type="text/html" id="{{ id }}">
        <tr data-cid="<%- cid %>">
            <td class="field-cell<% if (obj.deleted) { %> deleted-field<% } %>"><%= entityFields %></td>
            <td class="datafield-cell"><%- dataField %></td>
            <td class="twowaysync-cell"><%= isTwoWaySync %></td>
            <td class="action-cell">
                {% apply spaceless %}
                <a href="#" class="btn btn-icon btn-lighter action no-hash edit-button"
                        title="{{ 'oro.dotmailer.datafieldmappingconfig.update_mapping'|trans }}"
                        role="button"
                        data-collection-action="edit">
                    <span class="fa-edit" aria-hidden="true"></span>
                </a>
                <a href="#" class="btn btn-icon btn-lighter action no-hash delete-button"
                        title="{{ 'oro.dotmailer.datafieldmappingconfig.delete_mapping'|trans }}"
                        role="button"
                        data-collection-action="delete"
                        data-message="{{ 'oro.dotmailer.datafieldmappingconfig.delete_mapping_confirmation'|trans }}">
                    <span class="fa-trash" aria-hidden="true"></span>
                </a>
                {% endapply %}
            </td>
        </tr>
    </script>
{% endmacro %}
{% macro initJsWidgets(type, form, entities) %}
    {% set widgetOptions = {
        dataProviderFilterPreset:   'dotmailer',
        valueSource:                '[data-ftid=' ~ type ~ '_form_config_source]',
        entityChoice:               '[data-ftid=' ~ type ~ '_form_entity]',
        entityChangeConfirmMessage: 'oro.dotmailer.datafieldmapping.change_entity_confirmation',
        mapping: {
            editor:        { namePattern: '^' ~ type ~ '_form\\[config\\]\\[([\\w\\W]*)\\]$' },
            form:          '#' ~ type ~ '-mapping-form',
            itemContainer: '#' ~ type ~ '-mapping-list .mapping-container',
            itemTemplate:  '#' ~ type ~ '-mapping-row'
        },
        channel: {
            channelChoice: '[data-ftid=' ~ type ~ '_form_channel]',
            changeChannelConfirmMessage: 'oro.dotmailer.datafieldmapping.change_channel_confirmation',
        },
        select2FieldChoiceTemplate:     '#column-chain-template',
        select2FieldChoicePlaceholoder: 'oro.dotmailer.datafieldmappingconfig.entityField.placeholder'|trans,
    } %}

    <div data-page-component-module="orodotmailer/js/app/components/mapping-component"
         data-page-component-options="{{ widgetOptions|json_encode }}"></div>
{% endmacro %}