<template>
    <v-col cols="12" sm="8" md="6">
        <v-card color="primary" dark>
            <v-btn icon to="/">
                <v-icon>mdi-arrow-left</v-icon>
            </v-btn>
            <v-card-title class="text-center justify-center py-6">
                <h1 class="font-weight-bold display-2">Account</h1>
            </v-card-title>

            <v-tabs v-model="tab" background-color="transparent" dark grow>
                <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 LoginForm from '~/components/LoginForm'
import RegisterForm from '~/components/RegisterForm'

export default {
    options: {
        auth: 'guest',
    },
    components: {
        LoginForm,
        RegisterForm,
    },
    data: () => ({
        tab: 0,
        tabs: ['Login', 'Register'],
    }),
    head: () => ({
        title: 'Account',
    }),
}
</script>
