<template>
  <div>
    <Banner v-bind="banner" page="tools" />

    <TemplateContainer size="l">
      <Listing
        v-bind="getAttrs($attrs)"
        :filters="{ sort: 'weight:asc', 'published_at:lte': 'now()' }"
        :filter-id="null"
      />
    </TemplateContainer>
  </div>
</template>

<script>
import Banner from '@inside-library/components/commons/components/lib/Banner'
import TemplateContainer from '@inside-commons/components/lib/TemplateContainer'
import Listing from '@inside-tools/components/lib/ToolsListing'

import { getAttrs } from '@inside-library/helpers/Attrs'

export default {
  name: 'ToolsPage',
  components: { Banner, TemplateContainer, Listing },
  data() {
    return {
      filtersId: 'tools-listing-page'
    }
  },
  computed: {
    banner() {
      return {
        add: ['tools'],
        staticDataFallback: {
          title: this.$t('tools.PAGE.title', this.$store.getters.getCurrentLang)
        }
      }
    }
  },
  methods: {
    getAttrs
  }
}
</script>
