<!DOCTYPE html>

<html lang="en">
  <head>
    {% for url in g.VENDORED_CSS %}
    <link rel="stylesheet" type="text/css" href="{{ url }}" />
    {% endfor %}
    <!---->
    <link rel="stylesheet" type="text/css" href="/static/css/base.css" />
    {% block styles %}{% endblock %}
    <title>
      {% block title %} {% if SITE_TITLE != 'LNbits' %}{{ SITE_TITLE }}{% else
      %}LNbits{% endif %} {% 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>
    <q-layout id="vue" view="hHh lpR lfr" v-cloak>
      <q-header bordered class="bg-lnbits-dark">
        <q-toolbar>
          {% block drawer_toggle %}
          <q-btn
            dense
            flat
            round
            icon="menu"
            @click="g.visibleDrawer = !g.visibleDrawer"
          ></q-btn>
          {% endblock %}
          <q-toolbar-title>
            {% block toolbar_title %} {% if SITE_TITLE != 'LNbits' %} {{
            SITE_TITLE }} {% else %}
            <strong>LN</strong>bits {% endif %} {% endblock %}
          </q-toolbar-title>
          {% block beta %}
          <q-badge color="yellow" text-color="black">
            <span
              ><span v-show="$q.screen.gt.sm"
                >USE WITH CAUTION - LNbits wallet is still in </span
              >BETA</span
            >
          </q-badge>
          {% endblock %}
          <q-btn
            dense
            flat
            round
            @click="toggleDarkMode"
            :icon="($q.dark.isActive) ? 'brightness_3' : 'wb_sunny'"
            class="q-ml-lg"
            size="sm"
          >
            <q-tooltip>Toggle Dark Mode</q-tooltip>
          </q-btn>
        </q-toolbar>
      </q-header>

      {% block drawer %}
      <q-drawer
        v-model="g.visibleDrawer"
        side="left"
        :width="($q.screen.lt.md) ? 260 : 230"
        show-if-above
        :elevated="$q.screen.lt.md"
      >
        <lnbits-wallet-list></lnbits-wallet-list>
        <lnbits-extension-list class="q-pb-xl"></lnbits-extension-list>
      </q-drawer>
      {% endblock %} {% block page_container %}
      <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>
      {% endblock %} {% block footer %}
      <q-footer
        class="bg-transparent q-px-lg q-py-md"
        :class="{'text-dark': !$q.dark.isActive}"
      >
        <q-toolbar>
          <q-toolbar-title class="text-caption">
            <strong>LN</strong>bits, free and open-source lightning
            wallet/accounts system
          </q-toolbar-title>
          <q-space></q-space>
          <q-btn
            flat
            dense
            :color="($q.dark.isActive) ? 'white' : 'deep-purple'"
            icon="code"
            type="a"
            href="https://github.com/lnbits/lnbits"
            target="_blank"
            rel="noopener"
          >
            <q-tooltip>View project in GitHub</q-tooltip>
          </q-btn>
        </q-toolbar>
      </q-footer>
      {% endblock %}
    </q-layout>

    {% block vue_templates %}{% endblock %}
    <!---->
    {% for url in g.VENDORED_JS %}
    <script src="{{ url }}"></script>
    {% endfor %}
    <!---->
    <script src="/static/js/base.js"></script>
    <script src="/static/js/components.js"></script>
    {% block scripts %}{% endblock %}
  </body>
</html>
