<template>
  <h1 style = "text-align:center">
    Digitale Helfer für Dart
  </h1>

  <div class="q-pa-lg flex flex-center" style="gap: 24px;">
    <q-card
      class="q-pa-lg shadow-3"
      style="width: 400px; max-width: 90vw; border-radius: 16px;"
    >
      <q-card-section class="text-center">
        <q-icon name="bi-controller" size="48px" color="primary" />
        <div class="text-h6 q-mt-md">Create a Game</div>
      </q-card-section>

      <q-card-actions align="center">
        <q-btn
          label="Go!"
          color="primary"
          to="/game/select"
          rounded
          unelevated
          size="lg"
          class="full-width"
        />
      </q-card-actions>
    </q-card>

    <q-card
      class="q-pa-lg shadow-3"
      style="width: 400px; max-width: 90vw; border-radius: 16px;"
    >
      <q-card-section class="text-center">
        <q-icon name="public" size="48px" color="primary" />
        <div class="text-h6 q-mt-md">Join a Game</div>
      </q-card-section>

      <q-card-actions align="center">
        <q-btn
          label="Go!"
          color="primary"
          to="/game/online/join"
          rounded
          unelevated
          size="lg"
          class="full-width"
        />
      </q-card-actions>
    </q-card>
  </div>

  <div class="flex flex-center">
    <img
      alt = "Quasar logo"
      src = "~assets/quasar-logo-vertical.svg"
      style = "width: 200px; height: 200px"
    />
  </div>
</template>

<script setup>
import 'bootstrap-icons/font/bootstrap-icons.css';

import { ref } from 'vue'
import { LocalStorage } from 'quasar'
import { useRouter } from 'vue-router'

const router = useRouter()

const user = ref({ username:"", id:0 });

const storedUser = LocalStorage.getItem("user")
if (storedUser) {
    console.log(storedUser)
    user.value = storedUser
} else {
    router.push("/user/username")
}

</script>
