{# Zahlteil + Empfangsschein gemäss SIX Style Guide QR-Rechnung:
   210×105mm am Seitenende, Empfangsschein 62mm / Zahlteil 148mm,
   Zonen ES 7/56/14/18mm, ZT linke Spalte 51mm (QR 46mm, Ruhezone 5mm),
   Angaben-Spalte 87mm, Schriften ES 6/8pt, ZT 8/10pt, Titel 11pt.
   Begriffe in der Dokumentsprache (offizielle SIX-Übersetzungen in lang/). #}
{% set dl = inv.language or 'de' if inv else 'de' %}
<div class="qr-part">
  <span class="qr-scissors-h">✂</span>
  <span class="qr-scissors-v">✂</span>
  <div class="qr-receipt">
    <div class="qr-title">{{ tr(dl, 'Empfangsschein') }}</div>
    <div class="qr-info">
      <div class="qr-label qr-first">{{ tr(dl, 'Konto / Zahlbar an') }}</div>
      <div class="qr-value">{{ qr.account_fmt }}<br>{{ qr.creditor_name }}<br>{{ qr.creditor_address|nl2br }}</div>
      {% if qr.reference_fmt %}
      <div class="qr-label">{{ tr(dl, 'Referenz') }}</div>
      <div class="qr-value">{{ qr.reference_fmt }}</div>
      {% endif %}
      <div class="qr-label">{{ tr(dl, 'Zahlbar durch') }}</div>
      <div class="qr-value">{{ qr.debtor_name }}<br>{{ qr.debtor_address|nl2br }}</div>
    </div>
    <div class="qr-amounts">
      <div><div class="qr-label qr-first">{{ tr(dl, 'Währung') }}</div><div class="qr-value">CHF</div></div>
      <div><div class="qr-label qr-first">{{ tr(dl, 'Betrag') }}</div><div class="qr-value">{{ qr.amount_rp|chf_qr }}</div></div>
    </div>
    <div class="qr-acceptance">{{ tr(dl, 'Annahmestelle') }}</div>
  </div>
  <div class="qr-payment">
    <div class="qr-payment-left">
      <div class="qr-title">{{ tr(dl, 'Zahlteil') }}</div>
      <div class="qr-code-box">
        {{ qr.svg|safe }}
        {# Schweizer Kreuz: offizielle Geometrie (19.8er-Raster, weisse Randung ~8.5%) #}
        <svg class="qr-cross" viewBox="0 0 19.8 19.8"><rect width="19.8" height="19.8" fill="#fff"/><rect x="1.44" y="1.44" width="16.92" height="16.92" fill="#000"/><rect x="8.25" y="4.4" width="3.3" height="11" fill="#fff"/><rect x="4.4" y="8.25" width="11" height="3.3" fill="#fff"/></svg>
      </div>
      <div class="qr-amounts">
        <div><div class="qr-label qr-first">{{ tr(dl, 'Währung') }}</div><div class="qr-value">CHF</div></div>
        <div><div class="qr-label qr-first">{{ tr(dl, 'Betrag') }}</div><div class="qr-value">{{ qr.amount_rp|chf_qr }}</div></div>
      </div>
    </div>
    <div class="qr-payment-right">
      <div class="qr-label qr-first">{{ tr(dl, 'Konto / Zahlbar an') }}</div>
      <div class="qr-value">{{ qr.account_fmt }}<br>{{ qr.creditor_name }}<br>{{ qr.creditor_address|nl2br }}</div>
      {% if qr.reference_fmt %}
      <div class="qr-label">{{ tr(dl, 'Referenz') }}</div>
      <div class="qr-value">{{ qr.reference_fmt }}</div>
      {% endif %}
      {% if qr.message %}
      <div class="qr-label">{{ tr(dl, 'Zusätzliche Informationen') }}</div>
      <div class="qr-value">{{ qr.message }}</div>
      {% endif %}
      <div class="qr-label">{{ tr(dl, 'Zahlbar durch') }}</div>
      <div class="qr-value">{{ qr.debtor_name }}<br>{{ qr.debtor_address|nl2br }}</div>
    </div>
  </div>
</div>