<template>
  <v-container>
      <v-layout
      row wrap
      >
      <v-flex xs12>
        <v-img
          :src="require('../assets/icon.png')"
          class="my-3"
          contain
          height="200"
        ></v-img>
      </v-flex>


  <v-flex xs4 offset-xs4>
    <v-divider light></v-divider>
  </v-flex>

  <v-flex xs6 offset-xs5>
    &nbsp;
  </v-flex>

  <v-flex xs4 offset-xs4>
    <span class="red--text font-weight-light subheading">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ลองตอบคำถามดู เราจะเลือกวิชาที่ใช่ให้คุณเอง</span>
  </v-flex>
   <v-flex xs6 offset-xs5>
    &nbsp;
  </v-flex>

  <v-flex xs2 offset-xs5>
   <v-layout row justify-center>
    <v-dialog v-model="dialog" persistent max-width="600px">
      <template v-slot:activator="{ on }">
        <v-btn color="#00BFA5" dark v-on="on">Answer Me</v-btn>
      </template>
      <v-card>
        <v-card-title>
          <span class="headline">คำถามทดสอบว่าคุณเหมาะกับวิชาไหน?</span>
        </v-card-title>
        <v-card-text>
          <v-container grid-list-md>
            <v-layout wrap>
              <v-flex xs12 sm6 md4>
                <v-text-field label="Legal first name*" required></v-text-field>
              </v-flex>
              <v-flex xs12 sm6 md4>
                <v-text-field label="Legal middle name" hint="example of helper text only on focus"></v-text-field>
              </v-flex>
              <v-flex xs12 sm6 md4>
                <v-text-field
                  label="Legal last name*"
                  hint="example of persistent helper text"
                  persistent-hint
                  required
                ></v-text-field>
              </v-flex>
              <v-flex xs12>
                <v-text-field label="Email*" required></v-text-field>
              </v-flex>
              <v-flex xs12>
                <v-text-field label="Password*" type="password" required></v-text-field>
              </v-flex>
              <v-flex xs12 sm6>
                <v-select
                  :items="['0-17', '18-29', '30-54', '54+']"
                  label="Age*"
                  required
                ></v-select>
              </v-flex>
              <v-flex xs12 sm6>
                <v-autocomplete
                  :items="['Skiing', 'Ice hockey', 'Soccer', 'Basketball', 'Hockey', 'Reading', 'Writing', 'Coding', 'Basejump']"
                  label="Interests"
                  multiple
                ></v-autocomplete>
              </v-flex>
            </v-layout>
          </v-container>
          <small>*indicates required field</small>
           <div class="text-xs-center">
    <v-dialog
      v-model="dialog2"
      width="500"
    >
      <template v-slot:activator="{ on }">
        <v-btn
          color="red lighten-2"
          dark
          v-on="on"
        >
          วิชาที่ใช่ของฉันคือ...!?
        </v-btn>
      </template>

      <v-card>
        <v-card-title
          class="headline grey lighten-2"
          primary-title
        >
          คำตอบของคุณคือวิชา...
        </v-card-title>

        <v-card-text>
          ข้อมูล
        </v-card-text>

        <v-divider></v-divider>

        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn
            color="primary"
            flat
            @click="dialog = false"
          >
            OK
          </v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </div>
        </v-card-text>

        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn color="blue darken-1" flat @click="dialog = false">Close</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </v-layout>
  </v-flex>


      </v-layout>
  </v-container>

</template>


<script>
  export default {
    data: () => ({
        dialog: false,
        dialog2: false,
    })
  }
</script>