<template>
  <Block :title="$_tr('title')" title-tag="h3">
    <component-listing
      id="image-listing-block"
      endpoint="content/cards_links"
      :fields="requestFields"
      :filters="requestFilters"
      :grid-gap="$_theme('spacingS')"
    >
      <template #default="{ item }">
        <LinkWithEdition v-bind="item" :href="item.link" :inline="false">
          <img
            :src="$_getContentImage(item.image, 'image-section')"
            :alt="$_tr('image')"
          />
        </LinkWithEdition>
      </template>
    </component-listing>
  </Block>
</template>

<script>
import { Link } from 'inside-collection/components'
import { withEdition } from '@inside-edition/hocs'

import Block from '@inside-commons/components/lib/Block'

export default {
  name: 'HomeBlockImage',
  $_i18nRootPath: 'customs.HOMEPAGE.BLOCK_IMAGE',
  components: {
    Link,
    LinkWithEdition: withEdition(Link),
    Block
  },
  data() {
    return {
      requestFields: [
        'uuid',
        'title',
        'image',
        'link',
        'weight',
        'admin',
        'content_type'
      ],
      requestFilters: {
        'status:eq': 1,
        limit: 3,
        'published_at:lte': 'now()',
        sort: 'weight:asc'
      }
    }
  }
}
</script>
