<template>
  <component-listing
    id="business-listing"
    :pagination="false"
    :filters="filters"
    endpoint="content/business"
    fractions="4"
    direction="horizontal"
  >
    <template #default="{ item }">
      <ContainerWithEdition
        :key="item.uuid"
        :uuid="item.uuid"
        :admin="item.admin"
        :content_type="item.content_type"
        radius="s"
        class="business-container"
        @click="open(item)"
      >
        <img
          v-if="item.image"
          :src="$_getContentImage(item.image, 'image-card')"
          :alt="item.title"
        />

        <Title
          v-else
          :style="{ textAlign: 'center' }"
          :color="$_theme('colorSecondary')"
          tag="h4"
          class="mb-0"
        >
          {{ item.title }}
        </Title>
      </ContainerWithEdition>
    </template>
  </component-listing>
</template>

<script>
import { Container } from 'inside-collection/components'
import { Title } from 'inside-collection/atoms'

import { withEdition } from '@inside-edition/hocs'

export default {
  name: 'BusinessListing',
  components: { Title, ContainerWithEdition: withEdition(Container) },
  computed: {
    filters() {
      return { 'status:eq': '1', sort: 'weight:desc' }
    }
  },
  methods: {
    open(card) {
      this.triggerModal(
        'business',
        'fetch',
        {
          item: card,
          content: 'business'
        },
        {
          layout: 'right',
          size: 'l',
          transition: 'fadeInLeft',
          closeAll: true
        }
      )
    }
  }
}
</script>
