{% extends "admin/change_form.html" %}

{% load i18n static %}

{% block extrastyle %}
{{ block.super }}
<link rel="stylesheet" type="text/css" href="{% static "django_email_log/css/admin.css" %}" />
{% endblock %}

{% block object-tools %}{% endblock %}
{% block content_title %}{% if adminform.form.instance.pk %}<h1>{{ adminform.form.instance.subject }}</h1>{% else %}{{ block.super }}{% endif %}{% endblock %}

{% block field_sets %}
{{ block.super }}
{% with object=adminform.form.instance %}
{% if object.pk %}
	<a id="alternative_open" href="#">{% trans "Open in new window" context "email message" %}</a>

	<ul id="alternatives_switch" class="nav nav-tabs">
		{% spaceless %}
			{% for ctype, alternative in object.parsed_message.alternatives_annotated %}
				<li><a href="{{ alternative.alternative_url }}">{{ ctype }}</a></li>
			{% endfor %}
			{% for alternative in object.alternatives %}
				<li>
					<a href="{{ alternative.alternative_url }}">{% if alternative.filename %}{{ alternative.filename }}{% else %}{{ alternative.content_type }}{% endif %}</a>
				</li>
			{% endfor %}
			<li><a href="{% url "django_email_log_attachment" "alternative" object.pk %}">data</a></li>
		{% endspaceless %}
	</ul>

	<fieldset class="module">
		<h2>{% trans "E-mail structure" context "email message" %}</h2>
		<div class="email-log-parts">
			<ul>
				{% include "admin/django_email_log/email/part_tree.html" with tree=object.payload_tree %}
			</ul>
		</div>
	</fieldset>
{% endif %}
{% endwith %}

<script charset="utf-8">
//<![CDATA[

(function() {

var ap = Array.prototype;

function bindEvent(element, name, fn) {
	element.addEventListener(name, fn, false);
}

function unbindEvent(element, name, fn) {
	element.removeEventListener(name, fn, false);
}

function q(selector, element) {
	if (element === undefined) {
		element = document;
	}
	return element.querySelector(selector);
}

function qa(sel, element, include_self) {
	if (element === undefined) {
		element = document;
	}
	var elements = ap.slice.call(element.querySelectorAll(sel));
	if (include_self) {
		if (element.matches(sel)) {
			elements.unshift(element);
		}
	}
	return elements;
}


function onSwitchClicked(e) {
	if (e.which !== 1) {
		return;
	}
	var target = e.target;
	if (!target.getAttribute('href')) {
		return;
	}
	showAlternative(target);
	e.preventDefault();
}


function showAlternative(link) {
	var url = link.getAttribute('href');
	qa('.active', alternativesSwitch).forEach(function(element) { element.classList.remove('active'); });
	link.parentNode.classList.add('active');
	iframe.style.display = 'block';
	iframe.setAttribute('src', url);
	alternativeOpen.setAttribute('href', url);
	alternativeOpen.style.display = 'block';
}


function onOpenClicked(e) {
	if (e.which !== 1) {
		return;
	}
	e.preventDefault();
	var url = alternativeOpen.getAttribute('href');
	var win = window.open(undefined, '', 'width=400,height=600');
	win.document.write('<!DOCTYPE html><html><head><title></title><link rel="stylesheet" type="text/css" href="{% static "django_email_log/css/admin.css" %}" /></head><body class="frame"></body></html>');

	var iframe = win.document.createElement('iframe');
	win.document.body.appendChild(iframe);
	iframe.className = 'alternative';
	iframe.setAttribute('sandbox', '');
	iframe.setAttribute('src', url);
}


var alternativesSwitch = q("#alternatives_switch");
var alternativeOpen = q("#alternative_open");
var firstAlternative = alternativesSwitch.firstElementChild;

var alternativeContainer = document.createElement('div');
var iframe = document.createElement('iframe');
iframe.style.display = 'none';
iframe.className = 'alternative';
iframe.setAttribute('sandbox', '');
alternativeContainer.appendChild(iframe);

alternativesSwitch.parentNode.insertBefore(alternativeContainer, alternativesSwitch.nextSibling);

if (firstAlternative !== null) {
	showAlternative(firstAlternative.firstElementChild);
}
bindEvent(alternativesSwitch, 'click', onSwitchClicked);
bindEvent(alternativeOpen, 'click', onOpenClicked);


}());

//]]>
</script>
{% endblock %}
