<template>
  <div class="entity-listing-page">
    <Banner page="entity" :add="['entities']" />

    <TemplateContainer size="l">
      <component-listing
        id="entity-listing"
        endpoint="content/entities"
        direction="horizontal"
        :fields="requestFields"
        :filters="requestFilters"
      >
        <template #default="{ item }">
          <CardImage
            v-bind="item"
            :image="$_getContentImage(item.image, 'image-card')"
            @click="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'

export default {
  name: 'EntityListingPage',
  components: {
    Banner,
    TemplateContainer,
    CardImage
  },
  data() {
    return {
      requestFields: ['uuid', 'title', 'image', 'slug', 'content_type'],
      requestFilters: {
        'status:eq': 1,
        'entities_listing:eq': 1,
        sort: 'title:asc'
      }
    }
  },
  methods: {
    redirection(item) {
      return this.$router.push({
        name: 'EntityPage',
        params: { slug: item.slug[0] }
      })
    }
  }
}
</script>
