<template>
  <div>
    <Banner :add="['mery_categories']" page="mery" />

    <TemplateContainer>
      <component-listing
        id="mery-categories-listing"
        :fields="requestFields"
        :filters="{ status: 1, sort: 'title:asc' }"
        endpoint="content/mery_categories"
        direction="horizontal"
      >
        <template #default="{ item }">
          <CardImageWithEdition
            v-if="item.mery.data[0]"
            v-bind="item"
            :key="item.uuid"
            :content_type="item.content_type"
            :image="$_getContentImage(item.image, 'image-card')"
            :cardOverlayEnabled="true"
            @click.native="redirection(item)"
          />
        </template>
      </component-listing>
    </TemplateContainer>
  </div>
</template>

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

import Banner from '@inside-commons/components/lib/Banner'
import TemplateContainer from '@inside-commons/components/lib/TemplateContainer'

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

export default {
  name: 'MeryPage',
  components: {
    Banner,
    TemplateContainer,
    CardImageWithEdition: withEdition(CardImage)
  },
  data() {
    return {
      requestFields: [
        'uuid',
        'admin',
        'title',
        'image',
        'slug',
        'content_type',
        'mery'
      ]
    }
  },
  methods: {
    redirection(item) {
      return this.$router.push({
        name: 'MeryCategoriesPage',
        params: { slug: item.slug[0] }
      })
    }
  }
}
</script>
