<!-- Блок с заголовком и сеткой моделей (исключает текущую модель) -->
<template>
  <template v-if="items && items.length > 0">
    <h2 class="section-models__title _title">{{ title }}</h2>

    <GridModels
      :items="items"
      footer
      class="section-models__grid"
    />
  </template>
</template>

<script setup lang="ts">
import { convertString } from '../../runtime';
import type { IModelCard } from '../../types';

const props = defineProps<{
  title: string
  dataItems: IModelCard[]
}>();

const currentModel = computed(() => convertString().fromSlug(String(useRoute().params['slug'])));

const items = computed(() => props.dataItems?.filter(item => item.title !== currentModel.value));
</script>

<style lang="scss">
.section-models__title {
  display: flex;
  align-items: center;
  column-gap: 8px;
  margin-top: auto;
  padding-top: 8px;
}

.section-models__grid .card-model {
  @include to-br(xs) {
    &:nth-child(n + 7) {
      display: none;
    }
  }

  @include to-br(sm) {
    &:nth-child(n + 13) {
      display: none;
    }
  }

  @include to-br(md) {
    &:nth-child(n + 19) {
      display: none;
    }
  }
}
</style>
