<template>
  
  <!--if (strpos($image_video_embed, "{") !== false) {-->
  <!--$object = json_decode($image_video_embed);-->
  <!--$image_video_url = $object->url;-->
  <!--} else {-->
  <!--$image_video_url = $image_video_embed;-->         <!-- This stuff may be necessary for different types -->
  <!--}-->                                                     <!-- depending on how we actually save this -->
  <!--$filetype = wp_check_filetype($image_video_url);-->
  <!--$type = $filetype["type"];-->
  
  <div :id="rowId" :class="rowClasses" :style="backgroundImageStyle">
    <div class="intro" :class="{'image-on-left': properties['Image On Left'].value}">
      
      <div class="content">
        <h1 class="title" v-html="properties['Title'].value" v-if="properties['Title'].value"></h1>
        <h3 class="subtitle" v-html="properties['Subtitle'].value" v-if="properties['Subtitle'].value"></h3>
        <p class="paragraph" v-html="properties['Paragraph Text'].value" v-if="properties['Paragraph Text'].value"></p>
        <a class="button" :href="properties['URL'].value"
           v-if="properties['URL'].value && properties['Button Text'].value">
          {{properties['Button Text'].value}}
        </a>
      </div>
      
      <div v-if="properties['Image/Video Embed'].value" class="media">
        <video v-if="properties['Image/Video Embed'].type === 'video'" playsinline autoplay muted loop>
          <source :src="properties['Image/Video Embed'].value" type="video/mp4">
        </video>
        <img v-if="properties['Image/Video Embed'].type === 'o_embed'" :src="properties['Image/Video Embed'].value.url">
      </div>
    
    </div>
  </div>

</template>

<script>
  export default {
    name: "BuildableIntro",
    props: ['componentData', 'rowClasses', 'rowIndex', 'rowId', 'backgroundImageStyle'],
    data() {
      return JSON.parse(this.componentData);
    }
  }
</script>

<style scoped>

</style>
