<template>
  
  <div :id="rowId" :class="rowClasses" :style="backgroundImageStyle">
    <div class="clickable_object" :class="{'no-pointer': !properties['URL'].value}">
      
      <a class="clickable no-hover" :href="properties['URL'].value">
        
        <div class="image" :style="imageStyling()" v-if="properties['Image'].value"></div>
        
        <div class="content">
          <h1 class="title" v-html="properties['Title'].value" v-if="properties['Title'].value"></h1>
          <p class="paragraph" v-html="properties['Paragraph Text'].value" v-if="properties['Paragraph Text'].value"></p>
          <div class="button"
               :href="properties['URL'].value" v-if="properties['Button Text'].value && properties['URL'].value">{{properties['Button Text'].value}}
          </div>
        </div>
      
      </a>
    
    </div>
  </div>

</template>

<script>
  export default {
    name: "BuildableClickableObject",
    props: ['componentData', 'rowClasses', 'rowIndex', 'rowId', 'backgroundImageStyle'],
    data() {
      return JSON.parse(this.componentData);
    },
    methods: {
      imageStyling: function () {
        return "background-image: url(" + this.properties['Image'].value.url + ")";
      }
    }
  }
</script>

<style scoped>

</style>