{#
  Variables
    - notification
    - trackables
    - logs
    - permissions
    - security
    - entityViews
    - contacts
    - dateRangeForm
#}
{% extends '@MauticCore/Default/content.html.twig' %}

{% block mauticContent %}notification{% endblock %}

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

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

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

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

{% block content %}
<!-- start: box layout -->
<div class="box-layout">
    <!-- left section -->
    <div class="col-md-9 height-auto">
        <div>
            <!-- notification detail collapseable -->
            <div class="collapse pr-md pl-md" id="notification-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': notification}) }}
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
            <!--/ notification detail collapseable -->

            <!-- notification detail collapseable toggler -->
            <div class="hr-expand nm">
                <span data-toggle="tooltip" title="{{ 'mautic.core.details'|trans }}">
                    <a href="javascript:void(0)" class="arrow text-secondary collapsed" data-toggle="collapse" data-target="#notification-details">
                      <span class="caret"></span>
                      {{ 'mautic.core.details'|trans }}
                    </a>
                </span>
            </div>
            <!--/ notification 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.core.stats'|trans }}
                                    </h5>
                                </div>
                                <div class="col-md-9 va-m">
                                    {{ include('@MauticCore/Helper/graph_dateselect.html.twig', {'dateRangeForm': dateRangeForm, 'class': 'pull-right'}, with_context=false) }}
                                </div>
                            </div>
                            <div class="pt-0 pl-15 pb-10 pr-15">
                                {{ include('@MauticCore/Helper/chart.html.twig', {'chartData': entityViews, 'chartType': 'line', 'chartHeight': 300}, with_context=false) }}
                            </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>
                <li class="">
                    <a href="#contacts-container" role="tab" data-toggle="tab">
                        {{ 'mautic.lead.leads'|trans }}
                    </a>
                </li>
            </ul>
            <!--/ tabs controls -->
        </div>

        <!-- start: tab-content -->
        <div class="tab-content pa-md">
            <div class="tab-pane active bdr-w-0" id="clicks-container">
                {{ include('@MauticPage/Trackable/click_counts.html.twig', {
                    'trackables': trackables,
                    'entity': notification,
                    'channel': 'notification'
                }) }}
            </div>
            <div class="tab-pane fade in bdr-w-0 page-list" id="contacts-container">
                {{ contacts|purify }}
            </div>
        </div>
        <!--/ tab-content -->
    </div>
    <!--/ left section -->

    <!-- right section -->
    <div class="col-md-3 bdr-l height-auto">
        <!-- activity feed -->
        {{ include('@MauticCore/Helper/recentactivity.html.twig', {'logs': logs}) }}
    </div>
    <!--/ right section -->
    <input name="entityId" id="entityId" type="hidden" value="{{ notification.id|e }}" />
</div>
<!--/ end: box layout -->
{% endblock %}