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

{% block mauicContent %}message
{% endblock %}

{% block headerTitle %}
	{{ item.getName() }}
{% endblock %}

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

{% block actions %}
    {{- include('@MauticCore/Helper/page_actions.html.twig', {
        'item': item,
        'templateButtons': {
            'edit': securityHasEntityAccess(permissions['channel:messages:editown'], permissions['channel:messages:editother'], item.getCreatedBy()),
            'clone': permissions['channel:messages:create'],
            'delete': securityHasEntityAccess(permissions['channel:messages:deleteown'], permissions['channel:messages:deleteother'], item.getCreatedBy()),
        },
        'routeBase': 'message'
    }) -}}
{% endblock %}

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

{% block content %}
<!-- start: box layout -->
    <div class="box-layout">
        <!-- left section -->
        <div class="col-md-9 height-auto">
            <div>
                <!-- form detail header -->
                {% include '@MauticCore/Helper/description.html.twig' with {'description': item.description} %}
                <!--/ form detail header -->
                <!-- form detail collapseable -->
                <div class="collapse pr-md pl-md" id="focus-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' : item}) -}}
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <!--/ form detail collapseable -->
            </div>

        <!--/ form detail collapseable toggler -->
            <div>
                <!-- form detail collapseable toggler -->
                <div class="hr-expand nm">
                        <span data-toggle="tooltip" title="{% trans %}mautic.core.details{% endtrans %}">
                            <a href="javascript:void(0)" class="arrow text-secondary collapsed" data-toggle="collapse" data-target="#focus-details"><span class="caret"></span> {% trans %}mautic.core.details{% endtrans %}</a>
                        </span>
                </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-6 va-m">
                                        <h5 class="text-white dark-md fw-sb mb-xs">
                                            <div><i class="ri-line-chart-fill pull-left"></i>
                                                <span class="pull-left"> {% trans %}mautic.messages.processed.messages{% endtrans %}</span></div>
                                        </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' : eventCounts, 'chartType' : 'line', 'chartHeight' : 300}) -}}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!--/ stats -->
                {{ customContent('details.stats.graph.below', _context) }}

                <!-- tabs controls -->
                <ul class="nav nav-tabs nav-tabs-contained">
                    {% set active = 'active' %}
                    {% for channel, contacts in messagedLeads %}
                    <li class="{{ active }}">
                        <a href="#contacts-{{ channel }}" role="tab" data-toggle="tab">
                            {{ ('all' is not same as(channel)) ? channels[channel]['label'] : 'mautic.lead.leads'|trans() }}
                        </a>
                    </li>
                    {% set active = '' %}
                    {% endfor %}
                </ul>
                <!--/ tabs controls -->
            </div>

            <!-- start: tab-content -->
            <div class="tab-content pa-md">
            {% set active = ' active in' %}
                {% for channel, contacts in messagedLeads %}
                <div class="tab-pane bdr-w-0 page-list{{ active }}" id="contacts-{{ channel }}">
                    {% set message = ('all' is same as(channel)) ? 'mautic.channel.message.all_contacts' : 'mautic.channel.message.channel_contacts' %}
                    <div class="alert alert-info"><strong>{{ message|trans }}</strong></div>
                    <div class="message-{{ channel }}">
                        {{ contacts|raw }}
                    </div>
                </div>
                {% set active = '' %}
                {% endfor %}
            </div>
        </div>
        <!-- right section -->
        <div class="col-md-3 bdr-l height-auto">
            <!-- recent activity -->
            {{- include('@MauticCore/Helper/recentactivity.html.twig', {'logs' : logs}) -}}
            {% block rightFormContent %}
            {% endblock %}
        </div>
    </div>
{% endblock %}