<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="format-detection" content="telephone=no">
    <meta name="msapplication-tap-highlight" content="no">
    <meta name="viewport" content="user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1,width=device-width">

    <title>Quasar UMD test</title>
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons" rel="stylesheet" type="text/css">
    <link href="dist/quasar.css" rel="stylesheet" type="text/css">
  </head>
  <body>
    <div id="q-app">
      <q-layout view="lHh Lpr fff">
        <q-header class="glossy bg-primary">
          <q-toolbar>
            <q-btn flat round dense @click="drawerState = !drawerState" icon="menu"></q-btn>

            <q-toolbar-title>
              Quasar App
            </q-toolbar-title>

            <q-btn
              class="q-mx-md"
              type="a"
              href="./index-multiapp.umd.html"
              outline
              color="white"
              icon="launch"
              label="To Multi-App"
              no-caps
            ></q-btn>

            <div>Quasar v{{ $q.version }} | Vue v{{ vueVersion }}</div>
          </q-toolbar>
        </q-header>

        <q-drawer
          v-model="drawerState"
          bordered
          show-if-above
          class="bg-grey-2"
        >
          <q-list>
            <q-item-label header>Essential Links</q-item-label>
            <q-item clickable @click="launchUrl">
              <q-item-section avatar>
                <q-icon name="school"></q-icon>
              </q-item-section>
              <q-item-section>
                <q-item-label>Docs (openURL)</q-item-label>
                <q-item-label caption>quasar.dev</q-item-label>
              </q-item-section>
            </q-item>
            <q-item clickable tag="a" target="_blank" href="https://github.com/quasarframework/">
              <q-item-section avatar>
                <q-icon name="code"></q-icon>
              </q-item-section>
              <q-item-section>
                <q-item-label>GitHub</q-item-label>
                <q-item-label caption>github.com/quasarframework</q-item-label>
              </q-item-section>
            </q-item>
            <q-item clickable tag="a" target="_blank" href="https://chat.quasar.dev">
              <q-item-section avatar>
                <q-icon name="chat"></q-icon>
              </q-item-section>
              <q-item-section>
                <q-item-label>Discord Chat Channel</q-item-label>
                <q-item-label caption>chat.quasar.dev</q-item-label>
              </q-item-section>
            </q-item>
            <q-item clickable tag="a" target="_blank" href="https://forum.quasar.dev">
              <q-item-section avatar>
                <q-icon name="forum"></q-icon>
              </q-item-section>
              <q-item-section>
                <q-item-label>Forum</q-item-label>
                <q-item-label caption>forum.quasar.dev</q-item-label>
              </q-item-section>
            </q-item>
            <q-item clickable tag="a" target="_blank" href="https://twitter.com/quasarframework">
              <q-item-section avatar>
                <q-icon name="rss_feed"></q-icon>
              </q-item-section>
              <q-item-section>
                <q-item-label>Twitter</q-item-label>
                <q-item-label caption>@quasarframework</q-item-label>
              </q-item-section>
            </q-item>
          </q-list>
        </q-drawer>

        <q-page-container>
          <q-page padding class="flex flex-center">

            <!-- page content; replace this entirely -->
            <q-card flat bordered>
              <q-card-section>
                <div class="q-mb-md row items-center">
                  <span class="text-subtitle1">"yarn dev:umd"</span>
                  <q-rating class="q-ml-md" v-model="stars" size="24px"></q-rating>
                </div>
                <div class="text-caption">You need to build & refresh page on each change on Quasar</div>
                <div class="text-caption">Do not include index.umd.html in your commits</div>
              </q-card-section>

              <q-separator></q-separator>

              <q-card-section class="row items-center no-wrap q-py-xs">
                <div class="text-caption text-grey">$q.lang.label.update: {{ $q.lang.label.update }}</div>
                <q-space></q-space>
                <q-btn flat color="primary" label="Refresh" @click="onRefreshClick"></q-btn>
              </q-card-section>
            </q-card>

          </q-page>
        </q-page-container>
      </q-layout>
    </div>

    <script src="https://unpkg.com/vue@^3.0.0/dist/vue.global.prod.js"></script>
    <script src="dist/quasar.umd.js"></script>
    <script src="dist/lang/es.umd.prod.js"></script>
    <script src="dist/lang/en-GB.umd.prod.js"></script>
    <script src="dist/icon-set/fontawesome-v5.umd.prod.js"></script>
    <script src="dist/icon-set/svg-fontawesome-v5.umd.prod.js"></script>

    <script>
      const app = Vue.createApp({
        setup () {
          return {
            version: Quasar.version,
            vueVersion: Vue.version,
            stars: Vue.ref(5),
            drawerState: Vue.ref(false),

            launchUrl (url) {
              Quasar.openURL('https://quasar.dev')
            },

            onRefreshClick () {
              window.location.reload()
            }
          }
        }
      })

      app.use(Quasar)

      Quasar.Notify.create('Startup notification')

      Quasar.lang.set(Quasar.lang.es)
      Quasar.iconSet.set(Quasar.iconSet.svgFontawesomeV5)

      app.mount('#q-app')

      console.log('fontawesome-v5 set', Quasar.iconSet.fontawesomeV5)
      console.log('svg-fontawesome-v5 set', Quasar.iconSet.svgFontawesomeV5)
      console.log('es lang', Quasar.lang.es)
      console.log('en-GB lang', Quasar.lang.enGB)
    </script>
  </body>
</html>
