{% 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 {{SITE_TITLE}}
    </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 "g" is always available, with info about the user, wallets and
      extensions:
    </p>
    <code class="text-caption">{% raw %}{{ g }}{% 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 %}
