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


{% load i18n %}

{% block extra_breadcrumbs %}
    <li>
        <a href="{% url 'customer:email-list' %}">{% trans 'Email history' %}</a>
    </li>
{% endblock %}

{% block tabcontent %}
    <table class="table table-striped table-bordered">
        <tr>
            <th>{% trans 'Date sent' %}</th>
            <td>{{ email.date_sent }}</td>
        </tr>
        <tr>
            <th>{% trans 'Subject' %}</th>
            <td>{{ email.subject }}</td>
        </tr>
        <tr>
            <th>{% trans 'Body' %}</th>
            <td><pre>{{ email.body_text }}</pre></td>
        </tr>
        <tr>
            <th>{% trans 'Body HTML' %}</th>
            <td>
                <iframe id="preview_box" width="100%" height="400">{{ email.body_html|safe }}</iframe>
            </td>
        </tr>
    </table>
{% 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 %}