{% extends "base.html" %}

{% from "macros.jinja" import window_vars with context %}


{% block page %}
  <q-card>
    <q-card-section>
      <h5 class="text-subtitle1 q-mt-none q-mb-md">Frameworks used by LNbits</h5>
      <q-list>
        <q-item v-for="tool in tools" :key="tool.name" tag="a" :href="tool.url" target="_blank">
          {% raw %} <!-- with raw Flask won't try to interpret the Vue moustaches -->
            <q-item-section>
              <q-item-label>{{ tool.name }}</q-item-label>
              <q-item-label caption>{{ tool.language }}</q-item-label>
            </q-item-section>
          {% endraw %}
        </q-item>
      </q-list>
      <q-separator class="q-my-lg"></q-separator>
      <p>A magical "w" is always available, with info about the user, wallets and extensions:</p>
      <code class="text-caption">{% raw %}{{ w }}{% endraw %}</code>
    </q-card-section>
  </q-card>
{% endblock %}

{% block scripts %}
  {{ window_vars(user) }}
  <script>
    new Vue({
      el: '#vue',
      mixins: [windowMixin],
      data: function () {
        return {
          tools: []
        };
      },
      created: function () {
        var self = this;

        // axios is available for making requests
        axios({
          method: 'GET',
          url: '/example/api/v1/tools',
          headers: {
            'X-example-header': 'not-used'
          }
        }).then(function (response) {
          self.tools = response.data;
        });
      }
    });
  </script>
{% endblock %}