{% extends "public.html" %} {% block page %}
<div class="row q-col-gutter-md justify-center">
  <div class="col-12 col-md-7 col-lg-6 q-gutter-y-md">
    <q-card class="q-pa-lg">
      <q-card-section class="q-pa-none">
        <center>
          <h3 class="q-my-none">Error</h3>
          <br />
          <q-icon
            name="warning"
            class="text-grey"
            style="font-size: 20rem"
          ></q-icon>

          <h5 class="q-my-none">{{ err }}</h5>

          <br />
          <div class="row">
            <div class="col">
              <q-btn
                @click="goBack"
                color="grey"
                outline
                label="Back"
                style="width: 100%"
              ></q-btn>
            </div>
            <div class="col">
              <q-btn
                @click="goHome"
                color="grey"
                outline
                label="Home"
                style="width: 100%"
              ></q-btn>
            </div>
          </div>
        </center>
      </q-card-section>
    </q-card>
  </div>

  {% endblock %} {% block scripts %}

  <script>
    window.app = Vue.createApp({
      el: '#vue',
      mixins: [window.windowMixin],
      data: function () {
        return {}
      },
      methods: {
        goBack: function () {
          window.history.back()
        },
        goHome: function () {
          window.location.href = '/'
        }
      }
    })
  </script>

  {% endblock %}
</div>