{% extends isEmbedded ? '@MauticCore/Default/raw_output.html.twig' : '@MauticCore/Default/content.html.twig' %}

{% block headerTitle email.name %}

{% block mauticContent 'email' %}

{% block preHeader %}
    {% if not isEmbedded %}
        {{- include('@MauticCore/Helper/page_actions.html.twig', {
            'item'            : email,
            'templateButtons' : {
                'close' : securityHasEntityAccess(
                    permissions['email:emails:viewown'],
                    permissions['email:emails:viewother'],
                    email.getCreatedBy()
                ),
            },
            'routeBase'     : 'email',
            'targetLabel': 'mautic.email.emails'|trans,
            'customButtons' : []
        }) -}}
    {% endif %}
    {{ include('@MauticCore/Modules/category--inline.html.twig', {'category': email.category}) }}
    {{ include('@MauticProject/Modules/projects.html.twig', {'item': email}) }}
{% endblock %}

{% set variantContent = include('@MauticCore/Variant/index.html.twig', {
        'activeEntity': email,
        'variants': variants,
        'abTestResults': abTestResults,
        'model': 'email',
        'actionRoute': 'mautic_email_action',
}) %}

{% set showVariants = variantContent is defined and variantContent|trim is not empty %}

{% set translationContent = include('@MauticCore/Translation/index.html.twig',
    {
        'activeEntity'      : email,
        'translations'      : translations,
        'model'             : 'email',
        'actionRoute'       : 'mautic_email_action',
    }
) %}

{% set showTranslations = translationContent|trim is not empty %}
{% set emailType = email.emailType %}

{% if emailType is not defined %}
    {% set emailType = 'template' %}
{% endif %}
{% set customButtons = [] %}

{% if not isEmbedded %}
    {% if 'list' == emailType %}
        {% set sendButton = {
            'attr'      : {
                'data-toggle' : 'ajax',
                'href'        : email.isBackgroundSending() ? 'javascript:void(0);' : path('mautic_email_action', {'objectAction' : 'send', 'objectId' : email.getId()}),
            },
            'iconClass' : 'ri-send-plane-line',
            'btnText'   : 'mautic.email.send',
            'primary'   : true,
            'priority'  : 500,
        } %}
        {% if email.isBackgroundSending() %}
            {% set sendButton = sendButton|merge({'tooltip' : 'mautic.email.send.disabled'}) %}
            {% set sendButton = sendButton|merge({'attr' : {'disabled' : true}}) %}
        {% endif %}

        {% set customButtons = customButtons|merge([sendButton]) %}
    {% endif %}
    {% set sendButtons = [] %}
    {% if 'list' == emailType %}
        {% set scheduleButton = {
            'attr': {
                'class'       : 'btn btn-tertiary btn-nospin',
                'data-toggle': 'ajaxmodal',
                'data-target': '#MauticSharedModal',
                'href': path('mautic_email_action', {'objectAction': 'scheduleSend', 'objectId': email.getId()}),
                'data-header': 'mautic.email.send.schedule'|trans
            },
            'iconClass': 'ri-calendar-schedule-line',
            'btnText': 'mautic.email.send.schedule',
            'primary': true,
            'priority': 400
        } %}
        {% set customButtons = customButtons|merge([scheduleButton]) %}
    {% endif %}
    {% set sendExampleButton = {
        'attr' : {
            'id'          : 'sendEmailButton',
            'class'       : 'btn btn-tertiary btn-nospin',
            'data-toggle' : 'ajaxmodal',
            'data-target' : '#MauticSharedModal',
            'href'        : path('mautic_email_action', {'objectAction' : 'sendExample', 'objectId' : email.getId()}),
            'data-header' : 'mautic.email.send.example'|trans,
        },
        'iconClass' : 'ri-mail-send-line',
        'btnText'   : 'mautic.email.send.example',
        'primary'   : true,
        'priority': 300
    } %}
    {% set customButtons = customButtons|merge([sendExampleButton]) %}
    {% set heatmapButton = {
        'attr' : {
            'class'       : 'btn btn-tertiary btn-nospin',
            'data-toggle' : 'email-heatmap',
            'data-email'  : email.getId(),
            'data-target' : '#MauticSharedModal',
            'href'        : '#',
            'data-header' : 'mautic.email.heatmap.click_heatmap'|trans,
        },
        'iconClass' : 'ri-fire-line',
        'btnText'   : 'mautic.email.heatmap.click_heatmap'
    } %}
    {% set customButtons = customButtons|merge([heatmapButton]) %}
{% endif %}

{# Only show A/B test button if not already a translation of an a/b test #}
{% set allowAbTest = email.isTranslation(true) and translations['parent'].isVariant(true) ? false : true %}

{% block publishStatus %}
    {% if not isEmbedded %}
    {{- include('@MauticCore/Helper/publishstatus_badge.html.twig', {
        'entity': email,
        'status': email.getPublishUp() is not null ? 'sending' : 'available',
        'sendingStatus': email.getSendingStatus(),
    }) -}}
    <div class="label__divider"></div>

        {% include '@MauticCore/Helper/_tag.html.twig' with { tags: [
            {
                color: 'high-contrast',
                label: emailType == 'list'
                    ? 'mautic.email.type.list.header'
                    : (emailType == 'template' ? 'mautic.email.type.template.header' : type)
            }
        ] } %}

        {% if email.isVariant and not email.isVariant(true) %}
            {% include '@MauticCore/Helper/_tag.html.twig' with { tags: [
                { color: 'blue', label: 'mautic.email.icon_tooltip.abtest', icon: 'ri-a-b', icon_only: true }
            ] } %}
        {% endif %}
        {% if email.isVariant(true) %}
            {% include '@MauticCore/Helper/_tag.html.twig' with { tags: [
                {
                    color: 'warm-gray',
                    label: 'mautic.core.variant_of'|trans({'%parent%' : variants.parent.getName()}),
                    icon: 'ri-organization-chart',
                    attributes: {
                        href: path('mautic_email_action', {'objectAction' : 'view', 'objectId' : variants.parent.id})
                    }
                }
            ] } %}
        {% endif %}

        {% if email.isTranslation and not email.isTranslation(true) %}
            {% include '@MauticCore/Helper/_tag.html.twig' with { tags: [
                { color: 'blue', label: 'mautic.core.icon_tooltip.translation', icon: 'ri-translate', icon_only: true }
            ] } %}
        {% endif %}
        {% if email.isTranslation(true) %}
            {% include '@MauticCore/Helper/_tag.html.twig' with { tags: [
                {
                    color: 'warm-gray',
                    label: 'mautic.core.translation_of'|trans({'%parent%' : translations.parent.name}),
                    icon: 'ri-translate',
                    attributes: {
                        href: path('mautic_email_action', {'objectAction' : 'view', 'objectId' : translations.parent.id})
                    }
                }
            ] } %}
        {% endif %}
        {# Language #}
        {% if email.language is defined and email.language is not empty %}
            {% include '@MauticCore/Helper/_tag.html.twig' with {
                tags: [{
                    label: email.language|language_name,
                    icon: 'ri-translate-2',
                    color: 'warm-gray',
                    attributes: {
                        'data-toggle': 'tooltip',
                        'data-placement': 'top',
                        'title': 'mautic.core.language'|trans
                    }
                }]
            } %}
        {% endif %}

    {% endif %}
{% endblock %}

{% block actions %}
    {% if not isEmbedded %}
        {{- include('@MauticCore/Helper/page_actions.html.twig', {
            'item'            : email,
            'templateButtons' : {
                'edit' : securityHasEntityAccess(
                    permissions['email:emails:editown'],
                    permissions['email:emails:editother'],
                    email.getCreatedBy(),
                ),
                'clone'  : permissions['email:emails:create'],
                'abtest' : (allowAbTest and permissions['email:emails:create']),
                'delete' : securityHasEntityAccess(
                    permissions['email:emails:deleteown'],
                    permissions['email:emails:deleteother'],
                    email.getCreatedBy()
                ),
            },
            'routeBase'     : 'email',
            'customButtons' : customButtons,
        }) -}}
    {% endif %}
{% endblock %}

{% block content %}
  <!-- start: box layout -->
  <div class="box-layout">
      <!-- left section -->
      <div class="col-md-9 height-auto">
          <div>
              <!-- email detail header -->
              <div class="pr-md pl-md pt-lg pb-lg">
                  <div class="box-layout">
                      <div class="col-xs-10">
                          <div>{{ email.subject }}</div>
                          <div class="text-secondary">{{ emailPreview }}</div>
                      </div>
                  </div>
              </div>
              <!--/ email detail header -->

              <!-- email detail collapseable -->
              <div class="collapse pr-md pl-md" id="email-details">
                  <div class="pr-md pl-md pb-md">
                      <div class="panel shd-none mb-0">
                          <table class="table table-hover mb-0">
                              <tbody>
                              {{- include('@MauticCore/Helper/details.html.twig', {'entity': email}) -}}
                              <tr>
                                  <td width="20%">
                                      <span class="fw-b">{{ 'mautic.core.form.theme'|trans }}</span>
                                  </td>
                                  <td>{{ email.template }}</td>
                              </tr>
                              {% if email.fromName %}
                                  <tr>
                                      <td width="20%">
                                          <span class="fw-b">{{ 'mautic.email.from_name'|trans }}</span>
                                      </td>
                                      <td>{{ email.fromName }}</td>
                                  </tr>
                              {% endif %}
                              {% if email.fromAddress %}
                                  <tr>
                                      <td width="20%">
                                          <span class="fw-b">{{ 'mautic.email.from_email'|trans }}</span>
                                      </td>
                                      <td>{{ email.fromAddress }}</td>
                                  </tr>
                              {% endif %}
                              {% if email.replyToAddress %}
                                  <tr>
                                      <td width="20%">
                                          <span class="fw-b">{{ 'mautic.email.reply_to_email'|trans }}</span>
                                      </td>
                                      <td>{{ email.replyToAddress }}</td>
                                  </tr>
                              {% endif %}
                              {% if email.bccAddress %}
                                  <tr>
                                      <td width="20%">
                                          <span class="fw-b">{{ 'mautic.email.bcc'|trans }}</span>
                                      </td>
                                      <td>{{ email.bccAddress }}</td>
                                  </tr>
                              {% endif %}
                              {% if email.getPreheaderText() %}
                                <tr>
                                    <td width="20%">
                                        <span class="fw-b">{{ 'mautic.email.preheader_text'|trans }}</span>
                                    </td>
                                    <td>{{ email.getPreheaderText() }}</td>
                                </tr>
                              {% endif %}
                              {% if email.headers %}
                                  <tr>
                                      <td width="20%">
                                          <span class="fw-b">{{ 'mautic.email.custom_headers'|trans }}</span>
                                      </td>
                                      <td>{{ email.headers|formatter_simple_array_to_html }}</td>
                                  </tr>
                              {% endif %}
                              <tr>
                                  <td width="20%">
                                      <span class="fw-b" data-toggle="tooltip" data-placement="right" title="{{ 'mautic.email.stat.sent.details'|trans }}">{{ 'mautic.email.stat.sent'|trans }} <i class="ri-question-line"></i></span>
                                  </td>
                                  <td>{{ email.sentCount }}</td>
                              </tr>
                              <tr>
                                  <td width="20%">
                                      <span class="fw-b">{{ 'mautic.email.stat.delivered'|trans }}</span>
                                  </td>
                                  <td data-email-stat-delivered-for="{{ email.id }}"><div class="spinner"><i class="ri-loader-3-line ri-spin"></i></div></td>
                              </tr>
                              <tr>
                                  <td width="20%">
                                      <span class="fw-b">{{ 'mautic.email.stat.read'|trans }}</span>
                                  </td>
                                  <td>{{ email.readCount }}</td>
                              </tr>
                              </tbody>
                          </table>
                      </div>
                  </div>
              </div>
              <!--/ email detail collapseable -->
          </div>

          <div>
              <!-- email detail collapseable toggler -->
              <div class="hr-expand nm">
                <span data-toggle="tooltip" title="{{ 'mautic.core.details'|trans }}">
                    <a href="javascript:void(0)" class="arrow text-secondary collapsed" data-toggle="collapse" data-target="#email-details">
                      <span class="caret"></span> {{ 'mautic.core.details'|trans }}
                    </a>
                </span>
              </div>
              <!--/ email detail collapseable toggler -->

              {% set isVariant = showTranslations or showVariants ?: 0 %}
              {% set dateFrom = dateRangeForm.children['date_from'].vars['data'] %}
              {% set dateTo = dateRangeForm.children['date_to'].vars['data'] %}

              <!-- some stats -->
              <div class="pt-15 pl-15 pr-15">
                  <div class="row">
                      <div class="col-sm-12">
                        {% if securityIsGranted('lead:leads:viewown') %}
                            {{ include('@MauticCore/Modules/stat--icon.html.twig', {'stats': [
                                {
                                    'title': 'mautic.email.stat.sent',
                                    'value': email.getSentCount(true),
                                    'tooltip': 'mautic.email.stat.sent.details',
                                    'link': path('mautic_contact_index', {'search': ('mautic.lead.lead.searchcommand.email_sent'|trans) ~ ':' ~ email.getId()}),
                                    'icon': 'ri-mail-unread-line'
                                },
                                {
                                    'title': 'mautic.email.stat.read',
                                    'value': email.getReadCount(true),
                                    'desc': email.getReadPercentage(true) ~ '%',
                                    'tooltip': 'mautic.email.stat.read.tooltip',
                                    'link': path('mautic_contact_index', {'search': ('mautic.lead.lead.searchcommand.email_read'|trans) ~ ':' ~ email.getId()}),
                                    'icon': 'ri-mail-open-line'
                                },
                                {
                                    'title': 'mautic.email.stat.queued',
                                    'value': email.getQueuedCount(),
                                    'tooltip': 'mautic.email.stat.queued.tooltip',
                                    'link': path('mautic_contact_index', {'search': ('mautic.lead.lead.searchcommand.email_queued'|trans) ~ ':' ~ email.getId()}),
                                    'icon': 'ri-mail-send-line'
                                },
                                {
                                    'title': 'mautic.email.stat.pending',
                                    'value': email.getPendingCount(),
                                    'tooltip': 'mautic.email.stat.leadcount.tooltip',
                                    'link': path('mautic_contact_index', {'search': ('mautic.lead.lead.searchcommand.email_pending'|trans) ~ ':' ~ email.getId()}),
                                    'icon': 'ri-more-fill'
                                }
                            ]}) }}
                        {% endif %}
                      </div>
                  </div>
              </div>
              <!--/ stats -->

              <div class="stats-menu pl-md mt-lg">
                  <!-- tabs controls -->
                  <ul class="nav nav-tabs nav-tabs-contained">
                      <li class="active">
                          <a href="#stats-container" role="tab" data-toggle="tab">
                              {{ 'mautic.email.thead.stats'|trans }}
                          </a>
                      </li>
                      <li>
                          <a href="#reads-map-container" role="tab" data-toggle="tab" data-load="map">
                              {{ 'mautic.email.thead.maps'|trans }}
                          </a>
                      </li>
                  </ul>
                  <!--/ tabs controls -->

                  <div class="date-range">
                      {{ include('@MauticCore/Helper/graph_dateselect.html.twig', {
                          'dateRangeForm': dateRangeForm,
                      }) }}
                  </div>
              </div>

              <div class="stats-menu__content tab-content pa-md mb-lg shd-sm">
                  <div class="tab-pane active bdr-w-0" id="stats-container">
                      <div id="emailGraphStats"
                           data-graph-url="{{ path('mautic_email_graph_stats', {'objectId' : email.id, 'isVariant' : isVariant, 'dateFrom' : dateFrom|date('Y-m-d'), 'dateTo' : dateTo|date('Y-m-d')}) }}"
                      >
                          <div class="spinner">
                              <i class="ri-loader-3-line ri-spin"></i>
                          </div>
                      </div>

                  </div>
                  <div class="tab-pane bdr-w-0" id="reads-map-container"
                       data-map-url="{{ path('mautic_email_map_stats', {'objectId' : email.id, 'isVariant' : isVariant, 'dateFrom' : dateFrom|date('Y-m-d'), 'dateTo' : dateTo|date('Y-m-d')}) }}"
                  >
                      <div class="spinner">
                          <i class="ri-loader-3-line ri-spin"></i>
                      </div>
                  </div>
              </div>

              {{ customContent('details.stats.graph.below', _context) }}

              <!-- tabs controls -->
              <ul class="nav nav-tabs nav-tabs-contained">
                  <li class="active">
                      <a href="#clicks-container" role="tab" data-toggle="tab">
                          {{ 'mautic.trackable.click_counts'|trans }}
                      </a>
                  </li>
                  <li>
                      <a href="#contacts-container" role="tab" data-toggle="tab">
                          {{ 'mautic.email.associated.contacts'|trans }}
                      </a>
                  </li>
                  {% if showVariants %}
                      <li>
                          <a href="#variants-container" role="tab" data-toggle="tab">
                              {{ 'mautic.core.variants'|trans }}
                          </a>
                      </li>
                  {% endif %}
                  {% if showTranslations %}
                      <li>
                          <a href="#translation-container" role="tab" data-toggle="tab">
                              {{ 'mautic.core.translations'|trans }}
                          </a>
                      </li>
                  {% endif %}
              </ul>
              <!--/ tabs controls -->
          </div>

          <!-- start: tab-content -->
          <div class="tab-content pa-md">
              <div class="tab-pane active bdr-w-0" id="clicks-container">
                  {{- include('@MauticPage/Trackable/click_counts.html.twig', {
                      'trackables'  : trackables,
                      'entity'      : email,
                      'channel'     : 'email',
                  }) -}}
              </div>

              <div class="tab-pane bdr-w-0 page-list" id="contacts-container">
                  {{ contacts | raw }}
              </div>

              {% if showVariants %}
                  <!-- #variants-container -->
                  <div class="tab-pane bdr-w-0" id="variants-container">
                      {{ variantContent|raw }}
                  </div>
                  <!--/ #variants-container -->
              {% endif %}

              <!-- #translation-container -->
              {% if showTranslations %}
                  <div class="tab-pane bdr-w-0" id="translation-container">
                      {{ translationContent|raw }}
                  </div>
              {% endif %}
              <!--/ #translation-container -->
          </div>
          {{ include('@MauticCore/Modules/suggested-actions.html.twig', {
              'entity': email,
              'routeBase': 'email',
              'showVariants': showVariants,
              'showTranslations': showTranslations,
              'allowAbTest': allowAbTest
          }) }}
      </div>
      <!--/ left section -->

      <!-- right section -->
      <div class="col-md-3 bdr-l height-auto">
          <!-- preview URL -->
          <div class="panel shd-none bdr-rds-0 bdr-w-0 mt-sm mb-0">
              <div class="panel-heading">
                  <div class="panel-title">{{ 'mautic.email.preview.url'|trans }}</div>
              </div>
              <div class="panel-body pt-xs">
                  {% if previewSettingsForm.translation is defined %}
                  <div class="row">
                      <div class="form-group col-xs-12 ">
                          <div class="control-label">{{ 'mautic.email.preview.show.translation'|trans }}</div>
                          {{ form_widget(previewSettingsForm.translation) }}
                      </div>
                  </div>
                  {% endif %}
                  {% if previewSettingsForm.variant is defined %}
                  <div class="row">
                      <div class="form-group col-xs-12 ">
                          <div class="control-label">{{ 'mautic.email.preview.show.ab.variant'|trans }}</div>
                          {{ form_widget(previewSettingsForm.variant) }}
                      </div>
                  </div>
                  {% endif %}
                  {% if previewSettingsForm.contact is defined %}
                      <div class="row">
                          <div class="form-group col-xs-12 ">
                              <div class="control-label">{{ 'mautic.email.preview.show.contact'|trans }}</div>
                              {{ form_widget(previewSettingsForm.contact) }}
                          </div>
                      </div>
                  {% endif %}
                  <div class="row">
                      <div class="form-group col-xs-12 ">
                          <div class="input-group">
                              <div class="input-group-addon">
                                  {{- include('@MauticCore/Helper/publishstatus_icon.html.twig', {
                                      'item'  : email,
                                      'model' : 'email',
                                      'query' : 'customToggle=publicPreview'
                                  }) -}}
                              </div>
                              <input id="content_preview_url" data-route="email/preview" onclick="this.setSelectionRange(0, this.value.length);" type="text" class="form-control" readonly value="{{ previewUrl|escape }}"/>
                              <span class="input-group-btn">
                                {% include '@MauticCore/Helper/button.html.twig' with {
                                    buttons: [
                                        {
                                            label: 'mautic.core.open_link',
                                            variant: 'ghost',
                                            icon_only: true,
                                            icon: 'ri-external-link-line',
                                            attributes: {
                                                'id': 'content_preview_url_button',
                                                'type': 'button'
                                            },
                                            onclick: 'window.open("' ~ previewUrl ~ '", "_blank");'
                                        }
                                    ]
                                } %}
                          </span>
                              <input type="hidden" id="content_preview_settings_object_id" value="{{ email.id }}">
                              <input type="hidden" id="content_preview_settings_contact_id" value="">
                          </div>
                      </div>
                  </div>
              </div>
          </div>

          <!-- Draft preview URL -->
          {% if draftPreviewUrl is defined and draftPreviewUrl is not empty %}
          <div class="panel bg-transparent shd-none bdr-rds-0 bdr-w-0 mt-sm mb-0">
              <div class="panel-heading">
                  <div class="panel-title">{{ 'mautic.email.draft.preview.url'|trans }}</div>
              </div>
              <div class="panel-body pt-xs">
                  <div class="input-group">
                      <div class="input-group-addon">
                          {{- include('@MauticCore/Helper/publishstatus_icon.html.twig', {
                              'item'  : email.getDraft(),
                              'model' : 'email.email_draft',
                              'query' : 'customToggle=publicPreview'
                          }) -}}
                      </div>
                      <input onclick="this.setSelectionRange(0, this.value.length);" type="text" class="form-control"
                             readonly
                             value="{{ draftPreviewUrl|escape }}"/>
                      <span class="input-group-btn">
                        <button class="btn btn-default btn-nospin" onclick="window.open('{{ draftPreviewUrl }}', '_blank');">
                            <i class="fa fa-external-link"></i>
                        </button>
                    </span>
                  </div>
              </div>
          </div>
          {% endif %}

          <!-- email usages -->
          <div class="panel shd-none bdr-rds-0 bdr-w-0 mt-sm mb-0" data-fetch-email-usages="{{ email.id }}">
              <div class="panel-heading">
                  <div class="panel-title">{{ 'mautic.email.usages'|trans }}</div>
              </div>
              <div class="panel-body pt-xs">
                  <i class="ri-loader-3-line ri-spin"></i>
              </div>
          </div>

          <!-- activity feed -->
          {{- include('@MauticCore/Helper/recentactivity.html.twig', {'logs': logs}) -}}
      </div>
      <!-- right section -->
      <input name="entityId" id="entityId" type="hidden" value="{{ email.id|escape }}"/>
  </div>
{% endblock %}