<template>
  <div class="tools-page-container">
    <Banner :add="['tools', 'tools_categories']" :static-data="fetchedData" />

    <TemplateContainer size="s">
      <paragraph-listing
        :herited-data="fetchedData.content"
        :herited-options="{ template: true }"
      />
    </TemplateContainer>

    <TemplateContainer size="l">
      <GroupBy
        v-bind="getAttrs($attrs)"
        :extra-filters="{
          sort: 'weight:asc',
          'published_at:lte': 'now()',
          'status:eq': 1,
          link_pages: filters
        }"
        :tools-filters="{
          sort: 'weight:asc',
          'status:eq': 1,
          'published_at:lte': 'now()'
        }"
      />
    </TemplateContainer>
  </div>
</template>

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

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

export default {
  name: 'ToolsListingPage',
  components: { Banner, TemplateContainer, GroupBy },
  props: {
    fetchedData: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      filters: { 'slug:eq': this.$route.params.slug }
    }
  },
  methods: {
    getAttrs
  }
}
</script>

<style lang="scss">
.tools-page-container {
  .template-container-container + .template-container-container {
    margin-top: var(--spacing-xxl);
  }
}
</style>
