<!-- Горизонтальный свайпер аватаров моделей с заголовком и ссылкой «все» -->
<template>
  <section class="section-swiper-cards">
    <header class="section-swiper-cards__header">
      <UiSectionTitle
        :title="title || t('top_models')"
        :count="count ?? items.length"
        :icon="icon"
        :variant="variant"
        class="section-swiper-cards__title"
        title-tag="h2"
      />

      <!-- На мобиле плитки «все» в ленте нет, поэтому ссылка вынесена в шапку -->
      <UiLink
        v-if="allLink"
        :to="generateLink(allLink)"
        class="section-swiper-cards__link _to-sm"
        theme="simple"
      >
        {{ headerLinkText ?? allLinkText }}
        <UiIcon
          name="arrow-right"
          size="16"
        />
      </UiLink>
    </header>
    <div class="section-swiper-cards__grid">
      <UiSwiper
        :items="items"
        :slide-width="96"
      >
        <template #default="item">
          <CardRound
            :card="item"
            :placeholder-avatar="placeholderAvatar"
            :without-count="withoutCount"
            class="section-swiper-cards__card"
          />
        </template>
        <template
          v-if="allLink"
          #append
        >
          <UiViewAll
            :to="allLink ?? '/'"
            :text="allLinkText ?? ''"
            :note="allLinkNote"
            mini
          />
        </template>
      </UiSwiper>
    </div>
  </section>
</template>

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

withDefaults(defineProps<{
  items: IRoundCard[]
  onlyGrid?: boolean
  allLink?: string
  allLinkText?: string
  /** Вторая строка в плитке «все» — «16 models» */
  allLinkNote?: string
  /** Подпись ссылки в шапке («All models»); по умолчанию — как в плитке */
  headerLinkText?: string
  title?: string
  /** Счётчик в шапке; по умолчанию — число карточек */
  count?: string | number
  icon?: string
  /** Вариант заголовка — см. `UiSectionTitle` */
  variant?: 'page' | 'section'
  placeholderAvatar?: string
  /** Карточки только с аватаром и названием, без счётчика роликов */
  withoutCount?: boolean
}>(), {
  icon: 'user'
});

const { t } = useI18n();
const { generateLink } = useGenerateLink();
</script>

<style lang="scss">
.section-swiper-cards {
  display: grid;
  width: 100%;
  min-width: 0;
}

.section-swiper-cards__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  column-gap: 16px;
  margin-bottom: 16px;
}

/* text-transform здесь не нужен: капс и трекинг заголовку даёт его собственный
   `._title`, а на корне он красил заодно и чип счётчика («6 UPDATES»). */
.section-swiper-cards__title {
  @include font-lg;
}

.section-swiper-cards__link {
  flex-shrink: 0;
}

.section-swiper-cards .section-swiper-cards__card {
  user-select: none;
}

.section-swiper-cards__grid {
  min-width: 0;
}

/* Слайд ровно по круглой карточке: 80px на мобиле, 96px с sm */
.section-swiper-cards .ui-swiper__slide {
  width: var(--card-round-size);
}

/* Плитка «все» — только с sm, на мобиле её роль играет ссылка в шапке */
.section-swiper-cards .ui-swiper__slide--append {
  @include to-br(sm) {
    display: none;
  }
}

</style>
