{#
/**
 * Email Preview Modal JavaScript Partial
 *
 * Provides a reusable function to display email previews in a modal with iframe isolation.
 * This prevents email HTML/CSS from interfering with the admin interface.
 *
 * Automatically sets up event listeners for preview buttons when the DOM is ready.
 * Supported button class: .email-preview-btn
 *
 * Usage:
 *   1. Include this partial in the {% block js %} section of your template
 *   2. Add buttons with class="email-preview-btn" and data attributes:
 *      - data-email-subject: The email subject
 *      - data-email-content: The email HTML content
 *   3. Event listeners are automatically attached on DOMContentLoaded
 */
#}
<script>
/**
 * Escape HTML special characters to prevent XSS attacks
 * @param {string} str - The string to escape
 * @returns {string} - The escaped string
 */
function escapeHtml(str) {
    const div = document.createElement('div');
    div.textContent = str;
    return div.innerHTML;
}

/**
 * Escape HTML for use in HTML attribute values
 * Properly escapes all special characters that could break out of attribute context
 * @param {string} str - The string to escape
 * @returns {string} - The escaped string safe for attribute values
 */
function escapeHtmlAttribute(str) {
    return str
        .replace(/&/g, '&amp;')
        .replace(/"/g, '&quot;')
        .replace(/'/g, '&#39;')
        .replace(/</g, '&lt;')
        .replace(/>/g, '&gt;');
}

/**
 * Show email preview in a modal with iframe for proper HTML isolation
 * @param {string} subject - The email subject
 * @param {string} content - The email HTML content
 */
function showEmailPreview(subject, content) {
    const modalContent = `
        <div class="d-flex flex-column gap-4">
            <div>
                <h5 class="card-title mb-1">{{ "Subject"|trans }}</h5>
                <div class="text-secondary mb-2">{{ "Preview the rendered email subject line."|trans }}</div>
                <div class="border rounded p-3 bg-body-tertiary" style="min-height: 50px;">
                    ${escapeHtml(subject)}
                </div>
            </div>
            <div>
                <h5 class="card-title mb-1">{{ "Message Content"|trans }}</h5>
                <div class="text-secondary mb-2">{{ "Preview the rendered email body in an isolated frame."|trans }}</div>
                <div class="border rounded overflow-hidden bg-body-tertiary">
                    <iframe
                        style="width: 100%; min-height: 400px; border: none; display: block; background: white;"
                        sandbox="allow-popups"
                        srcdoc="${escapeHtmlAttribute(content)}"
                    ></iframe>
                </div>
            </div>
        </div>
    `;

    Modals.create({
        type: 'default',
        title: '{{ "Email Preview"|trans }}',
        content: modalContent,
        closeButton: '{{ "Close"|trans }}',
        extraClasses: 'modal-lg'
    });
}

// Auto-initialize event listeners for all email preview buttons
document.addEventListener('DOMContentLoaded', function() {
    document.querySelectorAll('.email-preview-btn').forEach(function(button) {
        button.addEventListener('click', function(e) {
            e.preventDefault();
            const subject = this.dataset.emailSubject;
            const content = this.dataset.emailContent;
            showEmailPreview(subject, content);
        });
    });
});
</script>
