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

    <TemplateContainer>
      <component-listing
        id="rotations-listing"
        class="rotations-listing-container"
        endpoint="content/rotations"
        direction="vertical"
        :fractions="1"
        :items-per-page="10"
        :grid-gap="$_theme('spacingXl')"
        :fields="[
          'uuid',
          'title',
          'published_at',
          'date',
          'end_date',
          { users: ['uuid', 'firstname', 'lastname', 'image', 'email'] }
        ]"
        :filters="{ 'status:eq': 1, sort: 'date:desc', limit: 10 }"
      >
        <template #default="{item}">
          <RotationItem :key="item.uuid" :rotation="item" />
        </template>
      </component-listing>
    </TemplateContainer>
  </div>
</template>

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

import RotationItem from '../components/rotations/RotationsListingItem'

export default {
  name: 'RotationsListingPage',
  components: { Banner, TemplateContainer, RotationItem }
}
</script>
