<template>
<div>
  <BackgroundImage/>
  <md-tabs md-alignment="centered" :md-active-tab="current_tab">
    <MainView :current_tab="current_tab"/>
    <RulesView/>
    <ServersView/>
    <VipView/>
    <AboutView/>
    <EmptyTab lb=""/>
    <EmptyTab lb=""/>
    <ProfileView/>
    <BackendStatus/>
  </md-tabs>
</div>
</template>

<script>
import RulesView from "@/components/TabsMenuElements/RulesView/RulesView.vue";
import ServersView from "@/components/TabsMenuElements/ServersView/ServersView.vue";
import ProfileView from "@/components/TabsMenuElements/ProfileView/ProfileView.vue";
import VipView from "@/components/TabsMenuElements/VipView.vue";
import AboutView from "@/components/TabsMenuElements/AboutView.vue";
import EmptyTab from "@/components/TabsMenuElements/EmptyTab.vue";
import MainView from "@/components/TabsMenuElements/MainView/MainView.vue";
import BackendStatus from "@/components/TabsMenuElements/BackendStatus.vue";
import BackgroundImage from "@/components/Others/BackgroundImage.vue";

export default {
    name: 'TabsMenu',
    components: {BackendStatus, MainView, EmptyTab, RulesView, ServersView, ProfileView, VipView, AboutView, BackgroundImage},
    data: () => ({
      current_tab: ""
    }),
  beforeCreate() {
      console.log("wait data to render");
  }
}
</script>

<style>
</style>