<template>
<v-container grid-list-xl>
    <v-flex>
  <v-card>
    <v-toolbar flat color="white">
      <v-card-title>
      <h3 style="position:relative; left:px; top:-5px;"><b>Forum Questions</b></h3>
      <h5 style="position:relative; left:40px; top:-15px;">Select Category</h5>
      <span style="position:relative; left:-95px; top:10px;">

        <v-btn color="grey darken-2" v-on:click="component='suggestion' , activebtn('existing')" v-bind:class="{ activebtn: isActivebtn }" flat>Suggestion</v-btn>

        <v-btn color="grey darken-2" v-on:click="component='sex' , activebtn('new')" v-bind:class="{ activebtn: Activebtn1 }" flat>Sex</v-btn>

        <v-btn color="grey darken-2" v-on:click="component='health' , activebtn('new1')" v-bind:class="{ activebtn: Activebtn2 }" flat>Health</v-btn>

        <v-btn color="grey darken-2" v-on:click="component='skin' , activebtn('new2')" v-bind:class="{ activebtn: Activebtn3 }" flat>Skin & Beauty</v-btn>

        <v-btn color="grey darken-2" v-on:click="component='diet' , activebtn('new3')" v-bind:class="{ activebtn: Activebtn4 }" flat>Diet & Ex</v-btn>

      </span>
      </v-card-title>
      
    </v-toolbar>
    <component v-bind:is="component"></component>
  </v-card></v-flex> 

  </v-container>
</template>
<script>
import axios from 'axios';
import suggestion from '@/components/questions/suggestion.vue';
import sex from '@/components/questions/sex.vue'; 
import health from '@/components/questions/health.vue';
import skin from '@/components/questions/skin.vue';
import diet from '@/components/questions/diet.vue';
export default {
  components: {
    'suggestion': suggestion,
    'sex': sex,
    'health': health,
    'skin': skin,
    'diet': diet,
  },
  data: () => ({
    component: 'suggestion',
    isActivebtn: true,
    Activebtn1: false,
    Activebtn2: false,
    Activebtn3: false,
    Activebtn4: false,
  }),
  methods: {
    activebtn (type) {
      switch (type) {
        case 'existing':
          this.Activebtn4 = false;
          this.Activebtn3 = false;
          this.Activebtn2 = false;
          this.Activebtn1 = false;
          this.isActivebtn = true;
          break;
        case 'new':
          this.Activebtn4 = false;
          this.Activebtn3 = false;
          this.Activebtn2 = false;
          this.Activebtn1 = true;
          this.isActivebtn = false;
          break;
        case 'new1':
          this.Activebtn4 = false;
          this.Activebtn3 = false;
          this.Activebtn2 = true;
          this.Activebtn1 = false;
          this.isActivebtn = false;
          break;
        case 'new2':
          this.Activebtn4 = false;
          this.Activebtn3 = true;
          this.Activebtn2 = false;
          this.Activebtn1 = false;
          this.isActivebtn = false;
          break;
        default:
          this.Activebtn4 = true;
          this.Activebtn3 = false;
          this.Activebtn2 = false;
          this.Activebtn1 = false;
          this.isActivebtn = false;
          break;
      }
    },
  }
};
</script>
<style scoped>
#td{
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
}
.activebtn {
  color: black !important;
}
</style>
