<!doctype html>

<html lang="en">
  <head>
    {% for url in INCLUDED_CSS %}
    <link
      rel="stylesheet"
      type="text/css"
      href="{{ static_url_for('static', url) }}"
    />
    {% endfor %}
    <style>
      @page {
        size: A4 portrait;
      }
      body {
        font-family:
          Roboto,
          -apple-system,
          Helvetica Neue,
          Helvetica,
          Arial,
          sans-serif;
      }
    </style>
    {% block styles %}{% endblock %}
    <title>{% block title %}{{ SITE_TITLE }}{% endblock %}</title>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    {% block head_scripts %}{% endblock %}
  </head>

  <body>
    <div id="vue">
      <q-layout view="hHh lpR lfr" v-cloak>
        <q-page-container>
          <q-page class="q-px-md q-py-lg" :class="{'q-px-lg': $q.screen.gt.xs}">
            {% block page %}{% endblock %}
          </q-page>
        </q-page-container>
      </q-layout>
    </div>

    {% include('components.vue') %}{% block vue_templates %}{% endblock %} {%
    for url in INCLUDED_JS %}
    <script src="{{ static_url_for('static', url) }}"></script>
    {% endfor %}
    <script>
      const LNBITS_QR_LOGO = {{ LNBITS_QR_LOGO | tojson }}
    </script>
    <!---->
    {% block scripts %}{% endblock %} {% for url in INCLUDED_COMPONENTS %}
    <script src="{{ static_url_for('static', url) }}"></script>
    {% endfor %}
  </body>
</html>
