<template>
  
  <div :id="rowId" :class="rowClasses" :style="backgroundImageStyle">
    
    <div class="story-image" :style="styling()" v-if="properties['Image'].value"></div>
    <div class="story-image blank" v-if="!properties['Image'].value"></div>
    
    <div class="story">
      <div>
        <h1 class="title" v-html="properties['Title'].value" v-if="properties['Title']"></h1>
        <div class="content" v-html="properties['Content'].value" v-if="properties['Content']"></div>
      </div>
    </div>
  </div>

</template>

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

<style scoped>

</style>