{% import '@OroDataGrid/macros.html.twig' as dataGrid %}
<div class="widget-content">
    {% set gridName = oro_datagrid_build_fullname('entity-relation-grid', entity_name ~ '-' ~  field_name) %}

    {% set gridParams = {
        '_parameters' : {
            'data_in': app.request.get('added') ? app.request.get('added')|split(',') : [],
            'data_not_in': app.request.get('removed') ? app.request.get('removed')|split(',') : []
        },
        'class_name': entity_class,
        'field_name': field_name,
        'id': id
    } %}

    {% block content %}
        {{ dataGrid.renderGrid(gridName, gridParams) }}
        <input type="hidden" name="appendRelation" id="appendRelation" value="{{ app.request.get('added') }}" />
        <input type="hidden" name="removeRelation" id="removeRelation" value="{{ app.request.get('removed') }}" />
    {% endblock %}

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

    {% set extraData = [] %}
    {% for fieldName in relation.get('target_grid') %}
        {% set extraData = extraData|merge([{
            'label': entity_provider.getConfig(relation.get('target_entity'), fieldName).get('label')|trans,
            'value': fieldName
        }]) %}
    {% endfor %}

    <div {{ UI.renderPageComponentAttributes({
        module: 'oroform/js/multiple-entity/component',
        options: {
            wid: app.request.get('_wid'),
            gridName: gridName,
            addedVal: '#appendRelation',
            removedVal: '#removeRelation',
            columnName: 'assigned',
            fieldTitles: relation.get('target_title'),
            entityName: entity_class|replace({'\\':'_'}),
            fieldName: field_name,
            extraData: extraData,
            link: 'oro_entity_detailed'
        }
    }) }}></div>

    <div class="widget-actions">
        <button type="reset" class="btn">{{ 'Cancel'|trans }}</button>
        <button type="button" class="btn btn-primary" data-action-name="select">{{ 'Select'|trans }}</button>
    </div>
</div>