File: templates/ads/ad_modal.twig

<div class="modal fade" id="{{ modal_id }}" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">{{ t('ui.ads.advertisement', {}, locale, ['common']) }}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{{ t('ui.common.close', {}, locale, ['common']) }}"></button>
            </div>
            <div class="modal-body">
                {% if ad %}
                    <div id="{{ modal_id }}AdContainer" class="w-100" data-ad-content="{{ ad.content|e('html_attr') }}"></div>
                {% else %}
                    <p class="text-muted mb-0">{{ t('ui.ads.none_available', {}, locale, ['common']) }}</p>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<script src="/js/ansisys.js"></script>
<script src="/js/sixel.js"></script>
<script src="/js/pcboard.js"></script>
<script>
document.addEventListener('DOMContentLoaded', () => {
    const modalEl = document.getElementById('{{ modal_id }}');
    if (!modalEl) {
        return;
    }

    modalEl.addEventListener('shown.bs.modal', () => {
        const container = document.getElementById('{{ modal_id }}AdContainer');
        if (!container || container.dataset.rendered) {
            return;
        }
        container.dataset.rendered = 'true';
        const content = container.dataset.adContent || '';
        if (typeof renderAdContent === 'function') {
            renderAdContent(container, content);
        }
    });
});
</script>