<!DOCTYPE html>
<html>
<head>
{%- block head %}
<meta charset="UTF-8">
<style type="text/css">
table {
    border-collapse: collapse;
    width: 100%;
}
table, td, th {
    border: 1px solid black;
    padding: 2pt;
}
table.preamble {
    border: none;
    background-color: lightblue;
    width: 100%;
}
table.preamble td {
    border: none;
    padding: 6pt;
}
table.footer {
    border: none;
    background-color: lightgreen;
    width: 100%;
    font-size: 10pt;
}
table.footer td {
    border: none;
    padding: 6pt;
}
span.page_num_of::after {
  content: '{{_("Page")}} ' counter(page) ' {{_("of {0}").format("")}} ' counter(pages);
}

span.printed_time::after {
  content: '{{_("Printed")}} {{fdm(dd.today())}} {{_("at")}} {{now.time().strftime("%H:%M")}}';
}

body {
    font-family: "Liberation sans", "Arial", "Helvetica";
    font-size: 12pt;
}

table th {
    font-size: 10pt;
}
p {
    padding: 0;
    margin: 0;
}

div.recipient {
    position:relative; left:80mm;
    height:30mm;
    width:80mm;
    border: 1px solid grey;
    padding: 1em;
    margin: 1em;
}

.text-cell {
    text-align: left;
    vertical-align: top;
}

.number-cell {
    text-align: right;
    vertical-align: top;
}

@page {
    size: {%- block pagesize %}landscape{%- endblock %};
    margin: {{dd.plugins.weasyprint.margin}}mm;
    margin-bottom: {{dd.plugins.weasyprint.margin+dd.plugins.weasyprint.footer_height}}mm;
    {%- if dd.plugins.weasyprint.top_right_image -%}
    margin-top: {{dd.plugins.weasyprint.margin+dd.plugins.weasyprint.header_height}}mm;
    {%- endif -%}
    margin-left: {{dd.plugins.weasyprint.margin_left}}mm;
    font-family: "Liberation sans", "arial";
    font-size: 10pt;
    {%- block bottomleft %}
    @bottom-left {
        vertical-align: top;
        content: '{{_("Printed")}} {{fdm(dd.today())}} {{_("at")}} {{now.time().strftime("%H:%M")}}';
    }
    {%- endblock bottomleft %}
    {%- block bottomright %}
    @bottom-right {
        vertical-align: top;
        content: '{{_("Page")}} ' counter(page) ' {{_("of {0}").format("")}} ' counter(pages);
    }
    {%- endblock bottomright %}

    {%- block topright %}
    {% if dd.plugins.weasyprint.top_right_image %}
    @top-right {
      height: {{dd.plugins.weasyprint.header_height}}mm;
      width: {{dd.plugins.weasyprint.top_right_width}}mm;
      padding: 0mm;
      text-align: right;
      background-image: url(file://{{dd.plugins.weasyprint.top_right_image}});
      background-size: cover;
      content: "";  // may be empty but must exist, otherwise bg is not rendered
      // content: url(file://{{dd.plugins.weasyprint.top_right_image}});
    }
    {% endif %}
    {%- endblock topright %}
}

@media print {
  tr.avoid {
    page-break-inside: avoid !important;
  }
}

@media screen {
    div.footer_div {
        display: none;
    }
    div.header_div {
        display: none;
    }
}
@media print {
    div.footer_div {
        position: fixed;
        // bottom: -5mm;
        bottom: 0;
        width: 100%;
        // border-top: solid 1pt;
        padding: 2pt;
        margin: 0;
    }
    div.header_div {
        position: fixed;
        // top: -10mm;
        top: 0;
        width: 100%;
        // border-bottom: solid 1pt;
        padding: 0;
        margin: 0;
        // height:21mm;
    }
}
</style>
{%- endblock head %}
</head>
<body>
{%- block header %}
{% if dd.plugins.weasyprint.header_image %}
<div class="header_div">
<img src="file://{{dd.plugins.weasyprint.header_image}}" style="height:{{dd.plugins.weasyprint.header_height}}mm">
</div>
{% endif %}
{%- endblock header %}
{%- block footer %}
{%- endblock %}
{%- block intro %}
{%- endblock %}
{%- block main %}
<p>Your template should at least override the <b>main</b> block,
   and it should not call super() for this block.</p>
<p>Available fields in <em>{{str(obj.__class__)}}</em>:</p>
<ul>
{% for fld in obj._meta.get_fields() %}
<li>{{fld.verbose_name}} : {{getattr(obj, fld.name, "---")}}</li>
{% endfor %}
</ul>
{%- endblock %}
</body>
</html>
