<template>
  <div class="mery-categories-pages">
    <Banner :add="['mery_pages']" :static-data="fetchedData" />

    <TemplateContainer v-if="fetchedData.content" size="s">
      <ParagraphListing
        :heritedData="fetchedData.content"
        :heritedOptions="{ template: true }"
      />
    </TemplateContainer>

    <TemplateContainer>
      <component-listing
        id="mery-pages-listing"
        :fields="requestFields"
        :filters="{ status: 1, sort: 'title:asc', slug: $route.params.slug }"
        :on-request-success="onRequestSuccess"
        endpoint="content/mery_categories"
        direction="horizontal"
      >
        <template #default="{ item }">
          <Link
            :key="item.uuid"
            :href="{
              name: 'MeryPages',
              params: { slug: fetchedData.slug[0], page: item.slug[0] }
            }"
            :inline="false"
          >
            <div class="mery-categories-pages-image">
              <img
                v-if="item.mery_pages_icon"
                :src="$_getContentImage(item.mery_pages_icon, 'image-card')"
                :alt="item.title"
              />
            </div>

            <BaseText class="mery-categories-pages-title">
              {{ item.title }}
            </BaseText>
          </Link>
        </template>
      </component-listing>
    </TemplateContainer>
  </div>
</template>

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

import { Link } from 'inside-collection/components'
import { BaseText } from 'inside-collection/atoms'

import ParagraphListing from '@inside-library/components/listing/ParagraphListing'

export default {
  name: 'MeryCategoriesPage',
  components: {
    Banner,
    Link,
    BaseText,
    TemplateContainer,
    ParagraphListing
  },
  props: {
    fetchedData: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      requestFields: [
        'uuid',
        {
          mery_pages: {
            fields: [
              'uuid',
              'title',
              'slug',
              'content_type',
              'chapo',
              'mery_pages_icon'
            ],
            filters: { reverse: true, 'status:eq': 1 }
          }
        }
      ]
    }
  },
  methods: {
    onRequestSuccess(data) {
      return data.data[0].mery_pages.data
    }
  }
}
</script>

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

.mery-categories-pages {
  .default-text {
    margin: var(--spacing-m) 0 var(--spacing-xl);
  }

  .paragraph + .paragraph-image {
    margin-top: var(--spacing-xl);
  }

  &-image {
    display: flex;
    justify-content: center;
  }

  a {
    text-align: center;

    &:hover {
      .mery-categories-pages-title {
        color: var(--color-valid-700);
      }
    }
  }

  &-title {
    width: 70%;
    padding: 0 var(--spacing-m);
    margin: var(--spacing-m) auto;
    text-align: center;
    text-transform: uppercase;

    @include transition(color 0.4s);
  }
}
</style>
