<!-- Смотреть позже: сортировка «недавние / A-Z», сетка карточек с активными часами. Данные пока заглушка -->
<template>
  <div class="_page _container">
    <UiBreadcrumbs
      :items="breadcrumbs"
      class="_breadcrumbs"
    />

    <LibraryCollection
      :items="items"
      :title="t('watch_later')"
      icon="clock"
    />
  </div>
</template>

<script setup lang="ts">
import { getWatchLaterStub } from '../../stubs/collections';
import type { IBreadcrumbItem } from '../../types';

const { t } = useI18n();

const { watchLater } = useVideoCollections();

const items = useCollectionStub('watch-later', watchLater, getWatchLaterStub());

useNoindex();

const { brandName } = useAppConfig();

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

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