{% extends "home/base.html" %}
{% block content %}
{% load static %}
{% load humanize %}
<div class="video-main"></div>
<div class="boxed-content">
    <div class="title-bar">
        {% if cast %}
            <google-cast-launcher id="castbutton"></google-cast-launcher>
        {% endif %}
        <h1 id="video-title">{{ video.title }}</h1>
    </div>
    <div class="info-box info-box-3">
        <div class="info-box-item">
            <div class="round-img">
                <a href="{% url 'channel_id' video.channel.channel_id %}">
                    <img src="/cache/channels/{{ video.channel.channel_id }}_thumb.jpg" alt="channel-thumb">
                </a>
            </div>
            <div>
                <h3><a href="{% url 'channel_id' video.channel.channel_id %}">{{ video.channel.channel_name }}</a></h3>
                {% if video.channel.channel_subs >= 1000000 %}
                    <p>Subscribers: {{ video.channel.channel_subs|intword }}</p>
                {% else %}
                    <p>Subscribers: {{ video.channel.channel_subs|intcomma }}</p>
                {% endif %}
            </div>
        </div>
        <div class="info-box-item">
            <div>
                <p>Published: {{ video.published }}</p>
                <p>Last refreshed: {{ video.vid_last_refresh }}</p>
                <p class="video-info-watched">Watched:
                    {% if video.player.watched %}
                        <img src="{% static 'img/icon-seen.svg' %}" alt="seen-icon" id="{{ video.youtube_id }}" onclick="isUnwatched(this.id)" class="seen-icon" title="Mark as unwatched">
                    {% else %}
                        <img src="{% static 'img/icon-unseen.svg' %}" alt="unseen-icon" id="{{ video.youtube_id }}" onclick="isWatched(this.id)" class="unseen-icon" title="Mark as watched.">
                    {% endif %}
                </p>
                {% if video.active %}
                    <p>Youtube: <a href="https://www.youtube.com/watch?v={{ video.youtube_id }}" target="_blank">Active</a></p>
                {% else %}
                    <p>Youtube: Deactivated</p>
                {% endif %}
                <a download="" href="/media/{{ video.media_url }}"><button id="download-item">Download File</button></a>
                <button onclick="deleteConfirm()" id="delete-item">Delete Video</button>
                <div class="delete-confirm" id="delete-button">
                    <span>Are you sure? </span><button class="danger-button" onclick="deleteVideo(this)" data-id="{{ video.youtube_id }}" data-redirect = "{{ video.channel.channel_id }}">Delete</button> <button onclick="cancelDelete()">Cancel</button>
                </div>
            </div>
        </div>
        <div class="info-box-item">
            <div>
                <p class="thumb-icon"><img src="{% static 'img/icon-eye.svg' %}" alt="views">: {{ video.stats.view_count|intcomma }}</p>
                <p class="thumb-icon like"><img src="{% static 'img/icon-thumb.svg' %}" alt="thumbs-up">: {{ video.stats.like_count|intcomma }}</p>
                {% if video.stats.dislike_count %}
                    <p class="thumb-icon"><img class="dislike" src="{% static 'img/icon-thumb.svg' %}" alt="thumbs-down">: {{ video.stats.dislike_count|intcomma }}</p>
                {% endif %}
                {% if video.stats.average_rating %}
                    <p class="rating-stars">Rating: 
                        {% for star in video.stats.average_rating %}
                            <img src="/static/img/icon-star-{{ star }}.svg" alt="{{ star }}">
                        {% endfor %}
                    </p>
                {% endif %}
            </div>
        </div>
    </div>
    {% if video.description %}
        <div class="info-box-item description-box">
            <p>Description: <button onclick="textReveal()" id="text-reveal-button">Show</button></p>
            <div id="text-reveal" class="description-text">
                {{ video.description|linebreaks }}
            </div>
        </div>
    {% endif %}
    {% if playlist_nav %}
        {% for playlist_item in playlist_nav %}
            <div class="playlist-wrap">
                <a href="{% url 'playlist_id' playlist_item.playlist_meta.playlist_id %}">
                    <h3>Playlist [{{ playlist_item.playlist_meta.current_idx|add:"1" }}]: {{ playlist_item.playlist_meta.playlist_name }}</h3>
                </a>
                <div class="playlist-nav">    
                    <div class="playlist-nav-item">
                        {% if playlist_item.playlist_previous %}
                            <a href="{% url 'video' playlist_item.playlist_previous.youtube_id %}">
                                <img src="/cache/{{ playlist_item.playlist_previous.vid_thumb }}" alt="previous thumbnail">
                            </a>
                            <div class="playlist-desc">
                                <p>Previous:</p>
                                <a href="{% url 'video' playlist_item.playlist_previous.youtube_id %}">
                                    <h3>[{{ playlist_item.playlist_previous.idx|add:"1" }}] {{ playlist_item.playlist_previous.title }}</h3>
                                </a>
                            </div>
                        {% endif %}
                    </div>
                    <div class="playlist-nav-item">
                        {% if playlist_item.playlist_next %}
                            <div class="playlist-desc">
                                <p>Next:</p>
                                <a href="{% url 'video' playlist_item.playlist_next.youtube_id %}">
                                    <h3>[{{ playlist_item.playlist_next.idx|add:"1" }}] {{ playlist_item.playlist_next.title }}</h3>
                                </a>
                            </div>
                            <a href="{% url 'video' playlist_item.playlist_next.youtube_id %}">
                                <img src="/cache/{{ playlist_item.playlist_next.vid_thumb }}" alt="previous thumbnail">
                            </a>
                        {% endif %}
                    </div>
                </div>
            </div>
        {% endfor %}
    {% endif %}
</div>
<script>
    var videoData = getVideoData('{{ video.youtube_id }}');
    var videoProgress = getVideoProgress('{{ video.youtube_id }}').position;
    window.onload = insertVideoTag(videoData, videoProgress);
</script>
{% endblock content %}