{% import '@OroUI/macros.html.twig' as UI %}
{% if feature_enabled('email') %}
<script type="text/template" id="email-notification-item-template">
    <div class="info" data-id="<%- id %>">
        <div class="body">
            <% if (subject) { %>
                <div class="title nowrap-ellipsis"><%- subject %></div>
            <% } else { %>
                <div class="empty-subject nowrap-ellipsis">({{ 'oro.email.recent_emails_widget.no_subject'|trans }})</div>
            <% } %>
            <div class="description nowrap-ellipsis"><%= bodyContent %></div>
        </div>
        <% if (seen) {  %>
        <i class="mail-icon" title="{{ 'oro.email.datagrid.emails.action.mark_as_unread'|trans }}" data-role="toggle-read-status"></i>
        <% } else { %>
        <i class="mail-icon highlight" title="{{ 'oro.email.datagrid.emails.action.mark_as_read'|trans }}" data-role="toggle-read-status"></i>
        <% } %>
    </div>
    <div class="footer">
        <span class="from-name">
            <% if (linkFromName) { %>
                <a href="<%- linkFromName %>" dir="ltr"><%- fromName %></a>
            <% } else { %>
                <%- fromName %>
            <% } %>
        </span>
        <span class="forward-action-wrapper">
            <span class="forward-action">
                {{- UI.clientLink({
                    'dataUrlRaw': "<%- forwardRoute %>",
                    'aCss': parameters.aCss is defined ? parameters.aCss ~ ' no-hash' : 'no-hash',
                    'label': 'oro.email.forward'|trans,
                    'widget': {
                        'type': 'dialog',
                        'multiple': false,
                        'options': {
                            'alias': 'reply-dialog',
                            'dialogOptions' : {
                                'title' : 'oro.email.forward'|trans,
                                'allowMaximize': true,
                                'allowMinimize': true,
                                'dblclick': 'maximize',
                                'maximizedHeightDecreaseBy': 'minimize-bar',
                                'width': 1000,
                                'minWidth': 'expanded'
                            }
                        }
                    }
                }) -}}
            </span>
            <span class="reply-action">
                {{- UI.clientLink({
                    'dataUrlRaw': "<%- replyRoute %>",
                    'aCss': parameters.aCss is defined ? parameters.aCss ~ ' no-hash' : 'no-hash',
                    'label': 'oro.email.reply'|trans,
                    'widget': {
                        'type': 'dialog',
                        'multiple': false,
                        'options': {
                            'alias': 'reply-dialog',
                            'dialogOptions' : {
                                'title' : 'oro.email.reply_all'|trans,
                                'allowMaximize': true,
                                'allowMinimize': true,
                                'dblclick': 'maximize',
                                'maximizedHeightDecreaseBy': 'minimize-bar',
                                'width': 1000,
                                'minWidth': 'expanded'
                            }
                        }
                    }
                }) -}}
            </span>
            <span class="reply-all-action">
                {{- UI.clientLink({
                    'dataUrlRaw': "<%- replyAllRoute %>",
                    'aCss': parameters.aCss is defined ? parameters.aCss ~ ' no-hash' : 'no-hash',
                    'label': 'oro.email.reply_all'|trans,
                    'widget': {
                        'type': 'dialog',
                        'multiple': false,
                        'options': {
                            'alias': 'reply-dialog',
                            'dialogOptions' : {
                                'title' : 'oro.email.reply'|trans,
                                'allowMaximize': true,
                                'allowMinimize': true,
                                'dblclick': 'maximize',
                                'maximizedHeightDecreaseBy': 'minimize-bar',
                                'width': 1000,
                                'minWidth': 'expanded'
                            }
                        }
                    }
                }) -}}
            </span>
        </span>
    </div>
</script>

{% if oro_config_value('oro_email.show_recent_emails_in_user_bar') %}
<li class="email-notification-menu dropdown" title="{{ 'oro.email.notification.menu_item.hint'|trans }}"
    {{ UI.renderPageComponentAttributes({
        module: 'oroemail/js/app/components/user-menu-email-notification-component',
        options: {
            listSelector: '.dropdown-menu',
            iconSelector: '.email-notification-icon',
            emails: emails,
            count: count,
            hasMarkAllButton: true,
            wsChannel: oro_get_email_ws_event()
        }
    }) }}>
    {% if isDesktopVersion() %}
    {% set togglerId = 'dropdown-'|uniqid %}
    <a href="#" role="button" id="{{ togglerId }}" data-toggle="dropdown"
       class="dropdown-toggle dropdown-toggle--no-caret email-notification-icon"
       title="{{ 'oro.email.menu.user_emails'|trans }}"
       aria-label="{{ 'oro.email.menu.user_emails'|trans }}" aria-haspopup="true" aria-expanded="false"></a>
    <div class="dropdown-menu dropdown-menu-right" aria-labelledby="{{ togglerId }}" tabindex="0"></div>
    <div class="new-email-notification" {{ UI.renderPageComponentAttributes({
        module: 'oroemail/js/app/components/new-email-message-component'
    }) }}> {{ 'oro.email.notification.new_email'|trans }}</div>
    {% endif %}
</li>
{% else %}
    <li class="hide" {{ UI.renderPageComponentAttributes({
        module: 'oroemail/js/app/components/new-email-flash-message-component'
    }) }}></li>
{% endif %}

{% endif %}