<script>
    {% for key, string in mauticLang %}
    mauticLang.{{ key }} = "{{ string|trans }}";
    {% endfor %}
</script>
<div class="{{ typePrefix }}-type-modal-backdrop" style="width: 100%; height: 100%; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: #000000; opacity: 0.9; z-index: 9000"></div>

<div class="modal fade in {{ typePrefix }}-type-modal" style="display: block; z-index: 9999;">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <a href="javascript: void(0);" onclick="Mautic.closeModalAndRedirect('.{{ typePrefix }}-type-modal', '{{ path(cancelUrl) }}');" class="close">
                    <span aria-hidden="true">&times;</span>
                </a>
                <h4 class="modal-title">{{ header|trans }}</h4>
                <div class="modal-loading-bar"></div>
            </div>
            <div class="modal-body form-select-modal">
                <div class="d-flex row-no-gutters fw-nowrap-lg gap-md">
                    <div class="col-md-6">

                        {% set typeOneContent %}
                        <h3 class="mb-48">{{ typeOneHeader|trans }}</h3>
                        {% if typeOnePictogram is defined and typeOnePictogram is not empty %}
                            <div class="mb-md">
                                {% include '@MauticCore/Components/pictogram.html.twig' with {
                                    'pictogram': typeOnePictogram,
                                    'size': '64',
                                    'color': 'var(--icon-interactive)'
                                } %}
                            </div>
                        {% endif %}
                        {% if typeOneDescription is defined and typeOneDescription is not empty %}
                            <div class="mb-md">{{ typeOneDescription|trans }}</div>
                        {% endif %}

                        {% if typeOneTag is defined and typeOneTag is not empty %}
                            {% include '@MauticCore/Helper/_tag.html.twig' with {
                                'tags': [{
                                    'label': typeOneTag,
                                    'color': 'brand'
                                }]
                            } %}
                        {% endif %}
                    

                        {% if typeOneDifferences is defined and typeOneDifferences is not empty %}
                            <div class="layer-two mt-sm text-secondary">
                                {% include '@MauticCore/Components/list--styled.html.twig' with {
                                    'type': 'unordered',
                                    'style': 'none',
                                    'items': typeOneDifferences
                                } %}
                            </div>
                        {% endif %}
                        {% endset %}

                        {% include '@MauticCore/Components/tile.html.twig' with {
                            'type': 'clickable',
                            'onclick': typeOneOnClick,
                            'content': typeOneContent,
                            'icon': typeOneIconClass|default('')
                        } %}
                    </div>
                    <div class="col-md-6">
                        {% set typeTwoContent %}
                        <h3 class="mb-48">{{ typeTwoHeader|trans }}</h3>
                        {% if typeTwoPictogram is defined and typeTwoPictogram is not empty %}
                        <div class="mb-md">
                            {% include '@MauticCore/Components/pictogram.html.twig' with {
                                'pictogram': typeTwoPictogram,
                                'size': '64',
                                'color': 'var(--icon-interactive)'
                            } %}
                        </div>
                        {% endif %}
                        {% if typeTwoDescription is defined and typeTwoDescription is not empty %}
                            <div class="mb-md">{{ typeTwoDescription|trans }}</div>
                        {% endif %}

                        {% if typeTwoTag is defined and typeTwoTag is not empty %}
                            {% include '@MauticCore/Helper/_tag.html.twig' with {
                                'tags': [{
                                    'label': typeTwoTag,
                                    'color': 'brand'
                                }]
                            } %}
                        {% endif %}

                        {% if typeTwoDifferences is defined and typeTwoDifferences is not empty %}
                            <div class="layer-two mt-sm text-secondary">
                                {% include '@MauticCore/Components/list--styled.html.twig' with {
                                    'type': 'unordered',
                                    'style': 'none',
                                    'items': typeTwoDifferences
                                } %}
                            </div>
                        {% endif %}
                        {% endset %}

                        {% include '@MauticCore/Components/tile.html.twig' with {
                            'type': 'clickable',
                            'onclick': typeTwoOnClick,
                            'content': typeTwoContent,
                            'icon': typeTwoIconClass|default('')
                        } %}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
