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

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

{% block headerTitle %}{{ campaign.name }}{% endblock %}

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

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

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

            <!-- campaign detail collapseable -->
            <div class="collapse pr-md pl-md" id="campaign-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': campaign}) }}
                            {% for sourceType, typeNames in sources %}
                              {% if typeNames is not empty %}
                                <tr>
                                    <td width="20%"><span class="fw-b textTitle">
                                      {{ ('mautic.campaign.leadsource.'~sourceType)|trans }}
                                    </td>
                                    <td>
                                        {{ typeNames|join(', ') }}
                                    </td>
                                </tr>
                              {% endif %}
                            {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <!--/ campaign detail collapseable -->
        </div>

        <div>
            <!-- campaign 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="#campaign-details"><span
                            class="caret"></span> {{ 'mautic.core.details'|trans }}</a>
                </span>
            </div>
            <!--/ campaign detail collapseable toggler -->

            {{ customContent('left.section.top', _context) }}
            {% set dateFrom = dateRangeForm.children['date_from'].vars['data'] %}
            {% set dateTo = dateRangeForm.children['date_to'].vars['data'] %}
            <!-- some 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.campaign.stats'|trans }}
                        </a>
                    </li>
                    {%  if showEmailStats|default(false) %}
                        <li>
                            <a href="#campaign-email-stats" role="tab" data-toggle="tab" data-load="campaign-email-stats">
                                {{ 'mautic.campaign.email_stats'|trans }}
                            </a>
                        </li>
                    {% endif %}
                    <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">
                        {{- include('@MauticCore/Helper/chart.html.twig', {
                            'chartData': stats,
                            'chartType': 'line',
                            'chartHeight': 300
                        }) -}}
                    </div>

                </div>
                <div class="tab-pane bdr-w-0" id="reads-map-container"
                     data-map-url="{{ path('mautic_campaign_map_stats', {'objectId' : campaign.id, '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>
                {% if showEmailStats|default(false) %}
                <div class="tab-pane bdr-w-0" id="campaign-email-stats">
                    <div class="row">
                        <div class="col-md-6">
                            <h4 class="text-muted ml-20 mb-md">{{ 'mautic.campaign.email_stats.weekday' | trans }}</h4>
                            <div data-campaign-email-stats-weekdays="{{ path('mautic_campaign_metrics_email_weekdays', {'objectId' : campaign.id, 'dateFrom' : dateFrom|date('Y-m-d'), 'dateTo' : dateTo|date('Y-m-d')}) }}">
                                <div class="d-flex jc-center ai-center">
                                    <div class="spinner fs-42">
                                        <i class="ri-loader-3-line ri-spin"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <h4 class="text-muted ml-20 mb-md">{{ 'mautic.campaign.email_stats.hour' | trans }}</h4>
                            <div data-campaign-email-stats-hours="{{ path('mautic_campaign_metrics_email_hours', {'objectId' : campaign.id, 'dateFrom' : dateFrom|date('Y-m-d'), 'dateTo' : dateTo|date('Y-m-d')}) }}">
                                <div class="d-flex jc-center ai-center">
                                    <div class="spinner fs-42">
                                        <i class="ri-loader-3-line ri-spin"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                {% endif %}
            </div>
            <!--/ stats -->

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

            <!-- tabs controls -->
            <ul class="nav nav-tabs nav-tabs-contained">
                <li class="active">
                    <a href="#preview-container" role="tab" data-toggle="tab">
                        {{ 'mautic.campaign.preview.header'|trans }}
                    </a>
                </li>
                {% if events.decision is not empty %}
                    <li class="">
                        <a href="#decisions-container" role="tab" data-toggle="tab">
                            {{ 'mautic.campaign.event.decisions.header'|trans }}
                        </a>
                    </li>
                {% endif %}
                {% if events.action is not empty %}
                    <li class="">
                        <a href="#actions-container" role="tab" data-toggle="tab">
                            {{ 'mautic.campaign.event.actions.header'|trans }}
                        </a>
                    </li>
                {% endif %}
                {% if events.condition is not empty %}
                    <li class="">
                        <a href="#conditions-container" role="tab" data-toggle="tab">
                            {{ 'mautic.campaign.event.conditions.header'|trans }}
                        </a>
                    </li>
                {% endif %}
                <li class="">
                    <a href="#leads-container" role="tab" data-toggle="tab">
                        {{ 'mautic.lead.leads'|trans }}
                    </a>
                </li>
                {{ customContent('tabs', _context) }}
            </ul>
            <!--/ tabs controls -->
        </div>

        <!-- start: tab-content -->
        <div class="tab-content pa-md">
            <!-- #events-container -->
                <div class="active tab-pane fade in bdr-w-0" id="preview-container">
                  {{- include('@MauticCampaign/Campaign/_preview.html.twig', {
                        'campaignId': campaign.id,
                        'campaign': campaign,
                        'campaignEvents': campaignEvents,
                        'campaignSources': campaignSources,
                        'eventSettings': eventSettings,
                        'canvasSettings': campaign.canvasSettings,
                  }) -}}
                </div>
              {% if events.decision is not empty %}
                <div class="tab-pane fade in bdr-w-0" id="decisions-container">
                  {{- include('@MauticCampaign/Campaign/_events.html.twig', {'events': events['decision']}) -}}
                </div>
              {% endif %}
              {% if events.action is not empty %}
                <div class="tab-pane fade in bdr-w-0" id="actions-container">
                  {{- include('@MauticCampaign/Campaign/_events.html.twig', {'events': events['action']}) -}}
                </div>
              {% endif %}
              {% if events.condition is not empty %}
                <div class="tab-pane fade in bdr-w-0" id="conditions-container">
                  {{- include('@MauticCampaign/Campaign/_events.html.twig', {'events': events['condition']}) -}}
                </div>
              {% endif %}
            <!--/ #events-container -->
            <div class="tab-pane fade in bdr-w-0 page-list"
                 id="leads-container"
                 data-target-url="{{ path('mautic_campaign_contacts', {'objectId': campaign.id, 'page': app.session.get('mautic.campaign.contact.page', 1)}) }}">
                <div class="spinner"><i class="ri-loader-3-line ri-spin"></i></div>
                <div class="clearfix"></div>
            </div>
            {{ customContent('tabs.content', _context) }}
        </div>
        <!--/ end: tab-content -->

        {{ customContent('left.section.bottom', _context) }}
    </div>
    <!--/ left section -->

    <!-- right section -->
    <div class="col-md-3 bdr-l height-auto">
        {{ customContent('right.section.top', _context) }}

        {{ include('@MauticCore/Helper/recentactivity.html.twig', {'logs': logs}) }}

        {{ customContent('right.section.bottom', _context) }}
    </div>
    <!--/ right section -->
</div>
<!--/ end: box layout -->
{% endblock %}