<template>
	<div>
		<md-toolbar class="md-primary" md-elevation="0">
			<h3 class="md-title">Meikan</h3>
			<div class="md-toolbar-section-end">
				<h3 v-if="currentUser" class="md-subheading">
					{{ currentUser.name }}
				</h3>
			</div>
		</md-toolbar>
		<md-tabs class="md-primary" md-sync-route>
			<md-tab id="tab-user" md-label="Users" to="/"></md-tab>
			<md-tab v-if="currentUser" id="tab-anime" md-label="Anime" to="/anime"></md-tab>
		</md-tabs>
		<router-view/>
	</div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import { namespace } from 'vuex-class'

const user = namespace('user')

@Component({})
export default class Base extends Vue {
	@user.Getter('currentUser') private currentUser!: Meikan.User | null
}
</script>
