<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 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>