{#
  Variables
    - isEmbeded
    - activeMonitoring
#}
{% extends isEmbedded ? '@MauticCore/Default/raw_output.html.twig' : '@MauticCore/Default/content.html.twig' %}

{% block mauticContent 'monitoring' %}

{% block headerTitle activeMonitoring.title %}

{% block actions %}
    {# @todo finish ACL here #}
    {{ include('@MauticCore/Helper/page_actions.html.twig', {
        'item': activeMonitoring,
        'templateButtons': {
            'edit': securityIsGranted('mauticSocial:monitoring:edit'),
            'delete': securityIsGranted('mauticSocial:monitoring:delete'),
            'close': securityIsGranted('mauticSocial:monitoring:view'),
        },
        'routeBase': 'social',
        'langVar': 'monitoring',
        'nameGetter': 'getTitle',
    }) }}
{% endblock %}

{% block content %}
  {{ includeScript('plugins/MauticSocialBundle/Assets/js/social.js') }}
  <!-- start: box layout -->
  <div class="box-layout">
      <!-- left section -->
      <div class="col-md-9 height-auto">
          <div>
              <!-- monitoring detail header -->
              <div class="pr-md pl-md pt-lg pb-lg">
                  <div class="box-layout">
                      <div class="col-xs-10 va-m">
                          <div class="text-white dark-sm mb-0">{{ activeMonitoring.description|purify }}</div>
                      </div>
                      <div class="col-xs-2 text-right">
                          {{ include('@MauticCore/Helper/publishstatus_badge.html.twig', {'entity': activeMonitoring}) }}
                      </div>
                  </div>
              </div>
              <!--/ monitoring detail header -->
              <!-- monitoring detail collapseable -->
              <div class="collapse" id="asset-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': activeMonitoring}) }}
                              </tbody>
                          </table>
                      </div>
                  </div>
              </div>
              <!--/  monitoring collapseable -->
          </div>

          <div>
              <!-- 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="fa fa-twitter"></span>
                                          {{ ('mautic.social.monitoring.' ~ activeMonitoring.networkType ~ '.popularity')|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': leadStats, 'chartType': 'line', 'chartHeight': 300}) }}
                              </div>
                          </div>
                      </div>
                  </div>
              </div>
              <!--/ stats -->

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

              <!-- tabs controls -->
              <ul class="nav nav-tabs pr-md pl-md">
                  <li class="active">
                      <a href="#leads-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">
              <!-- #events-container -->
              <div class="tab-pane active fade in bdr-w-0 page-list" id="leads-container">
                  {{ monitorLeads|raw }}
              </div>
          </div>

      </div>
      <!--/ left section -->

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

      <input id="itemId" type="hidden" value="{{ activeMonitoring.id }}" />
  </div>
  <!--/ end: box layout -->
{% endblock %}