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

    <Block
      :link="formattedLink"
      :link-label="$_tr('link')"
      class="home-newcomers-listing-container"
    >
      <component-listing
        v-if="!getTablet"
        id="homepage-newcomers-listing"
        :static-data="fetchedData"
        :pagination="false"
        :use-grid="getTablet || getMobile"
        :fractions="getMobile ? 1 : 3"
        direction="horizontal"
        class="homepage-newcomers-listing"
      >
        <template #default="{ item }">
          <NewcomerCard v-bind="item" :key="item.uuid" :newcomer="item" />
        </template>

        <template #no-data>{{ $_tr('empty') }}</template>
      </component-listing>

      <Slider v-if="getTablet" :data="fetchedData">
        <template #default="{ item }">
          <NewcomerCard v-bind="item" :key="item.uuid" :newcomer="item" />
        </template>
      </Slider>
    </Block>
  </div>
</template>

<script>
import NewcomerCard from './cards/NewcomersCard'
import ListingSeparator from './sub-components/ListingSeparator'

import Slider from '@inside-slideshow/components/lib/Slider'
import Block from '@inside-commons/components/lib/Block'

import { formatHref } from '@inside-library/helpers/Langs'

export default {
  name: 'HomeNewcomers',
  $_i18nRootPath: 'customs.HOMEPAGE.newcomers',
  components: {
    NewcomerCard,
    ListingSeparator,
    Block,
    Slider
  },
  props: {
    fetchedData: {
      type: Array
    }
  },
  computed: {
    formattedLink() {
      return formatHref({ name: 'NewcomersListingPage' }, this.$_currentLang)
    }
  }
}
</script>

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

.home-newcomers-container {
  @include desktop-only {
    width: 45%;
  }

  @include tablet {
    .slider-container {
      padding-top: 0;
      padding-bottom: var(--spacing-s);

      .swiper-container {
        overflow-x: clip;
        overflow-y: visible;

        .swiper-slide {
          padding: 0 var(--spacing-s);
        }
      }
      .swiper-pagination {
        margin-top: var(--spacing-m);
        text-align: center;
      }
    }

    .swiper-container .swiper-button-prev::after,
    .swiper-container .swiper-button-next::after {
      top: 80px;
      left: 80px;
    }
  }

  .homepage-newcomers-listing {
    .data-container {
      justify-content: space-between;
    }
  }
}
</style>
