{% extends "print.html" %} {% block page %}

<div class="row justify-center">
  <div class="col-12 col-sm-8 col-lg-6 text-center" id="vue">
    {% for page in link %}
    <page size="A4" id="pdfprint">
      <table style="width: 100%">
        {% for threes in page %}
        <tr style="height: 59.4mm">
          {% for one in threes %}
          <td style="width: 105mm">
            <center>
              <qrcode
                :value="theurl + '/?lightning={{one}}'"
                :options="{width: 150}"
              ></qrcode>
            </center>
          </td>
          {% endfor %}
        </tr>
        {% endfor %}
      </table>
    </page>
    {% endfor %}
  </div>
</div>
{% endblock %} {% block styles %}
<style>
  body {
    background: rgb(204, 204, 204);
  }
  page {
    background: white;
    display: block;
    margin: 0 auto;
    margin-bottom: 0.5cm;
    box-shadow: 0 0 0.5cm rgba(0, 0, 0, 0.5);
  }
  page[size='A4'] {
    width: 21cm;
    height: 29.7cm;
  }
  @media print {
    body,
    page {
      margin: 0;
      box-shadow: 0;
    }
  }
</style>
{% endblock %} {% block scripts %}
<script>
  Vue.component(VueQrcode.name, VueQrcode)

  new Vue({
    el: '#vue',
    data: function () {
      return {
        theurl: location.protocol + '//' + location.host,
        printDialog: {
          show: true,
          data: null
        }
      }
    }
  })
</script>
{% endblock %}
