{#
  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:mobile_notifications:viewown'], permissions['notification:mobile_notifications:viewother'], notification.createdBy),
        },
        'routeBase'       : 'mobile_notification',
        'targetLabel'     : 'mautic.notification.mobile_notifications'|trans
    }
) -}}
{% endblock %}

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

{% block publishStatus %}
    {{ include('@MauticCore/Helper/publishstatus_badge.html.twig', {'entity': notification}, with_context=false) }}
{% 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}, with_context=false) }}
                      </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'}) }}
                                  </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 -->

              <!-- 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|raw }}
              </div>
          </div>
      </div>
      <!--/ left section -->

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