{% extends 'mail_viewer/base.html' %}

{% load mail_viewer_tags %}
{% block 'title' %}Django Mail Viewer - Email Detail{% endblock 'title' %}
{% block 'css' %}
<style>
  body {height: 100%; margin: 0 5px}
  html {height: 100%}
		.header_info {
			height: 175px;
			margin-left: 10px;
		}
		.email__body {
			height: calc(100% - 175px);
		}
		.email__attachments {
			margin: 5px 0;
		}
		.tab_pane {
			border: none;
			margin: 0 auto;
			height: 100%;
			padding-right: 1px;
			overflow: scroll;
		}
		.tabs {
			list-style: none;
			padding: 0;
			margin: 10px 0 0;
			border-bottom: none;
			height: 27px;
		}

		.tabs li { display: inline; }
		.tabs li a {
			color: black;
			float: left;
			display: block;
			padding: 4px 10px;
			margin-left: -1px;
			position: relative;
			left: 1px;
			background: white;
			text-decoration: none;
			border: 1px solid black;
			border-bottom: none;
			border-radius: 5% 5% 0 0;
		}
		.tabs.active {
			background: #ccc;
		}
		.tabs li a:hover, .tabs li a.active { background: #ccc; }
		.tabs::after {
			content:"";
			display:table;
			clear:both;
		}

		.tabs__panes {
			height: calc(100% - 37px);
			border: 1px solid black;
			border-left: none;
			border-right: none;
			border-bottom: none;
		}

		.tab_pane.email__body--html > iframe {
			width: 100%;
			height: 100%;
			border: none;
			margin-bottom: 1px;
		}
		.tab_pane.email__body--text, .tab_pane.email__body--raw-html {
			padding: 5px 5px;
		}

		.wrapper {
			height: 100%;
		}
	</style>
	{% endblock 'css' %}
	{% block 'main_content' %}
	<div class="wrapper">
		<div class="header_info">
			<h3>{{ subject }}</h3>
			From: {{ sender }};<br>
			To: {{ to }}<br>
			CC: {{ message.cc }}<br>
			BCC: {{  message.bcc  }}<br>
			Sent on: {{ message.date }}<br>
			Content-Type: {% display_message_attribute message 'Content-Type' %}<br>
			Message-ID: {% display_message_attribute message 'Message-ID' %}<br>
		</div>
		<div class="email__body">
			<ul class="tabs">
				<li><a href="#" class="tab active" data-target=".email__body--html">HTML</a></li>
				<li><a href="#" class="tab" data-target=".email__body--raw-html">Raw HTML</a></li>
				<li><a href="#" class="tab" data-target=".email__body--text">Plain Text</a></li>
				<li><a href="#" class="tab" data-target=".email__attachments">Attachments</a></li>
			</ul>
			<div class="tabs__panes">
				<div class="tab_pane email__body--html">
					<iframe srcdoc="{{ html_body }}" sandbox></iframe>
				</div>
				<div class="tab_pane email__body--raw-html">
					<pre>{% if html_body %}{{ html_body }}{% endif %}</pre>
				</div>
        <div class="tab_pane email__body--text">
          <p>
            {{ text_body }}<br>
          </p>
        </div>
				<div class="tab_pane email__attachments">
					<ul>
						{% for attachment in attachments %}
							<li>
								<p>
									file: <a href="{% url 'mail_viewer_attachment' message_id=lookup_id attachment=forloop.counter0 %}">{{ attachment.filename }}</a><br>
									content-type: {{ attachment.content_type }}<br>
								</p>
							</li>
						{% empty %}
							<li>
								<p>No attachments</p>
							</li>
						{% endfor %}
					</ul>
				</div>
			</div>
		</div>
	</div>
	<script>
		(function () {
			var tabs = document.querySelectorAll('a.tab');
			var tabPanes = document.querySelectorAll('.tabs__panes > div');
			for(var i=0; i<tabs.length; i++) {
				tabs[i].onclick = function (e) {
					var target = document.querySelector(e.currentTarget.dataset.target);
					for(var x=0; x<tabs.length; x++) {
						tabs[x].classList.remove('active');
					}
					for(var x=0; x<tabPanes.length; x++) {
						tabPanes[x].style.display = "none";
					}
					target.style.display = "block";
					e.currentTarget.classList.add('active');
				};
			}

			// display only the first tab pane
			for(var i=1; i<tabPanes.length; i++) {
				tabPanes[i].style.display = "none";
			}
		})();
	</script>
	{% endblock 'main_content' %}
</body>
</html>