{% if not isEmbedded %}
    {% extends '@MauticCore/Default/content.html.twig' %}
{% endif %}

{% block mauticContent %}sms{% endblock %}
{% block headerTitle %}{{sms.getName()}}{% endblock %}

{% block preHeader %}
{{- include('@MauticCore/Helper/page_actions.html.twig',
    {
        'item'            : sms,
        'templateButtons' : {
            'close' : securityHasEntityAccess(
                permissions['sms:smses:viewown'],
                permissions['sms:smses:viewother'],
                sms.getCreatedBy()
            ),
        },
        'routeBase' : 'sms',
        'targetLabel': 'mautic.sms.smses'|trans
    }
) -}}
{{ include('@MauticCore/Modules/category--inline.html.twig', {'category': sms.category}) }}
{{ include('@MauticProject/Modules/projects.html.twig', {'item': sms}) }}
{% endblock %}

{% block actions %}
    {% set customButtons = [] %}
    {{- include('@MauticCore/Helper/page_actions.html.twig',
        {
            'item'            : sms,
            'customButtons'   : customButtons is defined ? customButtons : [],
            'templateButtons' : {
                'edit' : securityHasEntityAccess(
                    permissions['sms:smses:editown'],
                    permissions['sms:smses:editother'],
                    sms.getCreatedBy()
                ),
                'clone'  : permissions['sms:smses:create'],
                'delete' : securityHasEntityAccess(
                    permissions['sms:smses:deleteown'],
                    permissions['sms:smses:deleteother'],
                    sms.getCreatedBy()
                ),
            },
            'routeBase' : 'sms',
        }
    ) -}}
{% endblock %}

{% block publishStatus %}
{{- include('@MauticCore/Helper/publishstatus_badge.html.twig', {
    'entity': sms,
    'status': sms.getPublishUp() is not null ? 'sending' : 'available'
}) -}}
<div class="label__divider"></div>
{% set tags = [
    {
        color: 'warm-gray',
        label: smsType == 'list'
            ? 'mautic.sms.type.list.header'
            : (smsType == 'template' ? 'mautic.sms.type.template.header' : type)
    }
] %}

{# Translation tags #}
{% set tags = tags
    |merge(sms.isTranslation and not sms.isTranslation(true)
    ? [{ color: 'warm-gray', label: 'mautic.core.icon_tooltip.translation' }]
    : [])
    |merge(sms.isTranslation(true)
    ? [{ color: 'warm-gray', label: 'mautic.core.translation_of'|trans({'%parent%' : translations.parent.name}), icon: 'ri-translate' }]
    : [])
%}

{% include '@MauticCore/Helper/_tag.html.twig' with { tags: tags } %}
{% endblock %}

{% set smsType = sms.getSmsType() %}
{% if smsType is empty %}
    {% set smsType = 'template' %}
{% endif %}

{% set translationContent = include('@MauticCore/Translation/index.html.twig',
    {
        'activeEntity'      : sms,
        'translations'      : translations,
        'model'             : 'sms',
        'actionRoute'       : 'mautic_sms_action',
    }
) %}
{% set showTranslations = translationContent|trim is not empty %}

{% block content %}
<!-- start: box layout -->
<div class="box-layout">
    <!-- left section -->
    <div class="col-md-7 col-lg-9 height-auto">
        <div>
            <!-- page detail header -->
            <!-- sms detail collapseable toggler -->
            <div class="collapse pr-md pl-md" id="sms-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' : sms}) -}}
                                {% if sms.getSmsType() == 'list' %}
                                    <tr>
                                        <td width="20%"><span class="fw-b textTitle">{{ 'mautic.lead.lead.lists'|trans }}</span></td>
                                        <td>
                                            {% set segments = sms.getLists %}
                                            {% set segmentNames = segments.toArray|map(segment => segment.getName) %}
                                            {{ segmentNames|join(', ') }}
                                        </td>
                                    </tr>
                                {% endif %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
            <!--/ sms 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="#sms-details">
                        <span class="caret"></span> {{ 'mautic.core.details'|trans }}
                    </a>
                </span>
            </div>
            <!-- some stats -->
            <div class="pa-md">
                <div class="row">
                    <div class="col-sm-12">
                        {% if security.isGranted('lead:leads:viewown') %}
                        {{ include('@MauticCore/Modules/stat--icon.html.twig', {'stats': [
                            {
                                'title': 'mautic.lead.lead.contacts.sms_sent',
                                'value': sms.sentCount,
                                'link': path('mautic_contact_index', {
                                    'search': ('mautic.lead.lead.searchcommand.sms_sent'|trans) ~ ':' ~ sms.id
                                }),
                                'icon': 'ri-message-2-line'
                            }
                        ]}) }}
                        {% 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.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="d-flex fd-column pt-0 pl-15 pb-15 pr-15 min-h-256">
                                {{- include('@MauticCore/Helper/chart.html.twig', {'chartData' : entityViews, '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">
                <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>

                {% if showTranslations %}
                    <li>
                        <a href="#translation-container" role="tab" data-toggle="tab">
                            {{ 'mautic.core.translations'|trans }}
                        </a>
                    </li>
                {% endif %}
            </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'     : sms,
                    'channel'    : 'sms'
                }) -}}
            </div>

            <div class="tab-pane fade in bdr-w-0 page-list" id="contacts-container">
                {{ contacts|raw }}
            </div>

            {% if showTranslations %}
                <div class="tab-pane bdr-w-0" id="translation-container">
                    {{ translationContent|raw }}
                </div>
            {% endif %}
        </div>
        <!-- end: tab-content -->
    </div>
    <!--/ left section -->

    <!-- right section -->
    <div class="col-md-5 col-lg-3 height-auto">
        <!-- activity feed -->
        <div class="mb-48" style="zoom: 0.8;">{{ include('@MauticSms/Sms/preview.html.twig') }}</div>
        {{- include('@MauticCore/Helper/recentactivity.html.twig', {'logs' : logs}) -}}
    </div>
    <!--/ right section -->
    <input name="entityId" id="entityId" type="hidden" value="{{ sms.getId() }}" />
</div>
<!--/ end: box layout -->
{% endblock %}