<template>
  <Block
    :title="$_tr('title')"
    title-tag="h3"
    :link="{ name: 'EventsCalendarPage' }"
    :link-label="$_tr('link')"
    class="home-events-listing"
  >
    <component-listing
      id="homepage-events-listing"
      endpoint="content/events"
      :fields="requestFields"
      :filters="requestFilters"
      :items-per-page="4"
      :pagination="false"
      direction="horizontal"
    >
      <template #default="{ item }">
        <Minimal
          v-bind="item"
          :key="item.uuid"
          :to="{ name: 'EventPage', params: { slug: item.slug[0] } }"
        />
      </template>
    </component-listing>
  </Block>
</template>

<script>
import Block from '@inside-commons/components/lib/Block'
import EventsMinimalListing from '@inside-events/components/lib/MinimalListing'
import Minimal from '@inside-events/components/lib/Minimal'

export default {
  name: 'EventsListing',
  $_i18nRootPath: 'customs.HOME_PAGE.events',
  components: { Block, EventsMinimalListing, Minimal },
  data() {
    return {
      requestFields: [
        'uuid',
        'title',
        'content_type',
        'slug',
        'date',
        'end_date',
        'place',
        'title',
        { events_categories: ['uuid', 'title', 'color'] }
      ],
      requestFilters: {
        'status:eq': 1,
        'date:gte': 'now()',
        sort: 'date:asc'
      }
    }
  }
}
</script>
