<!--
This is intended to be rendered to a PDF using pisa, not in a browser.
Therefore, the HTML and CSS here can look a bit fishy. Please refer to
http://www.htmltopdf.org/doc/pisa-en.html for reference
-->
<html>
<style>
/*Custom fonts*/
/*@font-face {
    font-family: Weird, "Weird Font";
    src: url(test/weird.ttf)
}
@font-face {
    font-family: Akkurat;
    src: url(test/Akkurat.ttf)
}
@font-face {
    font-family: Akk;
    src: url(test/akk.otf)
}*/
/* Page layout */
@page {
    @frame {
        -pdf-frame-content: company_logo;
        /*-pdf-frame-border: 1;*/
        right: 3cm;
        width: 5cm;
        top: 1cm;
        height: 1cm;
    }
    @frame {
        -pdf-frame-content: address_sender;
        /*-pdf-frame-border: 1;*/
        right: 4cm;
        width: 5cm;
        top: 4cm;
        height: 3cm;
    }
    @frame {
        -pdf-frame-content: address_receiver;
        /*-pdf-frame-border: 1;*/
        left: 2cm;
        width: 5cm;
        top: 4cm;
        height: 3cm;
    }
    @frame {
        -pdf-frame-content: main_text;
        /*-pdf-frame-border: 1;*/
        right: 2cm;
        left: 2cm;
        top: 7cm;
        bottom: 5cm;
    }
    @frame {
        -pdf-frame-content: signature_left;
        /*-pdf-frame-border: 1;*/
        left: 2cm;
        width: 5cm;
        bottom: 1cm;
        height: 3cm;
    }
    @frame {
        -pdf-frame-content: signature_right;
        /*-pdf-frame-border: 1;*/
        right: 2cm;
        width: 5cm;
        bottom: 1cm;
        height: 3cm;
    }
}

h1, h2, h3, h4 { /* Don't add an outline to the document */
    -pdf-outline: false;
}

.border {
    border-top-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-right-width: 1px;

    border-top-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-right-style: solid;
}

.top_image {
    zoom: 80%;
}

</style>
<body>
<div id="company_logo">
    <img src='test/logo_main.png' class="top_image" />
</div>
<div id="address_sender" class="compact">
    Test Inc.<br />
    Test street 1<br />
    CH-8022 Zürich<br />
    Whatever<br />
</div>
<div id="address_receiver" class="compact">
    Line 1<br />
    Line 2<br />
    Line 3<br />
    Line 4<br />
</div>
<div id="main_text">
    <h1>{{object.username}}</h1>
    <div>
        <h3> Whatever </h3>
        <!-- cannot make borders span several p tags.... -->
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi pretium dignissim eros, posuere venenatis purus varius vitae. Suspendisse quis elit ligula. Cras vulputate metus vitae lectus iaculis nec adipiscing est fermentum. Praesent ac urna ante. Cras semper malesuada sapien at consectetur. Vivamus arcu sapien, dignissim sit amet mollis quis, scelerisque nec nibh. In hac habitasse platea dictumst. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam rutrum interdum felis, quis suscipit justo malesuada at. Mauris luctus justo id nulla placerat et pharetra mi interdum. Mauris rhoncus augue eu tortor luctus convallis. Nulla facilisi. Morbi ut arcu enim. Nullam in leo arcu, sed ultrices felis. Etiam scelerisque rhoncus ultrices. Nulla in elit ut dolor luctus semper. In eleifend consectetur eros, et pellentesque nulla vehicula non. Nam nec lorem ut dui pellentesque dapibus. Etiam condimentum vulputate lectus.</p>
        <p>Fusce tempus ullamcorper magna, vitae placerat ligula convallis eget. Phasellus sed ullamcorper felis. Vivamus sit amet purus eu mi pretium tempus. Aenean tristique purus id justo suscipit fringilla. Nam egestas felis non velit luctus volutpat. Aliquam interdum congue elementum. Mauris pulvinar fermentum nisl at dignissim. Ut ornare, dolor vitae consectetur iaculis, augue diam porttitor dolor, ut lobortis lorem sem a tellus. Praesent blandit sem in arcu hendrerit ornare. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin non nibh nulla, sed lacinia ante. In viverra congue sapien, ut aliquet justo sagittis vitae. Morbi dictum venenatis eros, et pulvinar enim pretium eu.</p>
    </div>
    <div>
        <p>Etiam metus nisl, porttitor et convallis sit amet, imperdiet non lectus. Nam nec tincidunt nibh. Nullam dignissim lacus nec nisi adipiscing id euismod nunc pretium. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris in velit risus. Nulla vulputate vehicula diam, eu porta dolor mattis id. Pellentesque sed lacus non erat pharetra dignissim. Aenean lorem tellus, volutpat vitae aliquet ac, imperdiet at risus. Etiam condimentum, quam tempor porttitor bibendum, metus magna hendrerit turpis, ac dapibus nisl leo id massa. In a nisi ante, id mollis ligula. Sed ante erat, ultricies id lacinia sit amet, sollicitudin nec eros. Phasellus sem elit, lobortis pharetra ullamcorper tempor, volutpat sed lorem. Donec sed suscipit velit. Integer tincidunt adipiscing enim, vitae placerat urna venenatis nec.</p>
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris nec nulla lorem. Sed cursus erat in dui mollis lobortis. Fusce interdum facilisis risus, sed pretium ligula suscipit vel. Duis tincidunt cursus ipsum et tristique. Sed placerat hendrerit pretium. Vestibulum porttitor porttitor faucibus. Aliquam erat volutpat. Nam elementum leo eu ante fringilla cursus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam eleifend odio a magna hendrerit congue. Sed in fermentum ligula. Maecenas interdum, velit ut bibendum sollicitudin, magna mauris cursus ligula, in condimentum neque nisl vitae dui. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec vel dignissim felis. Aenean vitae orci eu lacus ornare tristique eu nec neque. Etiam eleifend interdum mollis. Morbi id risus est, in vehicula nisi.</p>
        <p>Nunc vestibulum, lacus quis euismod posuere, nibh enim commodo tortor, eget suscipit sapien mauris quis tortor. Curabitur arcu velit, placerat non consectetur non, tristique in erat. Aliquam sagittis rhoncus mollis. In vitae tortor sapien. Pellentesque ac augue ullamcorper eros fringilla vehicula. Donec lectus urna, sodales quis sollicitudin vitae, bibendum nec ante. Etiam tortor enim, pretium in pulvinar vel, tincidunt non mauris. Nullam leo elit, varius eu pretium at, adipiscing sit amet sapien. Mauris aliquet, augue id sollicitudin viverra, nunc neque gravida arcu, ut pharetra lacus nibh quis lacus. Sed imperdiet rhoncus sapien eu accumsan. Pellentesque nec mi id mauris consequat placerat. Nunc tempus tristique justo sit amet sollicitudin. Phasellus accumsan, tellus sit amet dictum ultricies, dui nulla fermentum eros, quis venenatis sapien leo sit amet est. Sed et turpis justo. Fusce eget tellus sollicitudin sem elementum tempor. Aliquam ac nisi justo, vulputate feugiat leo. Phasellus non nulla ullamcorper arcu laoreet ornare. Suspendisse tristique volutpat auctor. </p>
    </div>
</div>
<div id="signature_right">
    <h1>Signature right</h1>
</div>
<div id="signature_left">
    <h1><pdf:barcode value="abc-1234-5678" type="code126" humanreadable="1" align="baseline" /></h1>
</div>
</body>
</html>
