<template>
  <v-app>
    <v-app-bar color="primary" :clipped-left="false" fixed dark app>
      <v-toolbar-title v-text="appName" />
      <v-spacer />
      <Link v-if="$page.props.auth.user" :href="route('home')">
        <v-btn text>Home</v-btn>
      </Link>
      <div v-else>
        <Link :href="route('login')">
          <v-btn text>Login</v-btn>
        </Link>
        <Link :href="route('register')">
          <v-btn text>Register</v-btn>
        </Link>
      </div>
    </v-app-bar>
    <v-main>
      <v-container>
        <v-card>
          <v-card-title>Welcome to Laravel Inertia Vuetify</v-card-title>
        </v-card>
      </v-container>
    </v-main>
  </v-app>
</template>

<script>
import ApplicationLogo from '../components/ApplicationLogo.vue'
export default {
  components: { ApplicationLogo },
  computed: {
    appName() {
      return this.$page.props.appName
    },
  },
}
</script>
