{% if is_granted('EDIT', entity) %}
    {% set channels = oro_zendesk_enabled_two_way_sync_channels() %}
    {% set firstChannel = channels|first %}
    {% set togglerId = 'dropdown-'|uniqid %}
    <div class="btn-group zendesk-integration-btn-group">
        <a class="zendesk-integration-btn btn icons-holder-text no-hash"
           href="#"
           role="button"
           data-channel-id="{{ firstChannel.id }}"
        >
           <span class="fa-upload  hide-text" aria-hidden="true"></span>{{ "oro.zendesk.form.sync_to_zendesk.label"|trans }}
        </a>
        <a href="#" role="button" id="{{ togglerId }}" class="btn dropdown-toggle" data-toggle="dropdown"
           aria-haspopup="true" aria-expanded="false" aria-label="{{ 'oro.zendesk.form.sync_to_zendesk.label'|trans }}">
           <span class="sr-only">{{ 'oro.zendesk.form.sync_to_zendesk.label'|trans }}</span>
       </a>
        <ul class="dropdown-menu" role="menu" aria-labelledby="{{ togglerId }}">
            {% for channel in channels %}
                <li>
                    <a href="#"
                       role="menuitem"
                       class="zendesk-integration-btn icons-holder-text no-hash"
                       data-channel-id="{{ channel.id }}">
                        {{ channel.name }}
                    </a>
                </li>
            {% endfor %}
        </ul>
    </div>
    <script type="text/javascript">
        loadModules(['jquery', 'routing', 'oroui/js/mediator', 'oroui/js/messenger', 'orotranslation/js/translator'],
            function ($, routing, mediator, messenger, __) {
                $('.zendesk-integration-btn').bind('click', function(event) {
                    event.preventDefault();

                    var id = $(this).data('channel-id');
                    var url = routing.generate('oro_api_post_ticket_sync_case', {id: '{{ entity.id }}', channelId: id});

                    mediator.execute('showLoading');
                    $.post({
                        url: url,
                        errorHandlerMessage: __('oro.zendesk.reverse_sync.fail_message')
                    }).done(function(res, status, jqXHR) {
                        mediator.once('page:afterChange', function(){
                            messenger.notificationFlashMessage('success', __('oro.zendesk.reverse_sync.success_message'));
                        });
                        mediator.execute('refreshPage', {restore: true});
                    }).always(function () {
                        mediator.execute('hideLoading');
                    });

                    return false;
                });
            });
    </script>
{% endif %}