<!-- Подписки на каналы: аватар, теги, счётчик подписчиков, лента последних роликов. Данные пока заглушка -->
<template>
  <div class="_page _container">
    <UiBreadcrumbs
      :items="breadcrumbs"
      class="_breadcrumbs"
    />

    <LibraryFollows
      :items="items"
      :title="t('library.my_channels')"
      icon="play-circle"
    />
  </div>
</template>

<script setup lang="ts">
import { getLibraryChannelsStub } from '../../stubs/library-follows';
import { convertString, formatDate } from '../../runtime';
import type { IBreadcrumbItem, ILibraryFeedItem } from '../../types';

const { t, n } = useI18n();
const { generateLink } = useGenerateLink();

const items = computed<ILibraryFeedItem[]>(() => getLibraryChannelsStub().map(channel => ({
  guid: channel.guid,
  title: channel.title,
  to: generateLink(`/channels/${convertString().toSlug(channel.title)}`),
  avatarUrl: channel.avatarUrl,
  tags: channel.tags.map(tag => convertString().toChips(tag, 'tag')),
  newCount: channel.newCount,
  meta: [
    { icon: 'video-camera', text: String(channel.videosCount) },
    { icon: 'user-group', text: t('library.followers', { count: n(channel.followersCount, 'compact') }) },
    { icon: 'date', text: t('library.updated_at', { date: formatDate(channel.lastVideoAddedAt) }), desktopOnly: true },
  ],
  videosCount: channel.videosCount,
  feedTitle: t('library.latest'),
  openText: t('library.open_channel'),
  videos: channel.videos,
})));

useNoindex();

const { brandName } = useAppConfig();

useHead(() => ({
  title: `${t('library.my_channels')} — ${brandName}`,
}));

const breadcrumbs = [
  {
    name: `${t('navigation.main')}`,
    to: '/',
  },
  {
    name: `${t('navigation.library')}`,
    to: '/library',
  },
  {
    name: `${t('library.my_channels')}`,
  },
] as IBreadcrumbItem[];
</script>
