{% macro renderAvailableVariablesWidget(entityName, entityChoiceFieldId) %}
    <script type="text/javascript">
        require(['jquery', 'orotranslation/js/translator', 'oroemail/js/email/variable/view', 'oroemail/js/email/variable/model', 'oroui/js/delete-confirmation'],
        function($, __, View, Model, DeleteConfirmation){
            $(function() {
                'use strict';
                var model, view, entityChoice;

                model = new Model({{ render(path('oro_api_get_emailtemplate_variables'))}});
                model.setEntity({{ entityName|json_encode|raw }}, {{ oro_entity_config_value(entityName, 'label')|trans|json_encode|raw }});

                view = new View({
                    el:                      $('#oro-email-template-variables'),
                    templateSelector:        '#oro-email-template-variables-template',
                    sectionTemplateSelector: '#oro-email-template-variables-{sectionName}-template',
                    sectionContentSelector:  '#oro-email-template-variables-{sectionName}',
                    sectionTabSelector:      '#oro-email-template-variables-{sectionName}-tab',
                    model:                   model
                });

                entityChoice = $('#{{ entityChoiceFieldId }}');
                entityChoice.on('change', function (e) {
                    var $el = $(e.currentTarget),
                        entityName = $el.val(),
                        entityLabel = $el.find(":selected").data('label');
                    if (!view.isEmpty()) {
                        var confirm = new DeleteConfirmation({
                            title: __('Change Entity Confirmation'),
                            okText: __('Yes'),
                            content: __('oro.email.emailtemplate.change_entity_confirmation')
                        });
                        confirm.on('ok', function () {
                            view.clear();
                            model.setEntity(entityName, entityLabel);
                        });
                        confirm.on('cancel', function () {
                            model.setEntity(entityName, entityLabel);
                        });
                        confirm.open();
                    } else {
                        model.setEntity(entityName, entityLabel);
                    }
                });
                view.render();
            });
        });
    </script>

    <script type="text/template" id="oro-email-template-variables-template">
        <div class="emailtemplate-variables oro-tabs tabbable">
            <ul class="nav nav-tabs">
                <li class="active" id="oro-email-template-variables-system-tab">
                    <a href="javascript:void(0);" data-target="#oro-email-template-variables-system" data-toggle="tab">
                        {{ 'oro.email.emailtemplate.variables.system' | trans }}
                    </a>
                </li>
                <li id="oro-email-template-variables-entity-tab">
                    <a href="javascript:void(0);" data-target="#oro-email-template-variables-entity" data-toggle="tab">
                        {{ 'oro.email.emailtemplate.variables.entity' | trans }}
                    </a>
                </li>
            </ul>
            <div class="tab-content">
                <div class="variables tab-pane active" id="oro-email-template-variables-system">
                    <%= variables.system %>
                </div>
                <div class="variables tab-pane" id="oro-email-template-variables-entity">
                </div>
            </div>
        </div>
    </script>
    <script type="text/template" id="oro-email-template-variables-system-template">
        <ul class="nav nav-list">
            <% _.each(variables, function(variable, varName) { %>
            <li>
                <a href="javascript:void(0);"
                   class="variable"
                   title="<%= _.__('oro.email.emailtemplate.variable_title', {'variable_label': variable.label}) %>">{% verbatim %}{{ <%= root %>.<%= varName %> }}{% endverbatim %}</a>
            </li>
            <% }); %>
        </ul>
    </script>
    <script type="text/template" id="oro-email-template-variables-entity-template">
        <% var breadcrumbs = path.split('/'); breadcrumbs[0] = root; %>
        <ul class="breadcrumb">
            <% var breadcrumbPath = ''; %>
            <% for (var i = 0; i < breadcrumbs.length; i++) { %>
            <% breadcrumbPath += '/' + breadcrumbs[i]; %>
            <% breadcrumbItemLabel = (i === 0 ? entityLabel : breadcrumbs[i]); %>
            <li<% if (i === breadcrumbs.length - 1) { %> class="active"<% } %>>
                <% if (i !== breadcrumbs.length - 1) { %>
                <a href="javascript:void(0);"
                   class="reference"
                   data-path="<%= breadcrumbPath.substring(root.length + 1) %>"><%= breadcrumbItemLabel %></a>
                <span class="divider">/&nbsp;</span>
                <% } else { %>
                <%= breadcrumbItemLabel %>
                <% } %>
            </li>
            <% } %>
        </ul>
        <% var varPrefix = path.split('/'); varPrefix[0] = root; varPrefix = varPrefix.join('.'); %>
        <% if (!_.isEmpty(fields) || !_.isEmpty(relations)) { %>
        <ul class="nav groups">
            <% if (!_.isEmpty(fields)) { %>
            <li>
                <div class="group-label"><%= _.__('oro.entity.field_choice.fields') %></div>
                <ul class="nav nav-list">
                    <% _.each(fields, function(variable, varName) { %>
                   <li>
                        <a href="javascript:void(0);"
                           class="variable"
                           title="<%= _.__('oro.email.emailtemplate.variable_title', {'variable_label': variable.label}) %>">{% verbatim %}{{ <%= varPrefix %>.<%= varName %> }}{% endverbatim %}</a>
                    </li>
                    <% }); %>
                </ul>
            </li>
            <% } %>
            <% if (!_.isEmpty(relations)) { %>
            <li>
                <div class="group-label"><%= _.__('oro.entity.field_choice.relations') %></div>
                <ul class="nav nav-list">
                    <% _.each(relations, function(variable, varName) { %>
                    <li>
                        <a href="javascript:void(0);"
                           class="reference"
                           data-path="<%= path + '/' + varName %>"
                           title="<%= _.__('oro.email.emailtemplate.reference_title', {'variable_label': variable.label}) %>">{% verbatim %}{{ <%= varPrefix %>.<%= varName %> }}{% endverbatim %}</a>
                    </li>
                    <% }); %>
                </ul>
            </li>
            <% } %>
        </ul>
        <% } %>
    </script>

    <div id="oro-email-template-variables"></div>
{% endmacro %}

{% macro renderPreviewDialog(formName, title) %}
    <script type="text/javascript">
        require(['jquery', 'underscore', 'orotranslation/js/translator', 'oroui/js/modal'],
        function($, _, __, Modal){
            $(function () {
                var showEmailPreviewDialog = function(el) {
                    var iframeId = 'preview-frame';
                    var iframe = $('<iframe />', {
                        name: iframeId,
                        id: iframeId,
                        'class': "scrollable-container",
                        frameborder: 0,
                        marginwidth: 0,
                        marginheight: 0,
                        allowfullscreen: true,
                        width: '100%',
                        height: '98%'
                    });

                    var form = $('#{{ formName }}');
                    var formAction = form.attr('action');

                    form.one('submit', function(e) {
                        if (!e.result) {
                            return;
                        }

                        var loader;
                        var confirmModal = new Modal({
                            title: __('Preview'),
                            content: '<div class="loading-content">' + __('Loading...') + '</div>',
                            okText: __('Ok'),
                            className: 'modal oro-modal-normal',
                            template: _.template('<% if (title) { %>' +
                                '<div class="modal-header">' +
                                    '<% if (allowCancel) { %>' +
                                    '<a class="close">×</a>' +
                                    '<% } %>' +
                                    '<h3><%- title %></h3>' +
                                '</div>' +
                                '<% } %>' +
                                '<div class="modal-body"><%= content %></div>'
                            )
                        });
                        confirmModal.open();
                        confirmModal.$content.append(iframe);
                        loader = confirmModal.$content.find('.loading-content');

                        loader.show();
                        form.attr('target', iframeId);
                        form.attr('action', $(el).attr('href'));

                        iframe.one('load', function() {
                            loader.hide();
                            form.removeAttr('target');
                            form.attr('action', formAction);
                        });

                        // prevent navigation form processing
                        e.stopImmediatePropagation();
                    });

                    form.submit();
                };

                $('.dialog-form-renderer').click(function (e) {
                    showEmailPreviewDialog(this);
                    e.preventDefault();
                });
            });
        });
    </script>
{% endmacro %}

{#
    Remders email address owner name as text
    Parameters:
        emailAddress - email address entity Oro\Bundle\EmailBundle\Entity\EmailAddress
#}
{% macro email_address_text(emailAddress) -%}
    {{ emailAddress.owner|oro_format_name|default('N/A')|escape }}
{%- endmacro -%}

{#
    Remders email address owner name as link based on owner type
    Parameters:
        emailAddress - email address entity Oro\Bundle\EmailBundle\Entity\EmailAddress
#}
{% macro email_address_link(emailAddress, label) -%}
    {% set label = label|default(_self.email_address_text(emailAddress)) %}
    {#- TODO: we need EntityConfig to get view url for an entity -#}
    <a href="{{ path(emailAddress.owner.class|split('\\')|first|lower ~ '_' ~ emailAddress.owner.class|split('\\')|last|lower ~ '_view', {id:emailAddress.owner.id}) }}">{{ _self.email_address_text(emailAddress) }}</a>
{%- endmacro -%}

{#
    Render email address name, owner name or a link to owner view page can be rendered depends on given parameters
    Parameters:
        emailAddress - email address entity Oro\Bundle\EmailBundle\Entity\EmailAddress
        emailAddressName - a string contains an email address. It is used if the email address has no owner
        noLink - determines whether the rendering of a link to the owner view page is forbidden or not. Default value is false
        knownOnly - if true renders only emails which have an owner; otherwise, all emails. Default value is false
#}
{% macro email_address(emailAddress, emailAddressName, noLink, knownOnly) -%}
    {% if emailAddress.owner is null -%}
        {% if not knownOnly|default(false) -%}
            {{ emailAddressName }}
        {%- endif %}
    {%- else -%}
        {% if noLink|default(false) -%}
            {{ _self.email_address_text(emailAddress) }}
        {%- else -%}
            {{ _self.email_address_link(emailAddress)|raw }}
        {%- endif %}
    {%- endif %}
{%- endmacro %}

{#
    Render email address with title
    Parameters:
        email - EmailInterface object or string
        title (optional) - email title
#}
{%- macro email_address_simple(email, title) -%}
    {% if email is not empty %}
        {% set emailAddress = null %}
        {# if email is an object implemented EmailInterface #}
        {% if email.email is defined %}
            {% if email.email is not empty %}
                {% set emailAddress = email.email %}
            {% endif %}
            {# if email is a string #}
        {% else %}
            {% set emailAddress = email %}
        {% endif %}

        {% if title is empty %}
            {% set title = emailAddress %}
        {% endif %}

        {% if emailAddress %}
            <a href="mailto:{{ emailAddress|e('html_attr') }}" title="{{ title|e('html_attr') }}">{{ title }}</a>
        {% endif %}
    {% endif %}
{%- endmacro -%}

{#
    Render the given email recipients
    Parameters:
        recipients - an array of Oro\Bundle\EmailBundle\Entity\EmailRecipients
        noLink - determines whether the rendering of a link to the owner view page is forbidden or not. Default value is false
        knownOnly - if true renders only emails which have an owner; otherwise, all emails. Default value is false
#}
{% macro recipient_email_addresses(recipients, noLink, knownOnly) -%}
    {% set addresses = {} -%}
    {% for recipient in recipients -%}
        {% set address = _self.email_address(recipient.emailAddress, recipient.name, noLink, knownOnly) %}
        {%- if address|length > 0 -%}
            {% set addresses = addresses|merge([address]) %}
        {% else %}
            {% set addresses = addresses|merge([recipient.emailAddress.email]) %}
        {%- endif %}
    {%- endfor -%}

    {% for address in addresses -%}
        {{ address }}
        {%- if not loop.last %}; {% endif %}
    {% else %}
        {{ 'N/A'|trans }}
    {%- endfor %}
{%- endmacro %}

{#
    Render the given email attachments
    Parameters:
        attachments - an array of Oro\Bundle\EmailBundle\Entity\EmailAttachment
#}
{% macro attachments(attachments) -%}
    {%- for attachment in attachments -%}
    <a class="no-hash" href="{{ path('oro_email_attachment', {id: attachment.id}) }}">
        <span class="label label-info">{{ attachment.fileName }}</span>
    </a>
    {%- endfor -%}
{%- endmacro %}

{#
    Render email body
    Parameters:
        emailBody - email body entity Oro\Bundle\EmailBundle\Entity\EmailBody
        cssClass - used to specify an additional CSS class for email body container HTML element
#}
{% macro body(emailBody, cssClass) -%}
    {% if emailBody.bodyIsText -%}
        <pre class="email-body{% if cssClass is defined %} {{ cssClass }}{% endif %}">{{ emailBody.bodyContent }}</pre>
    {%- else -%}
        <iframe sandbox="" class="email-body{% if cssClass is defined %} {{ cssClass }}{% endif %}" src="{{ path('oro_email_body', {id:emailBody.id}) }}"></iframe>
    {%- endif %}
{%- endmacro %}