<!-- Кнопки коллекций поверх постера: избранное (только когда ролик уже в нём) и «смотреть позже» -->
<template>
  <div class="card-video-actions">
    <button
      v-if="showFavorites && favorite"
      :aria-label="t('video_actions.remove_aria', { title: card.title, name: t('favorites') })"
      class="card-video-actions__btn --active"
      type="button"
      aria-pressed="true"
      @click="toggleFavorite(card.guid, card.title)"
    >
      <UiIcon
        name="heart"
        size="18"
      />
    </button>
    <button
      v-if="showWatchLater"
      :aria-label="later
        ? t('video_actions.remove_aria', { title: card.title, name: t('video_submenu.watch_later') })
        : t('video_actions.add_aria', { title: card.title, name: t('video_submenu.watch_later') })"
      :aria-pressed="later"
      :class="['card-video-actions__btn', '--watch-later', { '--active': later }]"
      type="button"
      @click="toggleWatchLater(card.guid, card.title)"
    >
      <UiIcon
        :name="later ? 'clock-filled' : 'clock'"
        size="18"
      />
    </button>
  </div>
</template>

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

const props = defineProps<{
  card: IVideoCard
  showFavorites?: boolean
  showWatchLater?: boolean
}>();

const { t } = useI18n();

const { isFavorite, isWatchLater, toggleFavorite, toggleWatchLater } = useVideoCollections();

const favorite = computed(() => isFavorite(props.card.guid));
const later = computed(() => isWatchLater(props.card.guid));
</script>

<style lang="scss">
$action-inset: 8px;
$action-size: 36px;

.card-video-actions {
  position: absolute;
  top: $action-inset;
  right: $action-inset;
  left: $action-inset;
  z-index: $z-index-sub-loader;
  display: flex;
  column-gap: $action-inset;
  pointer-events: none;
}

.card-video-actions__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: $action-size;
  height: $action-size;
  border: 1px solid $video-card-action-border;
  border-radius: $radius-md;
  background-color: $video-card-action-bg;
  color: $video-card-action-icon;
  pointer-events: auto;
}

.card-video-actions__btn.--watch-later {
  margin-left: auto;
}

.card-video-actions__btn.--active {
  background-color: $video-card-action-active-bg;
  border-color: $video-card-action-active-border;
  color: $video-card-action-active-icon;
  opacity: 1;
}

/* С мышью неактивные кнопки проявляются по наведению на карточку. На тач-устройствах наведения нет,
   поэтому там неактивные кнопки не показываем вовсе — только те, что уже в коллекции. */
@media (hover: hover) {
  .card-video-actions__btn {
    opacity: 0;
    transition:
      var(--transition) opacity,
      var(--transition) background-color,
      var(--transition) border-color,
      var(--transition) color;
  }

  .card-video:is(:hover, :focus-within) .card-video-actions__btn {
    opacity: 1;
  }

  .card-video-actions__btn:is(:hover, :focus-visible) {
    background-color: $video-card-action-bg--hover;
  }

  .card-video-actions__btn.--active:is(:hover, :focus-visible) {
    background-color: $video-card-action-active-bg--hover;
    border-color: $video-card-action-active-border--hover;
    color: $video-card-action-active-icon--hover;
  }
}

@media (hover: none) {
  .card-video-actions__btn:not(.--active) {
    display: none;
  }
}
</style>
