<link rel="stylesheet" type="text/css" href="{{ asset('app/bundles/DynamicContentBundle/Assets/css/dwc-generator.css') }}">

{% set htmlcode %}
<pre class="dwc--generator-content-code d-flex fd-column fg-1 gap-md pa-0 fs-16 text-helper">{{ '<div
    data-slot="dwc"
    data-param-slot-name="' ~ entity.slotName ~ '">'|raw }}<div class="dwc--generator-content-editable layer-two d-inline-flex gap-4 ai-center ml-lg text-primary"><i class="ri-pencil-line ri-sm" title="{{ 'mautic.dynamiccontent.generator.default_content_tooltip'|trans }}" data-toggle="tooltip"></i><input class="form-control dwc--generator-content-input" type="text" placeholder="{{ 'mautic.dynamiccontent.generator.input_placeholder'|trans }}"></div>{{ '</div>'|escape }}</pre>
{% endset %}

<div class="row mt-lg">
    <div class="col-xs-12">
        <h2 class="mt-lg mb-md">{{ 'mautic.dynamiccontent.generator.deployment_options'|trans }}</h2>
        <p class="text-muted mb-lg">{{ 'mautic.dynamiccontent.generator.deployment_instructions'|trans }}</p>
    </div>
    <div class="col-xs-12 col-md-4">
        <ul class="list-group" role="tablist">
            <li role="presentation" class="list-group-item active">
                <a href="#dwc--generator-html" aria-controls="dwc--generator-html" role="tab" data-toggle="tab">
                    <div class="d-flex jc-space-between mb-sm">
                        <h4 class="list-group-item-heading fw-sb">{{ 'mautic.dynamiccontent.generator.html'|trans }}</h4>
                        <i class="ri-html5-fill ri-lg"></i>
                    </div>
                    <p class="list-group-item-text">{{ 'mautic.dynamiccontent.generator.html_description'|trans }}</p>
                </a>
            </li>
            <li role="presentation" class="list-group-item">
                <a href="#dwc--generator-plugins" aria-controls="dwc--generator-plugins" role="tab" data-toggle="tab">
                    <div class="d-flex jc-space-between mb-sm">
                        <h4 class="list-group-item-heading fw-sb">{{ 'mautic.dynamiccontent.generator.plugins'|trans }}</h4>
                        <i class="ri-apps-2-add-fill ri-lg"></i>
                    </div>
                    <p class="list-group-item-text">{{ 'mautic.dynamiccontent.generator.plugins_description'|trans }}</p>
                </a>
            </li>
        </ul>
        {{ include('@MauticDynamicContent/DynamicContent/StandaloneSlotGenerator/dwc-generator--help.html.twig') }}
    </div>
    <div class="col-xs-12 col-md-8 tab-content">

        <div role="tabpanel" class="tab-pane fade in active" id="dwc--generator-html">
            <div class="tile dwc--generator-wrapper">
                <div class="d-flex fg-1">
                    <div class="dwc--generator-toolbar pa-xs layer-two d-flex fd-column jc-space-between ai-start mr-md">
                        {% include '@MauticCore/Helper/button.html.twig' with {
                        buttons: [
                        {
                        icon: 'ri-code-s-slash-line ri-lg',
                        label: 'mautic.dynamiccontent.generator.switch_html_tag',
                        icon_only: true,
                        variant: 'ghost',
                        size: 'sm',
                        attributes: {
                        'class': 'ma-0',
                        'type': 'button'
                        }
                        },
                        {
                        icon: 'ri-question-line ri-lg',
                        label: 'mautic.dynamiccontent.generator.more_information.html',
                        icon_only: true,
                        variant: 'ghost',
                        size: 'sm',
                        attributes: {
                        'class': 'ma-0',
                        'type': 'button',
                        'data-toggle': 'popover',
                        'title': 'mautic.dynamiccontent.generator.html_tag_title'|trans,
                        'data-content': 'mautic.dynamiccontent.generator.html_tag_info'|trans,
                        'data-container': 'body',
                        }
                        }
                        ]
                        } %}

                    </div>
                    <div class="dwc--generator-content mt-md mb-sm d-flex fd-column fg-1">
                        {{ htmlcode }}
                        <div class="dwc--generator-content-help text-helper small">
                            <i class="ri-information-2-line"></i>
                            {{ 'mautic.dynamiccontent.generator.preview_content_discard_notice'|trans }}
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div role="tabpanel" class="tab-pane fade" id="dwc--generator-plugins">
            <div class="tile dwc--generator-wrapper">
                <div class="d-flex fg-1">
                    <div class="dwc--generator-toolbar pa-xs layer-two d-flex fd-column jc-space-between ai-start mr-md">
                        {% include '@MauticCore/Helper/button.html.twig' with {
                        buttons: [
                        {
                        icon: 'ri-brackets-line ri-lg',
                        label: 'mautic.dynamiccontent.generator.switch_code_wrapper',
                        icon_only: true,
                        variant: 'ghost',
                        size: 'sm',
                        attributes: {
                        'class': 'ma-0',
                        'type': 'button'
                        }
                        },
                        {
                        icon: 'ri-question-line ri-lg',
                        label: 'mautic.dynamiccontent.generator.more_information.plugins',
                        icon_only: true,
                        variant: 'ghost',
                        size: 'sm',
                        attributes: {
                        'class': 'ma-0',
                        'data-toggle': 'popover',
                        'title': 'mautic.dynamiccontent.generator.when_to_change_brackets'|trans,
                        'data-content': 'mautic.dynamiccontent.generator.joomla_syntax_info'|trans,
                        'data-container': 'body',
                        'type': 'button'
                        }
                        }
                        ]
                        } %}

                    </div>
                    <div class="dwc--generator-content mt-md mb-sm d-flex fd-column fg-1">
                        <pre class="dwc--generator-content-code d-flex fd-column fg-1 gap-md pa-0 fs-16 text-helper">{mautic type="content" slot="{{ entity.slotName }}"} <div class="dwc--generator-content-editable layer-two d-inline-flex gap-4 ai-center ml-lg text-primary"> <i class="ri-pencil-line ri-sm" title="{{ 'mautic.dynamiccontent.generator.default_content_tooltip'|trans }}" data-toggle="tooltip"></i><input class="form-control dwc--generator-content-input" type="text" placeholder="{{ 'mautic.dynamiccontent.generator.input_placeholder'|trans }}"></div>{/mautic}
                        </pre>
                        <div class="dwc--generator-content-help text-helper small">
                            <i class="ri-information-2-line"></i>
                            {{ 'mautic.dynamiccontent.generator.preview_content_discard_notice'|trans }}
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {% include '@MauticCore/Helper/button.html.twig' with {
        buttons: [
        {
        label: 'mautic.dynamiccontent.generator.copy_dynamic_content_slot',
        icon: 'ri-clipboard-line',
        variant: 'secondary',
        size: 'xl',
        wide: 'true',
        attributes: {
            'class': 'dwc--generator-copy'
        }
        }
        ]
        } %}

    </div>
</div>
