<template>
 <v-flex>
  <app-toolbar class="app--toolbar"></app-toolbar>
   <v-card>
     <!-- only showing btn on lg-screen -->
    <v-toolbar flat color="white" class="hidden-xs-only hidden-md-only hidden-sm-only">
      <h3 style="position:relative; left:0px; top:-5px;"><b>Forum Questions</b></h3>
       <h5 style="position:relative;top:-15px;left:40px;">Select Category</h5>
        <span style="position:relative; left:-95px; top:10px;">
          <!-- Suggestion component -->
        <v-btn color="grey darken-2" v-on:click="component='suggestion' , activebtn('existing')" v-bind:class="{ activebtn: isActivebtn }" flat>Suggestion</v-btn>
          <!-- Suggestion Sex -->
        <v-btn color="grey darken-2" v-on:click="component='sex' , activebtn('new')" v-bind:class="{ activebtn: Activebtn1 }" flat>Sex</v-btn>
          <!-- Suggestion Health -->
        <v-btn color="grey darken-2" v-on:click="component='health' , activebtn('new1')" v-bind:class="{ activebtn: Activebtn2 }" flat>Health</v-btn>
          <!-- Suggestion Skin & Beauty-->
        <v-btn color="grey darken-2" v-on:click="component='skin' , activebtn('new2')" v-bind:class="{ activebtn: Activebtn3 }" flat>Skin & Beauty</v-btn>
          <!-- Suggestion Diet & Ex-->
        <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-spacer></v-spacer>
        <v-text-field
        flat
        prepend-icon="search"
        label="Find your user"
        color="black"
        >
      </v-text-field>
      </v-toolbar>
      <!-- not showing on lg-screen-->
      <div class="hidden-lg-only">
      <h4><b>Forum Questions</b></h4>
       <h5 style="">Select Category:</h5>
       <v-tabs
       color="white"
       show-arrows
        >
      <v-tabs-slider color="black"></v-tabs-slider>
      <v-tab>
       <v-btn color="grey darken-2" v-on:click="component='suggestion' , activebtn('existing')" v-bind:class="{ activebtn: isActivebtn }" flat>Suggestion</v-btn>
      </v-tab>
      <v-tab>
       <v-btn color="grey darken-2" v-on:click="component='sex' , activebtn('new')" v-bind:class="{ activebtn: Activebtn1 }" flat>Sex</v-btn>
      </v-tab>
      <v-tab>
        <v-btn color="grey darken-2" v-on:click="component='health' , activebtn('new1')" v-bind:class="{ activebtn: Activebtn2 }" flat>Health</v-btn>
      </v-tab>
      <v-tab>
        <v-btn color="grey darken-2" v-on:click="component='skin' , activebtn('new2')" v-bind:class="{ activebtn: Activebtn3 }" flat>Skin & Beauty</v-btn>
      </v-tab>
      <v-tab>
        <v-btn color="grey darken-2" v-on:click="component='diet' , activebtn('new3')" v-bind:class="{ activebtn: Activebtn4 }" flat>Diet & Ex</v-btn>
      </v-tab>
    </v-tabs>      
   </div>
   <component v-bind:is="component"></component>
  </v-card>
  </v-flex> 
</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';
import AppToolbar from '@/components/AppToolbar';

export default {
  components: {
    'suggestion': suggestion,
    'sex': sex,
    'health': health,
    'skin': skin,
    'diet': diet,
     AppToolbar,
  },
  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>
