{#
  Variables
    - activePage (\Mautic\PageBundle\Entity\Page)
    - variants
    - translations
    - permissions
    - stats
    - abTestResults
    - security
    - pageUrl
    - previewUrl
    - logs
    - dateRangeForm

  @todo - add landing page stats/analytics
#}
{# Only show A/B test button if not already a translation of an a/b test #}
{% set allowAbTest = (activePage.isPreferenceCenter or (activePage.isTranslation(true) and translations.parent.isVariant)) ? false : true %}

{% extends '@MauticCore/Default/content.html.twig' %}

{% block mauticContent %}page{% endblock %}

{% block preHeader %}
{{ include('@MauticCore/Helper/page_actions.html.twig', {
    'item': activePage,
    'customButtons': customButtons|default([]),
    'templateButtons': {
        'close': securityHasEntityAccess( permissions['page:pages:viewown'], permissions['page:pages:viewother'], activePage.createdBy),
    },
    'routeBase': 'page',
    'targetLabel': 'mautic.page.pages'|trans
}) }}
{{ include('@MauticCore/Modules/category--inline.html.twig', {'category': activePage.category}) }}
{{ include('@MauticProject/Modules/projects.html.twig', {'item': activePage}) }}
{% endblock %}

{% block headerTitle %}{{ activePage.title }}{% endblock %}

{% block actions %}
    {{ include('@MauticCore/Helper/page_actions.html.twig', {
            'item': activePage,
            'customButtons': customButtons|default([]),
            'templateButtons': {
                'edit': securityHasEntityAccess(permissions['page:pages:editown'], permissions['page:pages:editother'], activePage.createdBy),
                'abtest': allowAbTest and permissions['page:pages:create'],
                'clone': permissions['page:pages:create'],
                'delete': securityHasEntityAccess(permissions['page:pages:deleteown'], permissions['page:pages:deleteown'], activePage.createdBy),
            },
            'routeBase': 'page',
    }) }}
{% endblock %}

{% block publishStatus %}
    {{- include('@MauticCore/Helper/publishstatus_badge.html.twig', {
        'entity': activePage,
        'status': 'available'
    }) -}}
    <div class="label__divider"></div>

    {% set blueTags = [] %}
    {% set grayTags = [] %}

    {% if activePage.isPreferenceCenter %}
        {% set blueTags = blueTags|merge([{ type: 'read-only', color: 'blue', icon_only: true, label: 'mautic.email.form.preference_center', icon: 'ri-equalizer-2-fill' }]) %}
    {% endif %}

    {% if activePage.isTranslation and not activePage.isTranslation(true) %}
        {% set blueTags = blueTags|merge([{ color: 'blue', label: 'mautic.core.icon_tooltip.translation', icon: 'ri-translate', icon_only: true }]) %}
    {% endif %}

    {% if activePage.noIndex is defined and activePage.noIndex == 1 %}
        {% set blueTags = blueTags|merge([{ label: 'mautic.core.tag.search_index.disabled'|trans, icon: 'ri-eye-off-fill', color: 'blue', icon_only: true }]) %}
    {% endif %}

    {% if activePage.isVariant and not activePage.isVariant(true) %}
        {% set grayTags = grayTags|merge([{ type: 'read-only', color: 'warm-gray', label: 'mautic.email.icon_tooltip.abtest' }]) %}
    {% endif %}

    {% if activePage.isVariant(true) %}
        {% set grayTags = grayTags|merge([{ color: 'warm-gray', label: 'mautic.core.variant_of'|trans({'%parent%' : variants.parent.getName()}), icon: 'ri-organization-chart' }]) %}
    {% endif %}

    {% if activePage.isTranslation(true) %}
        {% set grayTags = grayTags|merge([{ 
            color: 'warm-gray', 
            label: 'mautic.core.translation_of'|trans({'%parent%' : translations.parent.getName()}), 
            icon: 'ri-translate',
            attributes: {
                'href': path('mautic_page_action', {'objectAction': 'view', 'objectId': translations.parent.id})
            }
        }]) %}
    {% endif %}

    {% if activePage.language is defined and activePage.language is not empty %}
        {% set grayTags = grayTags|merge([{ label: activePage.language|language_name, icon: 'ri-translate-2', color: 'warm-gray', attributes: { 'data-toggle': 'tooltip', 'data-placement': 'top', 'title': 'mautic.core.language'|trans } }]) %}
    {% endif %}

    {% include '@MauticCore/Helper/_tag.html.twig' with { tags: blueTags|merge(grayTags) } %}

{% endblock %}

{% block content %}
  {% set variantContent = include('@MauticCore/Variant/index.html.twig', {
          'activeEntity': activePage,
          'variants': variants,
          'abTestResults': abTestResults,
          'model': 'page',
          'actionRoute': 'mautic_page_action',
          'nameGetter': 'getTitle',
  })|trim %}
  {% set showVariants = variantContent is not empty %}

  {% set translationContent = include('@MauticCore/Translation/index.html.twig', {
          'activeEntity': activePage,
          'translations': translations,
          'model': 'page',
          'actionRoute': 'mautic_page_action',
          'nameGetter': 'getTitle',
  })|trim %}
  {% set showTranslations = translationContent is not empty %}

  <!-- start: box layout -->
  <div class="box-layout">
      <!-- left section -->
      <div class="col-md-9 height-auto">
          <div>
              <!-- page detail header -->
                {% include '@MauticCore/Helper/description--expanded.html.twig' with {
                    'description': activePage.metaDescription
                } %}
              <!--/ page detail header -->

              <!-- page detail collapseable -->
              <div class="collapse pr-md pl-md" id="page-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': activePage}, with_context=false) }}
                              </tbody>
                          </table>
                      </div>
                  </div>
              </div>
              <!--/ page detail collapseable -->
          </div>

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

              <!-- some stats -->
              <div class="pa-md">
                  <div class="row">
                      <div class="col-sm-12">
                          <div class="panel">
                              <div class="panel-body box-layout">
                                  <div class="col-md-3 va-m">
                                      <h5 class="text-white dark-md fw-sb mb-xs">
                                          <span class="ri-line-chart-fill"></span>
                                          {{ 'mautic.page.pageviews'|trans }}
                                      </h5>
                                  </div>
                                  <div class="col-md-9 va-m">
                                      {{ include('@MauticCore/Helper/graph_dateselect.html.twig', {'dateRangeForm': dateRangeForm, 'class': 'pull-right'}) }}
                                  </div>
                              </div>
                              <div class="d-flex fd-column pt-0 pl-15 pb-15 pr-15 min-h-256">
                                  {{ include('@MauticCore/Helper/chart.html.twig', {'chartData': stats.pageviews, 'chartType': 'line', 'chartHeight': 300}) }}
                              </div>
                          </div>
                      </div>
                  </div>
              </div>
              <!--/ stats -->

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

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

          {% if showVariants or showTranslations %}
          <!-- start: tab-content -->
          <div class="tab-content pa-md">
              {% if showVariants %}
              <!-- #variants-container -->
              <div class="tab-pane active bdr-w-0" id="variants-container">
                  {{ variantContent|raw }}
              </div>
              <!--/ #variants-container -->
              {% endif %}
              <!-- #translation-container -->
              {% if showTranslations %}
              <div class="tab-pane {% if not showVariants %}active{% endif %} bdr-w-0" id="translation-container">
                  {{ translationContent|raw }}
              </div>
              {% endif %}
              <!--/ #translation-container -->
          </div>
          <!--/ end: tab-content -->
          {% endif %}
          
          {% set additionalCards = [{
              heading: 'mautic.page.results.view',
              copy: (not showVariants and not showTranslations) ? 'mautic.page.results.view.description' : null,
              pictogram: 'data--set',
              href: path('mautic_page_results', {'objectId': activePage.id}),
              attributes: {
                  'data-toggle': 'ajax',
                  'data-menu-link': 'mautic_form_index'
              }
          }] %}
          
          {{ include('@MauticCore/Modules/suggested-actions.html.twig', {
              'entity': activePage,
              'routeBase': 'page',
              'showVariants': showVariants,
              'showTranslations': showTranslations,
              'allowAbTest': allowAbTest,
              'additionalCards': additionalCards
          }) }}
      </div>
      <!--/ left section -->

      <!-- right section -->
      <div class="col-md-3 bdr-l height-auto">
          <!-- preview URL -->
          {% if not activePage.isPreferenceCenter %}
          <div class="panel shd-none bdr-rds-0 bdr-w-0 mt-sm mb-0">
              <div class="panel-body pt-xs">
                  {% include '@MauticCore/Components/card.html.twig' with {
                      type: 'link',
                      href: pageUrl,
                      ctaType: 'new tab',
                      heading: 'mautic.core.open_link',
                      attributes: {
                          'target': '_blank'
                      }
                  } %}
              </div>
          </div>
          {% endif %}
          <div class="panel shd-none bdr-rds-0 bdr-w-0 mt-sm mb-0">
              <div class="panel-heading">
                  <div class="panel-title">{{ 'mautic.page.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.page.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'  : activePage,
                                      'model' : 'page',
                                      'query' : 'customToggle=publicPreview'
                                  }) -}}
                              </div>
                              <input id="content_preview_url"
                                     data-route="page/preview"
                                     onclick="this.setSelectionRange(0, this.value.length);"
                                     type="text"
                                     class="form-control"
                                     readonly
                                     value="{{ previewUrl|e }}"/>
                              <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',
                                            onclick: 'window.open("' ~ previewUrl ~ '", "_blank");',
                                            attributes: {
                                                'id': 'content_preview_url_button',
                                                'class': 'btn-nospin'
                                            }
                                        }
                                    ]
                                } %}
                              </span>
                              <input type="hidden" id="content_preview_settings_object_id" value="{{ activePage.id }}">
                              <input type="hidden" id="content_preview_settings_contact_id" value="">
                          </div>
                      </div>
                  </div>
              </div>
          </div>
          {% if 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">
                          <input onclick="this.setSelectionRange(0, this.value.length);" type="text" class="form-control"
                                 readonly
                                 value="{{ draftPreviewUrl|e }}"/>
                          <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 %}
          <!--/ preview URL -->
          <hr class="hr-w-2" style="width:50%">
          <!-- recent activity -->
          {{ include('@MauticCore/Helper/recentactivity.html.twig', {'logs': logs}, with_context=false) }}
      </div>
      <!--/ right section -->
  </div>

  <!--/ end: box layout -->
{% endblock %}