{% import '@A2lixTranslationForm/macros_bootstrap_3.html.twig' as a2lixTranslations %}

<button
    type="button"
    class="btn btn-default btn-rounded"
    data-toggle="modal"
    data-target="#{{ modal_id }}"
>
    <i class="fas fa-heading" aria-hidden="true"></i>
    {{ title_key|trans }}
</button>

<div class="modal fade" id="{{ modal_id }}" tabindex="-1" role="dialog" aria-labelledby="{{ modal_id }}Title">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="{{ 'marketing.test_email.cancel'|trans }}">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="{{ modal_id }}Title">{{ title_key|trans }}</h4>
            </div>
            <div class="modal-body">
                <div class="alert alert-info">{{ help_key|trans }}</div>
                {{ a2lixTranslations.partialTranslations(translations_form, fields) }}
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal">
                    {{ 'marketing.email_title_modal.done'|trans }}
                </button>
            </div>
        </div>
    </div>
</div>
