<template>
    <v-col cols="12" sm="8" md="6" xl="4">
        <v-card color="secondary">
            <v-btn icon to="/" aria-label="Go back">
                <v-icon color="white">{{ mdiArrowLeft }}</v-icon>
            </v-btn>
            <v-card-title class="text-center justify-center py-6">
                <h1 class="font-weight-bold display-2 white--text">
                    Account
                </h1>
            </v-card-title>

            <v-tabs v-model="tab" grow color="accent">
                <v-tab v-for="tab in tabs" :key="tab">
                    {{ tab }}
                </v-tab>
            </v-tabs>

            <v-tabs-items v-model="tab">
                <v-tab-item v-for="tab in tabs" :key="tab">
                    <v-card flat>
                        <v-card-text>
                            <LoginForm v-if="tab === 'Login'"></LoginForm>
                            <RegisterForm v-else></RegisterForm>
                        </v-card-text>
                    </v-card>
                </v-tab-item>
            </v-tabs-items>
        </v-card>
    </v-col>
</template>

<script>
import { mdiArrowLeft } from '@mdi/js'

export default {
    options: {
        auth: 'guest',
    },
    data: () => ({
        mdiArrowLeft,
        tab: 0,
        tabs: ['Login', 'Register'],
    }),
    mounted() {
        this.$root.$on('register::success', () => {
            this.$root.$emit('toast', 'Welcome', 'success')
            this.tab = 0
        })
    },
    head: () => ({
        title: 'Account',
    }),
}
</script>
