{#
  Variables
    - usageStats
    - campaignStats
    - stats
    - list
    - segmentCount
    - permissions
    - security
    - dateRangeForm
    - events
    - mauticContent
    - contentOnly
    - modalView
    - template
#}
{% extends '@MauticCore/Default/content.html.twig' %}

{% block mauticContent %}list{% endblock %}

{% block preHeader %}
{{- include('@MauticCore/Helper/page_actions.html.twig', {
    'item': list,
    'customButtons': customButtons|default([]),
    'templateButtons': {
        'close': securityHasEntityAccess(permissions[constant('Mautic\\LeadBundle\\Security\\Permissions\\LeadPermissions::LISTS_VIEW_OWN')], permissions[constant('Mautic\\LeadBundle\\Security\\Permissions\\LeadPermissions::LISTS_VIEW_OTHER')], list.createdBy),
    },
    'routeBase': 'segment',
    'targetLabel': 'mautic.lead.lead.lists'|trans
}) -}}
{{ include('@MauticCore/Modules/category--inline.html.twig', {'category': list.category}) }}
{{ include('@MauticProject/Modules/projects.html.twig', {'item': list}) }}
{% endblock %}

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

{% block actions %}
  {{- include('@MauticCore/Helper/page_actions.html.twig', {
            'item': list,
            'customButtons': customButtons|default([]),
            'templateButtons': {
                'edit': securityHasEntityAccess(permissions[constant('Mautic\\LeadBundle\\Security\\Permissions\\LeadPermissions::LISTS_EDIT_OWN')], permissions[constant('Mautic\\LeadBundle\\Security\\Permissions\\LeadPermissions::LISTS_EDIT_OTHER')], list.createdBy),
                'delete': securityHasEntityAccess(permissions[constant('Mautic\\LeadBundle\\Security\\Permissions\\LeadPermissions::LISTS_DELETE_OWN')], permissions[constant('Mautic\\LeadBundle\\Security\\Permissions\\LeadPermissions::LISTS_DELETE_OTHER')], list.createdBy),
                'clone': permissions[constant('Mautic\\LeadBundle\\Security\\Permissions\\LeadPermissions::LISTS_CREATE')]
            },
            'routeBase': 'segment',
  }) -}}
{% endblock %}

{% block publishStatus %}
  {{- include('@MauticCore/Helper/publishstatus_badge.html.twig', {'entity': list}) -}}
  <div class="label__divider"></div>
    {# Dynamic/Static segment tag #}
    {% set segmentType = list.filters is defined and list.filters|length > 0 ? 'dynamic' : 'static' %}
    {% include '@MauticCore/Helper/_tag.html.twig' with {
        tags: [
            {
                label: ('mautic.lead.tag.' ~ segmentType ~ '_segment')|trans,
                icon: 'ri-pie-chart-line',
                color: 'high-contrast',
                attributes: {
                    title: ('mautic.lead.tag.' ~ segmentType ~ '_segment.tooltip')|trans,
                    'data-toggle': 'tooltip',
                    'tooltip-placement': 'top'
                }
            }
        ]
    } %}

    {# Tag for visible to other users #}
    {% if list.isGlobal is defined and list.isGlobal == 1 %}
        {% include '@MauticCore/Helper/_tag.html.twig' with {
            tags: [
                {
                    label: 'mautic.lead.list.form.isglobal'|trans,
                    icon: 'ri-group-2-fill',
                    color: 'blue',
                    icon_only: true
                }
            ]
        } %}
    {% endif %}

    {# Tag for available in Preference Center #}
    {% if list.isPreferenceCenter is defined and list.isPreferenceCenter == 1 %}
        {% include '@MauticCore/Helper/_tag.html.twig' with {
            tags: [
                {
                    label: 'mautic.lead.list.form.isPreferenceCenter'|trans,
                    icon: 'ri-equalizer-2-fill',
                    color: 'blue',
                    icon_only: true
                }
            ]
        } %}
    {% endif %}
{% endblock %}

{% block content %}
{% set hasSegmentMembershipFilter = list.hasFilterTypeOf('leadlist') %}
<!-- start: box layout -->
<div class="box-layout">
    <!-- left section -->
    <div class="col-md-9 height-auto">
        <div>
            <!-- page detail header -->
            <!-- segment detail collapseable toggler -->
            {% include '@MauticCore/Helper/description--expanded.html.twig' with {'description': list.description} %}
            <div class="collapse pr-md pl-md" id="segment-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': list}) }}
                            <tr>
                                <td width="20%"><span class="fw-b textTitle">{{ 'mautic.lead.leads'|trans }}</span></td>
                                <td>{{ segmentCount }}</td>
                            </tr>
                            {% if list.lastBuiltTime %}
                            <tr>
                                <td width="20%"><span class="fw-b textTitle">{{ 'mautic.lead.list.last_built_time'|trans }}</span></td>
                                <td>
                                    {{ 'mautic.core.date.second'|trans({'%count%': list.lastBuiltTime}) }} ({{ dateToFull(list.lastBuiltDate) }})
                                </td>
                            </tr>
                            {% endif %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <!--/ segment detail collapseable toggler -->
        <div>
            <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="#segment-details">
                        <span class="caret"></span> {{ 'mautic.core.details'|trans }}
                    </a>
                </span>
            </div>
            <!-- some stats -->

            <!--/ stats -->
            <div class="pa-md">
                <div class="row">
                    <div class="col-sm-12">
                        {% if securityIsGranted('lead:leads:viewown') %}
                            {{ include('@MauticCore/Modules/stat--icon.html.twig', {'stats': [
                                {
                                    'title': 'mautic.lead.segments.total.contacts'|trans,
                                    'value': segmentCount,
                                    'link': path('mautic_contact_index', {'search': ('mautic.lead.lead.searchcommand.list'|trans) ~ ':' ~ list.alias}),
                                    'icon': 'ri-group-line'
                                },
                                {
                                    'title': 'mautic.lead.segments.active.contacts'|trans,
                                    'value': activeSegmentCount,
                                    'link': path('mautic_contact_index', {'search': ('mautic.lead.lead.searchcommand.list'|trans) ~ ':' ~ list.alias ~ ' !' ~ ('mautic.lead.lead.searchcommand.dnc'|trans) ~ ':' ~ ('mautic.lead.lead.searchcommand.dnc.any'|trans)}),
                                    'icon': 'ri-user-follow-line',
                                    tooltip: 'mautic.lead.segments.active.contacts.tooltip'|trans
                                }
                            ]}) }}
                        {% endif %}
                        <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.segment.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="d-flex fd-column pt-0 pl-15 pb-15 pr-15 min-h-256">
                                {{ include('@MauticCore/Helper/chart.html.twig', {
                                      'chartData': stats,
                                      'chartType': 'line',
                                      'chartHeight': 300,
                                }) }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>

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

            <!-- tabs controls -->
            <!-- search bar-->
            <form method="post" action="{{ path('mautic_segment_contacts', {'objectId': list.id}) }}" class="panel" id="segment-contact-filters">
                {% if events.types is defined and events.types is iterable %}
                    <div class="history-search panel-footer text-secondary">
                        <div class="col-sm-5">
                            <select name="includeEvents[]" multiple="multiple" class="form-control bdr-w-0" data-placeholder="{{ 'mautic.lead.lead.filter.bundles.include.placeholder'|trans }}">
                                {% for typeKey, typeName in events.types %}
                                    <option value="{{ typeKey|purify }}">{{ typeName }}</option>
                                {% endfor %}
                            </select>
                        </div>
                    </div>
                {% endif %}
            </form>

            <!--/ search bar -->
            <ul class="nav nav-tabs nav-tabs-contained">
                <li class="active">
                    <a href="#contacts-container" role="tab" data-toggle="tab">{{ 'mautic.lead.leads'|trans }}</a>
                </li>
                {% if hasSegmentMembershipFilter %}
                  <li>
                      <a id="segment-dependencies" href="#segment-dependencies-container" role="tab" data-toggle="tab">{{ 'mautic.lead.segment.dependencies'|trans }}</a>
                  </li>
                {% endif %}
                <li>
                    <a id="campaign-share-tab" href="#campaign-container" role="tab" data-toggle="tab">{{ 'mautic.lead.campaign.share'|trans }}</a>
                </li>
            </ul>
            <!--/ tabs controls -->
        </div>

        <!-- start: tab-content -->
        <div class="tab-content pa-md">
            <div class="tab-pane active bdr-w-0 page-list"
                 id="contacts-container"
                 data-target-url="{{ path('mautic_segment_contacts', {'objectId': list.id, 'page': app.session.get('mautic.segment.contact.page', 1)}) }}">
              <div class="spinner"><i class="ri-loader-3-line ri-spin"></i></div>
            </div>

            {% if hasSegmentMembershipFilter %}
              <div class="tab-pane bdr-w-0 page-list" id="segment-dependencies-container"></div>
            {% endif %}

            <div class="tab-pane bdr-w-0 page-list" id="campaign-container">
                <div id="campaign-share-container" style="position: relative">
                    <table id="campaign-share-table" class="table table-hover mb-0">
                        <thead>
                        <tr>
                            <th>{{ 'mautic.campaign.campaign'|trans }}</th>
                            <th>{{ 'mautic.lead.share'|trans }}</th>
                        </tr>
                        </thead>
                        <tbody>
                        {% for stat in campaignStats %}
                            <tr>
                                <td>
                                    <a href="{{ path('mautic_campaign_action', {'objectAction': 'view', 'objectId': stat.id}) }}" data-toggle="ajax">
                                        {{- stat.name -}}
                                    </a>
                                </td>
                                <td width="20%">
                                    <span class="campaign-share-stat" data-value="{{ stat.id }}"
                                          id="campaign-share-stat-{{ stat.id }}">{{ stat.share }}</span> %
                                </td>
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <!-- end: tab-content -->
    </div>
    <!--/ left section -->

    <!-- right section -->
    <div class="col-md-3 bdr-l height-auto">
        {{ include('@MauticCore/Helper/usage.html.twig', {
            'title': 'mautic.lead.segments.usages'|trans,
            'stats': usageStats,
            'noUsages': 'mautic.lead.segments.no_usages'|trans,
        }) }}

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