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

{% block mauticContent 'dynamicContent' %}

{% block headerTitle entity.name %}

{% block publishStatus %}
    {{- include('@MauticCore/Helper/publishstatus_badge.html.twig', {
        'entity': entity,
        'status': 'available'
    }) -}}

    {% set tags = [
        {
            color: 'warm-gray',
            label: entity.isCampaignBased
                ? 'mautic.dwc.form.is.campaign'
                : 'mautic.dwc.form.is.standalone'
        }
    ] %}

    {% set tags = tags
        |merge(entity.isTranslation and not entity.isTranslation(true)
            ? [{ color: 'warm-gray', label: 'mautic.core.icon_tooltip.translation' }]
            : [])
        |merge(entity.isTranslation(true)
            ? [{ color: 'warm-gray', label: 'mautic.core.translation_of'|trans({'%parent%' : translations.parent.getName()}), icon: 'ri-translate' }]
            : [])
    %}

    {% include '@MauticCore/Helper/_tag.html.twig' with { tags: tags } %}
{% endblock %}

{% block indexButton %}
{{- include('@MauticCore/Helper/page_actions.html.twig',
    {
        'item'            : entity,
        'templateButtons' : {
            'close' : securityHasEntityAccess(permissions['dynamiccontent:dynamiccontents:viewown'], permissions['dynamiccontent:dynamiccontents:viewother'], entity.createdBy),
        },
        'routeBase'       : 'dynamicContent',
        'targetLabel'     : 'mautic.dynamicContent.dynamicContents'|trans
    }
) -}}
{% endblock %}

{% block actions %}
    {{- include('@MauticCore/Helper/page_actions.html.twig', {
        'item': entity,
        'customButtons': customButtons|default([]),
        'templateButtons': {
            'edit': securityHasEntityAccess(permissions['dynamiccontent:dynamiccontents:editown'], permissions['dynamiccontent:dynamiccontents:editother'], entity.createdBy),
            'clone': permissions['dynamiccontent:dynamiccontents:create'],
            'delete': securityHasEntityAccess(permissions['dynamiccontent:dynamiccontents:deleteown'], permissions['dynamiccontent:dynamiccontents:deleteother'], entity.createdBy),
        },
        'routeBase': 'dynamicContent',
    }) -}}
{% endblock %}

{% block content %}
  {%- set translationContent = include('@MauticCore/Translation/index.html.twig', {
          'activeEntity': entity,
          'translations': translations,
          'model': 'dynamicContent',
          'actionRoute': 'mautic_dynamicContent_action',
  })|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 -->
                {% set description %}
                    {% if entity.isVariant(true) %}
                        <div class="small">
                            <a href="{{ path('mautic_dynamicContent_action', {'objectAction': 'view', 'objectId': variants.parent.id}) }}" data-toggle="ajax">
                                {{ 'mautic.core.variant_of'|trans({'%parent%': variants.parent.name}) }}
                            </a>
                        </div>
                    {% endif %}
                    {% if entity.isTranslation(true) %}
                        <div class="small">
                            <a href="{{ path('mautic_dynamicContent_action', {'objectAction': 'view', 'objectId': translations.parent.id}) }}" data-toggle="ajax">
                                {{ 'mautic.core.translation_of'|trans({'%parent%': translations.parent.name}) }}
                            </a>
                        </div>
                    {% endif %}
                    {% if not entity.isCampaignBased %}
                        <div class="small">
                            {{ 'mautic.dynamicContent.header.is_filter_based'|trans({'%slot%': entity.slotName}) }}
                        </div>
                    {% endif %}
                {% endset %}

                {% include '@MauticCore/Helper/description.html.twig' with { 'description': description } %}
              <!--/ 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': entity}) }}
                              <tr>
                                  <td width="20%"><span class="fw-b textTitle">{{ 'mautic.dynamicContent.slot.campaign'|trans }}</span></td>
                                  <td>{{ entity.isCampaignBased ? 'Yes' : 'No' }}</td>
                              </tr>
                              {% if not entity.isCampaignBased %}
                                <tr>
                                    <td width="20%"><span class="fw-b textTitle">{{ 'mautic.dynamicContent.label.slot_name'|trans }}</span></td>
                                    <td>{{ entity.slotName }}</td>
                                </tr>
                              {% endif %}
                              </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="ri-line-chart-fill"></span>
                                          {{ 'mautic.dynamicContent.views'|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': entityViews, '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">
                  <li class="active">
                      <a href="#clicks-container" role="tab" data-toggle="tab">
                          {{ 'mautic.trackable.click_counts'|trans }}
                      </a>
                  </li>
                  {% if showTranslations %}
                  <li class>
                      <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 active bdr-w-0" id="clicks-container">
                  {{ include('@MauticPage/Trackable/click_counts.html.twig', {'trackables': trackables, 'entity': entity, 'channel': 'dynamicContent'}) }}

              </div>
              <!-- #translation-container -->
              {% if showTranslations %}
                  <div class="tab-pane bdr-w-0" id="translation-container">
                      {{ translationContent|raw }}
                  </div>
              {% endif %}
              <!--/ #translation-container -->
          </div>
          <!-- end: tab-content -->
      </div>
      <!--/ left section -->

      <!-- right section -->
      <div class="col-md-3 bdr-l height-auto">
          <hr class="hr-w-2" style="width:50%">
          <!-- recent activity -->
          {{ include('@MauticCore/Helper/recentactivity.html.twig', {'logs': logs}) }}
      </div>
      <!--/ right section -->
  </div>

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