<template>
  <div class="card-listing">
    <div v-for="card in heritedData" :key="card.id" class="card-listing__item">
      <div
        v-if="card.content_type === 'lifestyle_contents'"
        class="card-listing__lifestyle"
        @click="
          triggerModal(
            'lifestyle',
            'fetch',
            { item: { content_type: card.content_type, uuid: card.uuid } },
            { layout: 'right', transition: 'fadeInLeft' }
          )
        "
      >
        <card-ui
          :heritedData="card"
          :heritedOptions="heritedOptions"
          :color="'black'"
        />
      </div>

      <Link
        v-else
        :external="isExternalLink"
        :href="link(card) || getLink(card)"
        :inline="false"
      >
        <card-ui
          :heritedData="card"
          :heritedOptions="heritedOptions"
          :color="'black'"
        />
      </Link>
    </div>
  </div>
</template>

<script>
import { Link } from 'inside-collection/components'

import CardListing from '@inside-library/components/listing/CardListing'

export default {
  name: 'card-listing',
  components: { Link },
  extends: CardListing
}
</script>

<style lang="scss">
.card-listing__lifestyle {
  cursor: pointer;
}
</style>
