<template>
  <div class="fo-image-module">
    <a
      v-if="content.urlLink && image"
      :href="content.urlLink"
      :target="content.openInNewWindow && '_blank'"
      class="fo-image-module-wrapper"
    >
      <img
        :src="image.url"
        :alt="image.altText"
        class="fo-image-module-img img-fluid"
      />
    </a>
    <div v-else class="fo-image-module-wrapper">
      <img
        :src="image.url"
        :alt="image.altText"
        class="fo-image-module-img img-fluid"
      />
    </div>

    <div class="fo-image-module-text">
      <div
        v-if="image.caption"
        class="fo-image-module-caption"
        v-html="filter(image.caption)"
      ></div>
      <div
        v-if="image.credit"
        class="fo-image-module-credit"
        v-html="filter(image.credit)"
      ></div>
    </div>
  </div>
</template>

<script>
import baseBlock from "./base_block";

export default {
  extends: baseBlock,
  computed: {
    image() {
      return this.block.images ? this.block.images[0] : this.block;
    },
    content() {
      return this.block.content || this.block;
    }
  }
};
</script>