{% extends "oscar/communication/email/email_detail.html" %}

{% load i18n %}

{% block tabcontent %}
<div class="row">
    <div class="col-xl-5">
        <table class="table table-card">
            <tr>
                <th><small>{% trans 'Date sent' %}</small></th>
                <td>{{ email.date_sent }}</td>
            </tr>
            <tr>
                <th><small>{% trans 'Subject' %}</small></th>
                <td>{{ email.subject }}</td>
            </tr>
        </table>
    </div>
    <div class="col-xl-7">
        <iframe id="preview_box" width="100%" height="800">{{ email.body_html|safe }}</iframe>
    </div>
</div>
{% endblock tabcontent %}

{% block onbodyload %}
{{ block.super }}

$(function() {
    // Sets the HTML email preview so it's css doesn't touch the page.
    var el_preview_html = document.getElementById('preview_box');
    var html = $(el_preview_html).text();
    var doc = el_preview_html.contentWindow.document;
    doc.open();
    doc.write(html);
    doc.close();
});
{% endblock %}