{#
  Variables
    - activeForm
    - submissionCounts
    - page
    - logs
    - permissions
    - stats.submissionsInTime
    - dateRangeForm
    - activeFormActions
    - activeFormFields
    - formScript
    - formContent
    - availableActions
#}
{% extends '@MauticCore/Default/content.html.twig' %}

{% block mauticContent %}form{% endblock %}

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

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

{% block actions %}
    {{ include('@MauticCore/Helper/page_actions.html.twig', {
            'item': activeForm,
            'templateButtons': {
                'edit': securityHasEntityAccess(permissions['form:forms:editown'], permissions['form:forms:editother'], activeForm.createdBy),
                'clone': permissions['form:forms:create'],
                'delete': securityHasEntityAccess(permissions['form:forms:deleteown'], permissions['form:forms:deleteother'], activeForm.createdBy),
            },
            'routeBase': 'form',
            'langVar': 'form',
            'customButtons': [
                {
                    'attr': {
                        'data-toggle': '',
                        'target': '_blank',
                        'href': path('mautic_form_action', {'objectAction': 'preview', 'objectId': activeForm.id}),
                    },
                    'iconClass': 'ri-camera-3-line',
                    'btnText': 'mautic.form.form.preview',
                    'btnClass': 'btn btn-ghost btn-nospin',
                },
                {
                    'attr': {
                        'data-toggle': 'ajax',
                        'href': path('mautic_form_action', {'objectAction': 'results', 'objectId': activeForm.id}),
                    },
                    'iconClass': 'ri-database-line',
                    'btnText': 'mautic.form.form.results',
                },
            ],
    }) }}
{% endblock %}

{% block publishStatus %}
{{- include('@MauticCore/Helper/publishstatus_badge.html.twig', {
    'entity': activeForm,
    'status': 'available'
}) -}}
<div class="label__divider"></div>
{% include '@MauticCore/Helper/_tag.html.twig' with {
    tags: [
        {
            type: 'read-only',
            icon: activeForm.formType == 'campaign'
            ? 'ri-megaphone-line'
            : 'ri-survey-line',
            color: 'high-contrast',
            label: activeForm.formType == 'campaign'
                ? 'mautic.form.type.campaign.header'
                : 'mautic.form.type.standalone.header'
        }
    ]
} %}

{% if activeForm.noIndex is defined and activeForm.noIndex == 1 %}
    {% include '@MauticCore/Helper/_tag.html.twig' with {
        tags: [{
            label: 'mautic.core.tag.search_index.disabled'|trans,
            icon: 'ri-eye-off-fill',
            color: 'blue',
            icon_only: true
        }]
    } %}
{% endif %}

{% if activeForm.inKioskMode is defined and activeForm.inKioskMode == 1 %}
    {% include '@MauticCore/Helper/_tag.html.twig' with {
        tags: [{
            label: 'mautic.form.tag.kioskmode.label'|trans,
            icon: 'ri-spy-fill',
            color: 'blue',
            icon_only: true
        }]
    } %}
{% endif %}

{# Language #}
{% if activeForm.language is defined and activeForm.language is not empty %}
    {% include '@MauticCore/Helper/_tag.html.twig' with {
        tags: [{
            label: activeForm.language()|language_name,
            icon: 'ri-translate-2',
            color: 'warm-gray',
            attributes: {
                'data-toggle': 'tooltip',
                'data-placement': 'top',
                'title': 'mautic.core.language'|trans
            }
        }]
    } %}
{% endif %}
{% endblock %}

{% block content %}
{% set showActions = activeFormActions|length %}
{% set previewUrl = url('mautic_form_action', {'objectAction': 'preview', 'objectId': activeForm.id}) %}
<!-- start: box layout -->
<div class="box-layout">
    <!-- left section -->
    <div class="col-md-9 height-auto">
        <div>
            <!-- form detail header -->
            {% include '@MauticCore/Helper/description--expanded.html.twig' with {'description': activeForm.description} %}
            <!--/ form detail header -->

            <!-- form detail collapseable -->
            <div class="collapse pr-md pl-md" id="form-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': activeForm}) }}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <!--/ form detail collapseable -->
        </div>

        <div>
            <!-- form detail collapseable toggler -->
            <div class="hr-expand nm">
                <span data-toggle="tooltip"
                      title="{{ 'mautic.form.details.detail'|trans }}">
                    <a href="javascript:void(0)" class="arrow text-secondary collapsed" data-toggle="collapse"
                       data-target="#form-details"><span class="caret"></span> {{ 'mautic.core.details'|trans }}</a>
                </span>
            </div>
            <!--/ form detail collapseable toggler -->

            <!-- stats -->
            <div class="pa-md">
                <div class="row">
                    <div class="col-sm-12">
                        {{ include('@MauticCore/Modules/stat--icon.html.twig', {'stats': [
                            {
                                'title': 'mautic.form.stats.submission_counts.total',
                                'value': submissionCounts['total'],
                                'tooltip': 'mautic.form.stats.submission_counts.total.desc',
                                'link': path('mautic_form_action', {'objectAction': 'results', 'objectId': activeForm.id}),
                            },
                            {
                                'title': 'mautic.form.stats.submission_counts.unique',
                                'value': submissionCounts['unique'],
                                'tooltip': 'mautic.form.stats.submission_counts.unique.desc',
                                'icon': 'ri-user-6-line'
                            }
                        ]}) }}
                        <div class="panel">
                            <div class="panel-body box-layout">
                                <div class="col-xs-6 va-m">
                                    <h5 class="text-white dark-md fw-sb mb-xs">
                                        <span class="ri-download-line"></span>
                                        {{ 'mautic.form.graph.line.submissions'|trans }}
                                    </h5>
                                </div>
                                <div class="col-xs-6 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['submissionsInTime'], '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">
                {% if showActions %}
                    <li class="active">
                        <a href="#actions-container" role="tab" data-toggle="tab">{{ 'mautic.form.tab.actions'|trans }}</a>
                    </li>
                {% endif %}
                <li class="{% if not showActions %}active{% endif %}">
                    <a href="#fields-container" role="tab" data-toggle="tab">{{ 'mautic.form.tab.fields'|trans }}</a>
                </li>
            </ul>
            <!--/ tabs controls -->
        </div>

        <!-- start: tab-content -->
        <div class="tab-content pa-md">
            {% if showActions %}
                <!-- #actions-container -->
                <div class="tab-pane active fade in bdr-w-0" id="actions-container">
                    {% for group, groupActions in activeFormActions %}
                        <h5 class="fw-sb mb-xs">{{ group|title }}</h5>
                        <ul class="list-group">
                            {# @var \Mautic\FormBundle\Entity\Action $action #}
                            {% for action in groupActions %}
                                <li class="list-group-item">
                                    <div class="box-layout">
                                        {% set icon = null %}
                                        {% if 'lead' == group %}
                                          {% set icon = 'ri-user-6-fill' %}
                                        {% elseif 'asset' == group %}
                                          {% set icon = 'ri-download-cloud-2-line' %}
                                        {% endif %}
                                        {% if icon is not empty %}
                                            <div class="col-md-1 va-m">
                                                <h3><span class="fa {{ icon }} text-white dark-xs"></span></h3>
                                            </div>
                                        {% endif %}
                                        <div class="col-md-7 va-m">
                                            <h5 class="fw-sb text-interactive mb-xs">{{ action.name }}</h5>
                                            <h6 class="text-white dark-sm">{{ action.description|purify }}</h6>
                                        </div>
                                        <div class="col-md-4 va-m text-right">
                                            <em class="text-white dark-sm">{% if availableActions[action.type] is defined %}{{ availableActions[action.type]['label']|trans }}{% else %}{{ action.type }}{% endif %}</em>
                                        </div>
                                    </div>
                                </li>
                            {% endfor %}
                        </ul>
                    {% endfor %}
                </div>
                <!--/ #actions-container -->
            {% endif %}

            <!-- #fields-container -->
            <div class="tab-pane fade {% if not showActions %}active in{% endif %} bdr-w-0" id="fields-container">
                <h5 class="fw-sb mb-xs">{{ 'mautic.form.field'|trans }}</h5>
                <ul class="list-group mb-xs">
                    {# @var \Mautic\FormBundle\Entity\Field $field #}
                    {% for field in activeFormFields %}
                      {% if not field.parent %}
                      <li class="list-group-item">
                          {{ include('@MauticForm/Form/_details_fields_list.html.twig', {'field': field}) }}
                      </li>
                      {% endif %}
                      {# @var \Mautic\FormBundle\Entity\Field $field #}
                      {% for fieldChild in activeFormFields %}
                          {% if fieldChild.parent == field.id %}
                              <li class="list-group-item ml-20">
                                  {{ include('@MauticForm/Form/_details_fields_list.html.twig', {'field': fieldChild}) }}
                              </li>
                          {% endif %}
                      {% endfor %}
                    {% endfor %}
                </ul>
            </div>
            <!--/ #fields-container -->
        </div>
        <!--/ end: tab-content -->
    </div>
    <!--/ left section -->

    <!-- right section -->
    <div class="col-md-3 bdr-l height-auto">
        <!-- form HTML -->
        <div class="pa-md">
            {% set aboveFoldContent %}
                <h4 class="fw-b mb-lg">{{ 'mautic.form.form.header.copy'|trans }}</h4>
                {% include '@MauticCore/Components/pictogram.html.twig' with {
                    pictogram: 'embed',
                    size: 64,
                    color: 'var(--icon-interactive)'
                } %}
            {% endset %}

            {% set belowFoldContent %}
                <h5 class="mt-lg fw-b">{{ 'mautic.form.form.header.landingpages'|trans }}</h5>
                <p class="mt-xs mb-lg">{{ 'mautic.form.form.help.landingpages'|trans }}</p>
                <h5 class="mt-lg mb-sm fw-b">{{ 'mautic.form.form.header.external_cms'|trans }}</h5>
                {% include '@MauticCore/Helper/button.html.twig' with {
                    buttons: [
                        {
                            label: 'mautic.form.form.header.embedded',
                            variant: 'tertiary',
                            size: 'sm',
                            wide: true,
                            attributes: {
                                'data-toggle': 'modal',
                                'data-target': '#modal-automatic-copy'
                            }
                        },
                        {
                            label: 'mautic.form.form.header.selfhosted',
                            variant: 'tertiary',
                            size: 'sm',
                            wide: true,
                            attributes: {
                                'data-toggle': 'modal',
                                'data-target': '#modal-manual-copy',
                                'class': 'ml-0'
                            }
                        }
                    ]
                } %}
            {% endset %}

            {{ include('@MauticCore/Components/tile.html.twig', {
                'type': 'expandable-interactive',
                'aboveFoldContent': aboveFoldContent,
                'belowFoldContent': belowFoldContent
            }) }}
        </div>
        <!--/ form HTML -->

        <!-- preview URL -->
        <div class="panel shd-none bdr-rds-0 bdr-w-0 mt-sm mb-0">
            <div class="panel-heading">
                <div class="panel-title">{{ 'mautic.form.form.preview'|trans }}</div>
            </div>
            <div class="panel-body pt-xs">
                <div class="row">
                    <div class="form-group col-xs-12">
                        <div class="input-group">
                            <input type="text" class="form-control" readonly 
                                   aria-label="{{ 'mautic.page.preview.url'|trans }}"
                                   value="{{ previewUrl|escape }}"
                                   onclick="this.setSelectionRange(0, this.value.length);"
                                   onfocus="this.setSelectionRange(0, this.value.length);"/>
                            <span class="input-group-btn">
                                {% include '@MauticCore/Helper/button.html.twig' with {
                                    buttons: [
                                        {
                                            label: 'mautic.core.open_link',
                                            variant: 'ghost',
                                            size: 'md',
                                            icon_only: true,
                                            icon: 'ri-external-link-line',
                                            attributes: {
                                                'type': 'button'
                                            },
                                            onclick: 'window.open("' ~ previewUrl|e('js') ~ '", "_blank");'
                                        }
                                    ]
                                } %}
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--/ preview URL -->

        <hr class="hr-w-2" style="width:50%">

        {# we can leverage data from audit_log table and build activity feed from it #}
        <div class="panel shd-none bdr-rds-0 bdr-w-0 mb-0">
            <!-- recent activity -->
            {{ include('@MauticCore/Helper/recentactivity.html.twig', {'logs': logs}) }}
        </div>
    </div>
    <!--/ right section -->

    {% set automaticCopyModalContent %}
        <p>{{ 'mautic.form.form.help.automaticcopy'|trans }}</p>
        <h3>{{ 'mautic.form.form.help.automaticcopy.js'|trans }}</h3>
        {{ include('@MauticCore/Components/code-snippet.html.twig', {
            'variant': 'single',
            'innerText': ('<script type="text/javascript" src="' ~ absolute_url(path('mautic_form_generateform', {'id': activeForm.id})) ~ '"></script>')
        }) }}
        <h3 class="pt-lg">{{ 'mautic.form.form.help.automaticcopy.iframe'|trans }}</h3>
        {{ include('@MauticCore/Components/code-snippet.html.twig', {
            'variant': 'single',
            'innerText': ('<iframe src="' ~ absolute_url(path('mautic_form_preview', {'id': activeForm.id})) ~ '" width="300" height="300" title="' ~ ('mautic.form.form.iframe.title'|trans) ~ '"><p>Your browser does not support iframes.</p></iframe>')
        }) }}
        <i>{{ 'mautic.form.form.help.automaticcopy.iframe.note'|trans }}</i>
    {% endset %}

    {{ include('@MauticCore/Components/modal.html.twig', {
        id: 'modal-automatic-copy',
        modalLabel: 'mautic.form.form.header.copy',
        modalHeading: 'mautic.form.form.header.embedded',
        modalContent: automaticCopyModalContent,
        buttons: [
            {
                label: 'mautic.core.close'|trans,
                variant: 'primary',
                attributes: {
                    'data-dismiss': 'modal'
                }
            }
        ]
    }) }}

    {% set manualCopyModalContent %}
        <p>{{ 'mautic.form.form.help.selfhosted'|trans }}</p>

        <h4 class="mt-sm mb-sm">{{ 'mautic.form.form.help.selfhosted.script'|trans }}</h4>
        {{ include('@MauticCore/Components/code-snippet.html.twig', {
            'variant': 'multi',
            'innerText': formScript
        }) }}

        <h4 class="mt-sm mb-sm">{{ 'mautic.form.form.help.selfhosted.body'|trans }}</h4>
        {{ include('@MauticCore/Components/code-snippet.html.twig', {
            'variant': 'multi',
            'innerText': formContent
        }) }}
    {% endset %}

    {{ include('@MauticCore/Components/modal.html.twig', {
        id: 'modal-manual-copy',
        modalLabel: 'mautic.form.form.header.copy',
        modalHeading: 'mautic.form.form.header.selfhosted',
        modalContent: manualCopyModalContent,
        buttons: [
            {
                label: 'mautic.core.close'|trans,
                variant: 'primary',
                attributes: {
                    'data-dismiss': 'modal'
                }
            }
        ]
    }) }}
</div>
<!--/ end: box layout -->

<input type="hidden" name="entityId" id="entityId" value="{{ activeForm.id|e }}"/>
{% endblock %}
