<template>
  <ft-card class="relative">
    <ft-loader
      v-if="isLoading"
    />
    <div
      v-else
    >
      <h3
        class="pointer"
        @click="goToPlaylist"
      >
        {{ playlistTitle }}
      </h3>
      <span
        class="channelName"
        @click="goToChannel"
      >
        {{ channelName }}
      </span>
      <span
        class="playlistIndex"
      >
        - {{ currentVideoIndex }} / {{ playlistVideoCount }}
      </span>
      <p>
        <font-awesome-icon
          class="playlistIcon"
          :class="{ playlistIconActive: loopEnabled }"
          icon="retweet"
          :title="$t('Video.Loop Playlist')"
          @click="toggleLoop"
        />
        <font-awesome-icon
          class="playlistIcon"
          :class="{ playlistIconActive: shuffleEnabled }"
          icon="random"
          :title="$t('Video.Shuffle Playlist')"
          @click="toggleShuffle"
        />
        <font-awesome-icon
          class="playlistIcon"
          :class="{ playlistIconActive: reversePlaylist }"
          icon="exchange-alt"
          :title="$t('Video.Reverse Playlist')"
          @click="toggleReversePlaylist"
        />
        <font-awesome-icon
          class="playlistIcon"
          icon="step-backward"
          :title="$t('Video.Play Previous Video')"
          @click="playPreviousVideo"
        />
        <font-awesome-icon
          class="playlistIcon"
          icon="step-forward"
          :title="$t('Video.Play Next Video')"
          @click="playNextVideo"
        />
      </p>
      <div
        v-if="!isLoading"
        class="playlistItems"
      >
        <div
          v-for="(item, index) in playlistItems"
          :key="index"
          class="playlistItem"
        >
          <div class="videoIndexContainer">
            <font-awesome-icon
              v-if="item.id === videoId"
              class="videoIndexIcon"
              icon="play"
            />
            <p
              v-else
              class="videoIndex"
            >
              {{ index + 1 }}
            </p>
          </div>
          <ft-list-video
            :data="item"
            :playlist-id="playlistId"
            appearance="watchPlaylistItem"
            force-list-type="list"
          />
        </div>
      </div>
    </div>
  </ft-card>
</template>

<script src="./watch-video-playlist.js" />
<style scoped src="./watch-video-playlist.css" />
