<template>
  <div v-if="heritedData.content" class="space-logo-paragraph-container">
    <template v-for="(logo, key) in heritedData.content">
      <a
        v-if="
          isAlive(logo, ['file', 'path']) &&
            logo.file.mimetype === 'application/pdf'
        "
        :key="`logo-${key}`"
        :href="logo.file.path"
        :style="{
          'background-image': 'url(' + $_getContentImage(logo.image) + ')'
        }"
        target="_blank"
      />

      <a
        v-else
        :key="`logo-${key}`"
        :href="logo.logo_link"
        :style="{
          'background-image': 'url(' + $_getContentImage(logo.image) + ')'
        }"
        :target="isExternalLink(logo.logo_link) ? '_blank' : '_self'"
      />
    </template>
  </div>
</template>

<script>
import { isExternal } from 'inside-collection/helpers'

export default {
  name: 'SpaceLogoParagraph',
  methods: {
    isExternalLink(link) {
      return isExternal(link)
    }
  }
}
</script>

<style lang="scss">
.space-logo-paragraph-container {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;

  a {
    display: block;
    width: calc(50% - var(--spacing-xxl));
    height: 100px;
    margin: var(--spacing-m) 0;
    background: no-repeat center center/contain;
  }
}
</style>
