<!DOCTYPE html>
{% load alter_size %}
<html>
<head>
  <link rel="stylesheet" href="/static/css/fonts.css" />
  <style type="text/css">
body, html {
  margin: 0px;
  padding: 0px;
  font-size: {{ "14px"|make_really_big:m }}
  font-family: Helvetica, sans-serif;
  }

p {
  margin: 0px;
  padding: 0px;
}

em {
  font-style: italic;
}

.canvas {
  position: relative;
  height: {{ height|make_really_big:m }};
  width: {{ width|make_really_big:m }};
  font-size: {{ "12px"|make_really_big:m }};
  page-break-after: always;
  page-break-inside: avoid;
  overflow: hidden;
  }

.box {
  position: absolute;
  }

{% for p in pages %}

#page{{p.id}} {

  }

{% for t in p.textBoxes %}
#textbox{{p.id}}{{t.id}} {
  {% for prop, value in t.css.items %}
    {{prop}}: {{ value|make_really_big:m }};
  {% endfor %}
  }
{% endfor %}

{% for i in p.imageBoxes %}
#imagebox{{p.id}}{{i.id}} {
  {% for prop, value in i.css.items %}
    {{prop}}: {{ value|make_really_big:m }};
  {% endfor %}
  }

#imagebox{{p.id}}{{i.id}} img {
  height: {{ i.css.height|make_really_big:m }};
  width: {{ i.css.width|make_really_big:m }};
  }
{% endfor %}

{% endfor %}



  </style>

</head>

<body>
{% autoescape off %}
<div id="wrapper">
  <div id="articleWrapper">
    {% for p in pages %}
    <div class="canvas" id="page{{p.id}}">
    {% for t in p.textBoxes %}
      <div id="textbox{{p.id}}{{t.id}}" class="box textBox">
        {{t.html|parse_html:m}}
      </div>
    {% endfor %}
    {% for i in p.imageBoxes %}
      <div id="imagebox{{p.id}}{{i.id}}" class="box imageBox">
        <img src="{{i.resource.resized}}" />
      </div>
    {% endfor %}
    </div>
  {% endfor %}
  </div>
</div>
</body>
{% endautoescape %}
</html>
