<template>
  <div class="home-documents-container" :class="getTablet ? 'mb-m' : 'mb-xxl'">
    <ListingSeparator :title="$_tr('title')" :class="getTablet && 'mb-m'" />

    <DocumentsListingBlock
      :block-options="blockOptions"
      :pagination="false"
      :filters="filters"
      :extra-fields="['published_at']"
      date-key="published_at"
    />
  </div>
</template>

<script>
import DocumentsListingBlock from '@inside-ged/components/lib/DocumentsListingBlock'

import ListingSeparator from './sub-components/ListingSeparator'

export default {
  name: 'HomeLastDocuments',
  $_i18nRootPath: 'customs.HOMEPAGE.lastDocuments',
  components: {
    ListingSeparator,
    DocumentsListingBlock
  },
  computed: {
    blockOptions() {
      return {
        link: { name: 'GedPage' },
        linkLabel: this.$t(
          'customs.HOMEPAGE.lastDocuments.link',
          this.$store.getters.getCurrentLang
        )
      }
    },
    filters() {
      return {
        limit: 3,
        'status:eq': 1,
        sort: 'published_at:desc'
      }
    }
  }
}
</script>

<style lang="scss">
@use '@inside-library/styles/mixins/partials/common-mixin' as *;

.home-documents-container {
  @include desktop-only {
    width: 45%;
  }
}
</style>
