<template>
  <div v-if="fetchedData.length">
    <ListingSeparator :title="$_tr('title')" />

    <div class="home-projects-listing-container">
      <component-listing
        v-if="!getTablet"
        id="homepage-projects-listing"
        :static-data="fetchedData"
        :pagination="false"
        :use-grid="getTablet || getMobile"
        :fractions="getTablet || getMobile ? 1 : 3"
        direction="horizontal"
        class="homepage-projects-listing mr-xl"
      >
        <template #default="{ item }">
          <ProjectCard v-bind="item" :key="item.uuid" :project="item" />
        </template>
      </component-listing>

      <ActionCard
        v-if="!getTablet"
        :title="$_tr('link')"
        :to="{ name: 'ProjectsListingPage' }"
        icon-name="I-research"
      />

      <Slider v-if="getTablet" :data="sliderProjectsList">
        <template #default="{ item, index }">
          <ProjectCard
            v-if="index < sliderProjectsList.length - 1"
            v-bind="item"
            :key="item.uuid"
            :project="item"
            class="my-m"
          />

          <ActionCard
            v-else
            :title="$_tr('link')"
            :to="{ name: 'ProjectsListingPage' }"
            icon-name="I-research"
          />
        </template>
      </Slider>
    </div>
  </div>
</template>

<script>
import ListingSeparator from './sub-components/ListingSeparator'
import ActionCard from './sub-components/ActionCard'

import ProjectCard from './cards/ProjectCard'

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

export default {
  name: 'ProjectsListing',
  $_i18nRootPath: 'customs.HOMEPAGE.projects',
  components: { ListingSeparator, ActionCard, ProjectCard, Slider },
  props: {
    fetchedData: {
      type: Array
    }
  },
  computed: {
    sliderProjectsList() {
      return this.fetchedData.concat({})
    }
  }
}
</script>

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

.home-projects-listing-container {
  @include desktop-only {
    display: flex;

    .homepage-projects-listing {
      width: 75%;

      .data-container {
        justify-content: space-between;
      }
    }
  }

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

      .swiper-container {
        .swiper-pagination {
          text-align: center;
          height: 22px;
          margin-top: var(--spacing-xs);
        }

        .swiper-slide {
          padding: 0 var(--spacing-s);
        }

        .swiper-button-prev,
        .swiper-button-next {
          top: initial;
          bottom: 7px;
        }

        .swiper-button-prev::after,
        .swiper-button-next::after {
          bottom: 0;
        }
      }
    }
  }
}
</style>
