<!-- Боковая колонка справа: рекомендации или реклама -->
<template>
  <div
    :class="[
      {'_loading': status === 'pending'},
    ]"
    class="player-aside-videos _from-md"
  >
    <AdvNtv v-if="featureFlags.AdsNTVEnabled" />

    <template v-else>
      <CardVideo
        v-for="item in asideVideos?.items?.slice(0, 2)"
        :key="`aside-video-${item.guid}`"
        :card="item"
        mini
      />
    </template>
  </div>
</template>

<script setup lang="ts">
import type { IVideoCard, PaginatedResponse } from '../../types';
import type { AsyncDataRequestStatus } from '#app';

const featureFlags = useRuntimeConfig().public.featureFlags;

defineProps<{
  asideVideos?: PaginatedResponse<IVideoCard> | null
  status?: AsyncDataRequestStatus
}>();
</script>

<style lang="scss">
.player-aside-videos {
  @include from-br(md) {
    display: grid;
    gap: 16px;
    grid-template-columns: 1fr;
    height: 100%;
    grid-column: 2;
    grid-row: 1;
    align-content: start;
  }
}
</style>
