{% load static sass_tags %}
<!doctype html>
<html>

<head>
	<meta charset="UTF-8">
	<title>{% block title %}Letter{% endblock %}</title>
	<link href="{% sass_src 'shop/css/bootstrap-print.scss' %}" rel="stylesheet" type="text/css" media="all" />
	<link href="{% sass_src 'shop/css/list-items.scss' %}" rel="stylesheet" type="text/css" media="all" />
	<style type="text/css">
		.page { position: relative; background: white; page-break-after: always; }
		.page header { font-size: 18pt; height: 25mm; padding: 7.5mm 15mm; border-bottom: 1mm solid #49b58c; top: 0; left: 0; right: 0; }
		.page main { padding: 0 15mm; }
		.page main .column { padding-left: 15px; padding-right: 15px; }
		.page footer { margin: 0; bottom: 0; left: 0; right: 0; height: 15mm; padding: 2.5mm 15mm; border-top: 1px solid #49b58c; }
		.page address { width: 80mm; height: 40mm; margin: 30mm 5mm 10mm; font-size: 15px; word-wrap: break-word; word-break: break-all; white-space: pre; border: 1px solid #fafafa; }
		.page address small { text-decoration: underline; }
		a[href], a[href]:hover { text-decoration: none; }
		@media screen {
			body { background-color: rgb(204, 204, 204); }
			.page { margin: 5mm auto; box-shadow: 0 0 5mm rgba(0,0,0,0.5);  width: 210mm; height: 297mm; }
			.page main { position: absolute; top: 25mm; right: 0; bottom: 15mm; left: 0; }
			.page footer, .page header { position: absolute; }
		}
		@media print {
			@page { size: A4 portrait; }
			body { background-color: white; color: black; }
			.page { margin: 0; box-shadow: none; }
			.page main { padding-top: calc(25mm / 1.25); zoom: 125%; }
			.page footer, .page header { position: fixed; }
			a[href]::after { content: none !important; }
		}
	{% block styles %}
		#page_template { width: 210mm; height: 297mm; display: none; }
		#page_template header { height: 25mm; }
		#page_template footer { height: 15mm; }
	{% endblock styles %}
	</style>
	<script type="text/javascript" src="{% static 'admin/js/vendor/jquery/jquery.min.js' %}"></script>
	<script type="text/javascript" src="{% static 'shop/js/admin/jquery.columnizer.js' %}"></script>
	<script type="text/javascript">
	$(function() {
		var page_height = $('#page_template').height();
		var header_height = $('#page_template header').height();
		var footer_height = $('#page_template footer').height();
		var main_height = page_height - header_height - footer_height;
		console.log("Main height: ", main_height);

		(function render_content() {
			if ($('#letter_content').contents().length > 0) {
				$page = $('#page_template').clone().addClass('page').removeAttr('id');
				$('body').append($page);
				$('#letter_content').columnize({
					columns: 1,
					target: '.page:last main',
					overflow: {
						id: '#letter_content',
						height: main_height,
						doneFunc: render_content
					}
				});
			} else {
				window.print();
			}
		})();
		$('#page_template').remove();
		$('#letter_content').remove();
	});
	</script>
</head>

<body>
	<div id="letter_content">
	{% block content %}<p>This is the content</p>{% endblock %}
	</div>
</body>

<div id="page_template">
	<header>
	{% block header %}<p>This is the header</p>{% endblock %}
	</header>
	<main><!-- rendered by function render_content() --></main>
	<footer>
	{% block footer %}<p>This is the footer</p>{% endblock %}
	</footer>
</div>

</html>
