{#
  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 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),
                'close': securityHasEntityAccess( permissions['page:pages:viewown'], permissions['page:pages:viewother'], activePage.createdBy),
            },
            'routeBase': 'page',
    }) }}
{% endblock %}

{% block publishStatus %}{{ include('@MauticCore/Helper/publishstatus_badge.html.twig', {'entity': activePage}) }}{% 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 -->
              <div class="pr-md pl-md pt-lg pb-lg">
                  <div class="box-layout">
                      <div class="col-xs-10">
                          <div class="text-muted">{{ activePage.metaDescription }}</div>
                          {% if activePage.isVariant(true) %}
                              <div class="small">
                                  <a href="{{ path('mautic_page_action', {'objectAction': 'view', 'objectId': variants.parent.id}) }}" data-toggle="ajax">
                                      {{- 'mautic.core.variant_of'|trans({'%parent%': variants.parent.getName()}) -}}
                                  </a>
                              </div>
                          {% endif %}
                          {% if activePage.isTranslation(true) %}
                          <div class="small">
                              <a href="{{ path('mautic_page_action', {'objectAction': 'view', 'objectId': translations.parent.id}) }}" data-toggle="ajax">
                                  {{- 'mautic.core.translation_of'|trans({'%parent%': translations.parent.getName()}) -}}
                              </a>
                          </div>
                          {% endif %}
                          {% if activePage.isPreferenceCenter %}
                              <div class="small">
                                  {{ 'mautic.core.icon_tooltip.preference_center'|trans }}
                              </div>
                          {% endif %}
                      </div>
                  </div>
              </div>
              <!--/ page detail header -->

              <!-- page detail collapseable -->
              <div class="collapse" 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-muted 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="fa fa-line-chart"></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="pt-0 pl-15 pb-10 pr-15">
                                  {{ 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 pr-md pl-md">
                  {% 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 -->
          {% elseif allowAbTest %}
          <div class="pa-md">
              <div class="text-center" style="height: 100%; width: 100%; ">
                  <h3 style="padding: 30px;">
                      <a class="create-abtest-link" href="{{ path('mautic_page_action', {'objectAction': 'abtest', 'objectId': activePage.id}) }}" data-toggle="ajax">
                          {{ 'mautic.core.ab_test.create'|trans }} <i class="fa fa-angle-right"></i>
                      </a>
                  </h3>
              </div>
          </div>
          {% endif %}
      </div>
      <!--/ left section -->

      <!-- right section -->
      <div class="col-md-3 bdr-l height-auto">
          <!-- preview URL -->
          {% if not activePage.isPreferenceCenter %}
          <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.page.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="{{ pageUrl|e }}"/>
                      <span class="input-group-btn">
                          <button class="btn btn-default btn-nospin" onclick="window.open('{{ pageUrl }}', '_blank');">
                              <i class="ri-external-link-line"></i>
                          </button>
                      </span>
                  </div>
              </div>
          </div>
          {% endif %}
          <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.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.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">
                              <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">
                                  <button id="content_preview_url_button"
                                          class="btn btn-default btn-nospin"
                                          onclick="window.open('{{ previewUrl }}', '_blank');">
                                      <i class="ri-external-link-line"></i>
                                  </button>
                              </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>
          <!--/ 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 %}