Vue.component('el-1',{template: `
  <div>
    <v-carousel :show-arrows="true" hide-delimiter-background hide-delimiters height="100vh" progress progress-color="rgb(15,89,122)" cycle>
      <template v-slot:prev="{ on, attrs }">
        <v-btn fab color="rgba(15,89,122,.8)" dark elevation="24" v-bind="attrs" v-on="on" small>
          <v-icon>mdi-chevron-double-left</v-icon>
        </v-btn>
      </template>
      <template v-slot:next="{ on, attrs }">
        <v-btn fab color="rgba(15,89,122,.8)" dark elevation="24" v-bind="attrs" v-on="on" small>
          <v-icon>mdi-chevron-double-right</v-icon>
        </v-btn>
      </template>
      <v-carousel-item v-for="(slide, i) in content" :src="slide.img">
        <v-row class="fill-height" align-content="end">
          <v-col cols="12" align="center" justify="center" class="font-weight-black text-h4">
            <v-sheet color="rgba(59,59,59,.2)" class="pa-16 mb-10" height="100%" :style="{color:'rgba(255,255,255,1)'}">
              {{slide.text}}
            </v-sheet>
          </v-col>
          <v-col cols="12" align="center">
            <v-btn fab color="rgba(15,89,122,.8)" dark :style="{fontWeight:900}" class="bounce" elevation="24" @click="$vuetify.goTo('#scroll-page')">
              <v-icon>mdi-chevron-triple-down</v-icon>
            </v-btn>
          </v-col>
        </v-row>
      </v-carousel-item>
    </v-carousel>
    <div id="scroll-page"></div>
  </div>
  `,
  data:()=>{return {"title":"Carousel","content":[]}},
  props:{"attr":["content","attr"],"content":[]},
  methods:{
  }
})
Vue.component('el-2',{template: `
  <div>
    <v-card v-bind="attr.card" v-if="attr.inner==true">
      <v-img v-if="content.image" :src="content.image" height="100%">
        <v-card-title v-if="attr.inner==true && content.title">{{content.title}}</v-card-title>
        <v-card-text v-if="attr.inner==true && content.body" v-html="content.body"></v-card-text>
      </v-img>
    </v-card>
    <v-card v-bind="attr.card" v-if="attr.inner==false">
      <v-card-text>
        <v-img v-if="content.image" :src="content.image" class="mb-2"></v-img>
        <p v-if="content.title" class="text-h5">{{content.title}}</p>
        <p v-if="content.body" v-html="content.body"></p>
      </v-card-text>
    </v-card>
  </div>
  `,
  data:()=>{return {"title":"Card"}},
  props:["attr","content"],
  methods:{
  },
  created(){
    if(typeof(this.attr) == 'undefined'){
      this.attr.inner = false
    }
  }
})
Vue.component('el-3',{template: `
  <div>
    <v-container fluid class="pa-0">
      <v-sheet height="100%" class="pa-11 my-10" :color="content.color">
        <v-row>
          <v-col cols="12" md="12" class="text-center">
            <v-span class="text-h3 white--text"> {{content.title}}</v-span>
          </v-col>
        </v-row>
      </v-sheet>
    </v-container>
  </div>
  `,
  data:()=>{return {"title":"Divider"}},
  props:{"attr":["content","attr"],"content":{"title":"","color":""}},
  methods:{
  }
})