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

<head>
	<meta charset="UTF-8">
	<title>{% block title %}Letter{% endblock %}</title>
	<link rel="stylesheet" href="{% static 'shop/css/bootstrap-print.css' %}">
	<style type="text/css">
		.page { position: relative; background: white; page-break-after: always; }
		.page .header { text-align: center; font-size: 18pt; padding: 7.5mm 0 0; }
		.page .header hr { margin: 5mm 0 1mm; border-width: 2mm; }
		.page .content { padding: 0 20mm 0 25mm; }
		.page .footer { text-align: center; position: absolute; bottom: 0; left: 0; right: 0; }
		.page .footer hr { margin: 1mm 0 5mm; border-color: #1a1a1a; }
		.page address { width: 80mm; height: 40mm; margin-bottom: 10mm; font-size: 15px; word-wrap: break-word; word-break: break-all; white-space: pre; }
		.page address small { text-decoration: underline; }
		/* use aside only in combination with address */
		.page aside { position: absolute; top: 50mm; right: 10mm; text-align: right; font-size: 11px; }
		@media screen {
			body { background-color: rgb(204,204,204); }
			.page { margin: 5mm auto; box-shadow: 0 0 5mm rgba(0,0,0,0.5); }
		}
		@media print {
			body { background-color: white; color: black; }
			.page { margin: 0; box-shadow: 0; }
			a[href]:after { content: none !important; }
		}
		/* to remove header and footer when printing */
		@page { margin: 0; size: auto; }
	{% block styles %}
		#page_template { width: 210mm; height: 296mm; display: none; }
		#page_template .header { height: 30mm; }
		#page_template .footer { height: 20mm; }
	{% 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_width = $('#page_template').width(), page_height = $('#page_template').height();
		var header_height = $('#page_template .header').height(), footer_height = $('#page_template .footer').height();
		var content_height = page_height - header_height - footer_height;
		var pixel2mm_ratio = page_height / 296;
		console.log(pixel2mm_ratio);

		function render_content() {
			var $address;
			if ($('#letter_content').contents().length > 0) {
				$page = $("#page_template").clone().addClass("page").removeAttr("id");
				$page.css({width: page_width, height: page_height});
				$page.find('.header').css('height', header_height);
				$address = $('#letter_content').find('address');
				if ($address) {
					// reposition the address at 45mm from the top edge of the page
					$address.css('margin-top', pixel2mm_ratio * 45 - header_height);
				}
				$page.find('.content').css('height', content_height);
				$page.find('.footer').css('height', footer_height);
				$("body").append($page);
				$('#letter_content').columnize({
					columns: 1,
					target: ".page:last .content",
					overflow: {
						height: content_height,
						id: "#letter_content",
						doneFunc: render_content
					}
				});
			} else {
				window.print();
			}
		}
		render_content();
	});
	</script>
</head>

<body>
	<div id="page_template">
		<div class="header">{% block header %}This is a header<hr>{% endblock %}</div>
		<div class="content"><!-- rendered by function render_content() --></div>
		<div class="footer">{% block footer %}<hr>This is the footer{% endblock %}</div>
	</div>

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

</html>
