<template>
    <div>
        <nav>
            <ul>
                <li class="text-blue-200">
                    <router-link class="underline" to="/signin"
                        >Sign In</router-link
                    >
                </li>
                <li class="text-blue-200">
                    <router-link class="underline" to="/register"
                        >Register</router-link
                    >
                </li>
                <li class="text-blue-200">
                    <button class="underline" @click="logout">Sign Out</button>
                </li>
            </ul>
        </nav>
        <client-only>
            <div v-if="$auth.$state.loggedIn">
                User: {{ $auth.$state.user }}
            </div>
        </client-only>
    </div>
</template>

<script>
export default {
    name: 'Home',
    options: {
        auth: false, // FIXME: auth: 'guest'
    },
    methods: {
        async logout() {
            this.$store.commit('notes/clear')
            await this.$auth.logout()
        },
    },
}
</script>

<style scoped></style>
