{% import "qr_slip_snippet.html" as qr_slip_snippet %}
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Empfangsschein</title>
</head>
<body>
{% set count = 0 %}
{% for qr_data in qr_data_vec %}
{% set qr_code = qr_code_vec[loop.index0] %}
{{qr_slip_snippet::slip(qr_data=qr_data, qr_code=qr_code)}}
{% set count = count + 1 %}
{% if count is not odd %}
<div style="page-break-before: always;"></div>
{% endif %}
{% endfor %}
</body>
<style>
    @page {
        margin: 5mm;
    }

    body {
        font-family: Frutiger, Arial, Helvetica, Liberation Sans;
        line-height: 0;
    }

    h1 {
        font-weight: bold;
        font-size: 14.19pt;
    }

    h3 {
        font-weight: bold;
        font-size: 10.32pt;
    }

    h4 {
        font-weight: bold;
        font-size: 7.74pt;
    }

    p {
        font-size: 7.74pt;
        line-height: 1.29pt;
    }
/*
    .receipt-payable-by {
        width: 52mm;
        height: 20mm;
    }

    .receipt-currency-amount {
        width: 30mm;
        height: 10mm;
    }

    .payment-currency-amount {
        width: 40mm;
        height: 15mm;
    }

    .payment-payable-by {
        width: 65mm;
        height: 25mm;
    }

    .corners {
        color: #000;
        box-sizing: content-box;
        border: 0.75pt solid transparent;
    }

    .corners::before, .corners::after, span::before, span::after {
        display: block;
        content: "";
        width: 3mm;
        height: 3mm;
    }

    .corners::before {
        top: -0.75pt;
        left: -0.75pt;
        border-top: 0.75pt solid #000;
        border-left: 0.75pt solid #000;
    }

    .corners::after {
        top: -0.75pt;
        right: -0.75pt;
        border-top: 0.75pt solid #000;
        border-right: 0.75pt solid #000;
    }

    span::before {
        bottom: -0.75pt;
        left: -0.75pt;
        border-bottom: 0.75pt solid #000;
        border-left: 0.75pt solid #000;
    }

    span::after {
        bottom: -0.75pt;
        right: -0.75pt;
        border-bottom: 0.75pt solid #000;
        border-right: 0.75pt solid #000;
    }

*/
    #rightPart br {
        line-height: 14.19pt;
    }
    #rightPart{
        margin-left: 6.45mm;
        width: 112.23mm;
    }
    #leftPart br {
        line-height: 11.61pt;
    }

    .clear {
        clear: left;
    }

    #receiptCurrencyTitle, #receiptCurrencyAmount, #paymentCurrencyAmount, #paymentCurrencyTitle {
        width: 50%;
        height: 18.06mm;
    }

    #middlePart {
        padding-left: 3.225mm;
        width: 65.79mm;
    }

    #slip, #leftPart, #rightPart, #middlePart, #receiptCurrencyTitle, #receiptCurrencyAmount, #cutVertical,
    #paymentCurrencyTitle, #paymentCurrencyAmount {
        float: left;
    }

    #slip {
        width: 270.9mm;
        height: 135.45mm;
        /*margin-top: 248.3mm;*/
        margin-top: 245.347mm;
    }

    #cutHorizontal {
        width: 270.9mm;
        /*height: 7.74mm;*/
        height: 9.675mm;
        margin-top: -1.29mm;
    }

    #cutVertical {
        /*margin-top: -3.16mm;*/
        margin-top: -2.7mm;
        margin-left: -4mm;
    }

    #cutVertical svg {
        height: 135.45mm;
        /*height: 137.385mm;*/
        width: 6.45mm;
    }

    #leftPart {
        width: 67.08mm;
        height: 129mm;
        padding-left: 6.45mm;
        margin-right: 6.45mm;
    }

    #receiptAccount {
        height: 72.24mm;
    }

    #receiptTitle, #paymentTitle {
        height: 9.03mm;
    }

    #receiptAcceptancePoint {
        text-align: right;
        height: 23.22mm;
    }

    #paymentQrCode {
        height: 75.465mm;
    }

    #receiptAcceptancePoint {
        margin-right: 6.45mm;
    }

    .payment-part-data {
        font-size: 12.9pt;
    }

    #paymentQrCode svg {
        width: 72.24mm;
        height: 72.24mm;
        margin-left: -3.225mm;
        z-index: -1;
    }

    .clear-both {
        clear: both;
    }
</style>
</html>