{#
  Variables
    - form
    - isVariant
    - tokens
    - activePage
    - themes
    - slots
    - sections
    - builderAssets
    - sectionForm
    - permissions
    - previewUrl (optional)
    - security (optional)
      - Defined when editing page
#}
{% form_theme form with [
    '@MauticPage/FormTheme/Page/_page_abtest_settings_properties_row.html.twig',
    '@MauticPage/FormTheme/Page/_page_variantSettings_properties_row.html.twig',
] %}
{% set isExisting = activePage.id %}
{% set variantParent = activePage.variantParent %}
{% set previewUrl = previewUrl|default('') %}

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

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

{% block headerTitle %}
  {%- if isExisting -%}
    {{ 'mautic.page.header.edit'|trans({'%name%': activePage.title}) }}
  {%- else -%}
    {{ 'mautic.page.header.new'|trans }}
  {%- endif -%}
  {% if variantParent %}
      <div><span class="small">{{ 'mautic.core.variant_of'|trans({'%name%': activePage.title, '%parent%': variantParent.title}) }}</span></div>
  {% elseif activePage.isVariant(false) %}
      <div><span class="small">{{ 'mautic.page.form.has_variants'|trans }}</span></div>
  {%- endif -%}
{% endblock %}

{% block content %}
  <div id="grapesjsbuilder_assets" class="hide" data-assets="{{ url('grapesjsbuilder_assets') }}" data-upload="{{ url('grapesjsbuilder_upload') }}" data-delete="{{ url('grapesjsbuilder_delete') }}"></div>

  {% set template, attr = form.template.vars.data, form.vars.attr %}
  {% set attr = attr|merge({
          'data-submit-callback-async': 'clearThemeHtmlBeforeSave',
  }) %}

  {{ form_start(form, {'attr': attr}) }}
  <!-- start: box layout -->
  <div class="box-layout">
      <!-- container -->
      <div class="col-md-9 bg-white height-auto">
          <div class="row">
              <div class="col-xs-12">
                  <!-- tabs controls -->
                  <ul class="bg-auto nav nav-tabs pr-md pl-md">
                      <li class="active">
                          <a href="#theme-container" role="tab" data-toggle="tab">{{ 'mautic.core.form.theme'|trans }}</a>
                      </li>
                      <li id="advanced-tab" class="hidden">
                          <a href="#advanced-container" role="tab" data-toggle="tab">{{ 'mautic.core.advanced'|trans }}</a>
                      </li>
                  </ul>
                  <!--/ tabs controls -->

                  <div class="tab-content pa-md">
                      <div class="tab-pane fade in active bdr-w-0" id="theme-container">
                          <div class="row">
                              <div class="col-md-12">
                                  {{ form_row(form.template) }}
                              </div>
                          </div>
                          {{ include('@MauticCore/Helper/theme_select.html.twig', {
                              'type': 'page',
                              'themes': themes,
                              'active': form.template.vars.value,
                          }, with_context=false) }}
                      </div>

                      <div class="tab-pane fade bdr-w-0" id="advanced-container">
                          <br>
                          <div class="row hidden" id="custom-html-row">
                              <div class="col-md-12">
                                  {{ form_label(form.customHtml) }}
                                  {{ form_widget(form.customHtml) }}
                              </div>
                          </div>
                      </div>
                  </div>
              </div>
          </div>
      </div>
      <div class="col-md-3 bg-white height-auto bdr-l">
          <div class="pr-lg pl-lg pt-md pb-md">
              {{ form_row(form.title) }}
              {% if isVariant %}
                  
                  {{ form_row(form.variantSettings) }}
              {% else %}
                  {{ form_row(form.alias) }}
                  {{ form_row(form.category) }}
                  {{ form_row(form.language) }}
                  {{ form_row(form.translationParent) }}
              {% endif %}

              {{ form_row(form.isPublished) }}

              {% if (permissions['page:preference_center:editown'] or permissions['page:preference_center:editother']) and not activePage.isVariant %}
                  {{ form_row(form.isPreferenceCenter) }}
              {% endif %}

              {{ form_row(form.publishUp) }}
              {{ form_row(form.publishDown) }}

              {% if not isVariant %}
                  {{ form_row(form.redirectType) }}
                  {{ form_row(form.redirectUrl) }}
              {% endif %}

              {{ form_row(form.noIndex) }}
              <div class="template-fields {% if not template %}hide{% endif %}">
                  {{ form_row(form.metaDescription) }}
              </div>
              <div class="template-fields {% if not template %}hide{% endif %}">
                  {{ form_row(form.headScript) }}
              </div>
              <div class="template-fields {% if not template %}hide{% endif %}">
                  {{ form_row(form.footerScript) }}
              </div>
              <div class="hide">
                  {{ form_rest(form) }}
              </div>
          </div>
      </div>
  </div>
  {{ form_end(form) }}

  {{ include('@MauticCore/Helper/builder.html.twig', {
      'type': 'page',
      'isCodeMode': ('mautic_code_mode' is same as activePage.template),
      'sectionForm': sectionForm,
      'builderAssets': builderAssets,
      'slots': slots,
      'sections': sections,
      'objectId': activePage.sessionId,
      'previewUrl': previewUrl,
  }, with_context=false) }}
{% endblock %}
