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

{% block preHeader %}
{{- 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
  }) -}}
{{ include('@MauticCore/Modules/category--inline.html.twig', {'category': campaign.category}) }}
{{ include('@MauticProject/Modules/projects.html.twig', {'item': campaign}) }}
{% endblock %}

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

{% block actions %}
    {% set buttons = [] %}

    {% if securityHasEntityAccess(permissions['campaign:campaigns:viewown'], permissions['campaign:campaigns:viewother'], campaign.createdBy) and enableExportPermission is not empty%}
        {% set buttons = buttons|merge([{
            'attr': {
                'data-toggle': 'download',
                'href': path('mautic_campaign_action', {'objectAction': 'export', 'objectId': campaign.id}),
            },
            'btnText': 'mautic.core.export'|trans,
            'iconClass': 'ri-export-line',
        }]) %}
    {% endif %}

  {{- include('@MauticCore/Helper/page_actions.html.twig', {
    'item': campaign,
    'customButtons': buttons,
    '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}) }}
  <div class="label__divider"></div>
  
  {% if campaign.allowRestart is defined and campaign.allowRestart == 1 %}
    {% include '@MauticCore/Helper/_tag.html.twig' with {
        tags: [{
            label: 'mautic.campaign.allow_restart'|trans,
            icon: 'ri-restart-fill',
            color: 'blue',
            icon_only: true
        }]
    } %}
  {% endif %}
{% 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--expanded.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="campaign-graph-div" data-target-url="{{ path('mautic_campaign_graph', {'objectId' : campaign.id, 'dateFrom' : dateFrom|date('Y-m-d'), 'dateTo' : dateTo|date('Y-m-d')}) }}">
                        <div class="spinner"><i class="fa fa-spin fa-spinner"></i></div>
                        <div class="clearfix"></div>
                    </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" id="campaign_nav_header_ul">
                <li class="active" id="preview_li">
                    <a href="#preview-container" role="tab" data-toggle="tab">
                        {{ 'mautic.campaign.preview.header'|trans }}
                    </a>
                </li>
                <li class="" id="decisions_li">
                    <a href="#decisions-container" role="tab" data-toggle="tab">
                        {{ 'mautic.campaign.event.decisions.header'|trans }}
                    </a>
                </li>
                <li class="" id="actions_li">
                    <a href="#actions-container" role="tab" data-toggle="tab">
                        {{ 'mautic.campaign.event.actions.header'|trans }}
                    </a>
                </li>
                <li class="" id="conditions_li">
                    <a href="#conditions-container" role="tab" data-toggle="tab">
                        {{ 'mautic.campaign.event.conditions.header'|trans }}
                    </a>
                </li>
                <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" id="campaign-tab-content"
             data-event-target-url="{{ path('mautic_campaign_event_stats', {'objectId' : campaign.id, 'dateFromValue' : dateFrom|date('Y-m-d'), 'dateToValue' : dateTo|date('Y-m-d')}) }}">
            <!-- #events-container -->
                <div class="active tab-pane fade in bdr-w-0" id="preview-container">
                    <div class="spinner"><i class="fa fa-spin fa-spinner"></i></div>
                    <div class="clearfix"></div>
                </div>
                <div class="tab-pane fade in bdr-w-0" id="decisions-container">
                    <div class="spinner"><i class="fa fa-spin fa-spinner"></i></div>
                    <div class="clearfix"></div>
                </div>
                <div class="tab-pane fade in bdr-w-0" id="actions-container">
                    <div class="spinner"><i class="fa fa-spin fa-spinner"></i></div>
                    <div class="clearfix"></div>
                </div>
                <div class="tab-pane fade in bdr-w-0" id="conditions-container">
                    <div class="spinner"><i class="fa fa-spin fa-spinner"></i></div>
                    <div class="clearfix"></div>
                </div>
            <!--/ #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 -->
    {% set right_top = customContent('right.section.top', _context) %}
    {% set right_bottom = customContent('right.section.bottom', _context) %}
    {% if right_top or right_bottom %}
        <div class="col-md-3 bdr-l height-auto">
            {{ right_top }}
            {{ right_bottom }}
        </div>
    {% endif %}
    <!--/ right section -->
</div>
<!--/ end: box layout -->
{% endblock %}