{% extends "home/base.html" %}
{% load static %}
{% load humanize %}
{% block content %}
{% load auth_extras %}

<div class="boxed-content">
    <div class="title-bar">
        <h1>{{ playlist_info.playlist_name }}</h1>
    </div>
    <div class="info-box info-box-3">
        {% if playlist_info.playlist_type != "custom" %}
	        <div class="info-box-item">
	            <div class="round-img">
	                <a href="{% url 'channel_id' channel_info.channel_id %}">
	                    <img src="/cache/channels/{{ channel_info.channel_id }}_thumb.jpg" alt="channel-thumb">
	                </a>
	            </div>
	            <div>
	                <h3><a href="{% url 'channel_id' channel_info.channel_id %}">{{ channel_info.channel_name }}</a></h3>
	                {% if channel_info.channel_subs >= 1000000 %}
	                    <span>Subscribers: {{ channel_info.channel_subs|intword }}</span>
	                {% else %}
	                    <span>Subscribers: {{ channel_info.channel_subs|intcomma }}</span>
	                {% endif %}
	            </div>
	        </div>
	    {% endif %}
        
        <div class="info-box-item">
            <div>
                <p>Last refreshed: {{ playlist_info.playlist_last_refresh }}</p>
                {% if playlist_info.playlist_type != "custom" %}
	                <p>Playlist:
	                    {% if playlist_info.playlist_subscribed %}
	                        {% if request.user|has_group:"admin" or request.user.is_staff %}
	                        <button class="unsubscribe" type="button" data-type="playlist" data-subscribe="" data-id="{{ playlist_info.playlist_id }}" onclick="subscribeStatus(this)" title="Unsubscribe from {{ playlist_info.playlist_name }}">Unsubscribe</button>
	                        {% endif %}
	                    {% else %}
	                        <button type="button" data-type="playlist" data-subscribe="true" data-id="{{ playlist_info.playlist_id }}" onclick="subscribeStatus(this)" title="Subscribe to {{ playlist_info.playlist_name }}">Subscribe</button>
	                    {% endif %}
	                </p>
	                {% if playlist_info.playlist_active %}
	                    <p>Youtube: <a href="https://www.youtube.com/playlist?list={{ playlist_info.playlist_id }}" target="_blank">Active</a></p>
	                {% else %}
	                    <p>Youtube: Deactivated</p>
	                {% endif %}
                {% endif %}
                <button onclick="deleteConfirm()" id="delete-item">Delete Playlist</button>
                <div class="delete-confirm" id="delete-button">
                    <span>Delete {{ playlist_info.playlist_name }}?</span>
                    <button onclick="deletePlaylist(this)" data-action="" data-id="{{ playlist_info.playlist_id }}">Delete metadata</button>
                    <button onclick="deletePlaylist(this)" data-action="delete-videos" class="danger-button" data-id="{{ playlist_info.playlist_id }}">Delete all</button><br>
                    <button onclick="cancelDelete()">Cancel</button>
                </div>
            </div>
        </div>
        <div class="info-box-item">
            <div>
                {% if max_hits %}
                    <p>Total Videos archived: {{ max_hits }}/{{ playlist_info.playlist_entries|length }}</p>
                    <div id="watched-button" class="button-box">
                        <button title="Mark all videos from {{ playlist_info.playlist_name }} as watched" type="button" id="watched-button" data-id="{{ playlist_info.playlist_id }}" onclick="isWatchedButton(this)">Mark as watched</button>
                        <button title="Mark all videos from {{ playlist_info.playlist_name }} as unwatched" type="button" id="unwatched-button" data-id="{{ playlist_info.playlist_id }}" onclick="isUnwatchedButton(this)">Mark as unwatched</button>
                    </div>
                {% endif %}
                {% if reindex %}
                    <p>Reindex scheduled</p>
                {% else %}
                    <div id="reindex-button" class="button-box">
                    	{% if playlist_info.playlist_type != "custom" %}
                        	<button data-id="{{ playlist_info.playlist_id }}" data-type="playlist" onclick="reindex(this)" title="Reindex Playlist {{ playlist_info.playlist_name }}">Reindex</button>
                        {% endif %}
                        <button data-id="{{ playlist_info.playlist_id }}" data-type="playlist" data-extract-videos="true" onclick="reindex(this)" title="Reindex Videos of {{ playlist_info.playlist_name }}">Reindex Videos</button>
                    </div>
                {% endif %}
            </div>
        </div>
    </div>
    {% if playlist_info.playlist_description %}
        <div class="description-box">
            <p id="text-expand" class="description-text">
                {{ playlist_info.playlist_description|linebreaksbr|urlizetrunc:50 }}
            </p>
            <button onclick="textExpand()" id="text-expand-button">Show more</button>
        </div>
    {% endif %}
</div>
<div class="boxed-content {% if view_style == "grid" %}boxed-{{ grid_items }}{% endif %}">
    <div class="view-controls">
        <div class="toggle">
            <span>Hide watched videos:</span>
            <div class="toggleBox">
                <input id="hide_watched" onclick="toggleCheckbox(this)" type="checkbox" {% if hide_watched %}checked{% endif %}>
                {% if not hide_watched %}
                    <label for="" class="ofbtn">Off</label>
                {% else %}
                    <label for="" class="onbtn">On</label>
                {% endif %}
            </div>
        </div>
        <div class="view-icons">
            {% if view_style == "grid" %}
            <div class="grid-count">
                {% if grid_items < 7 %}
                    <img src="{% static 'img/icon-add.svg' %}" onclick="changeGridItems(this)" data-value="{{ grid_items|add:"1"}}" alt="grid plus row">
                {% endif %}
                {% if grid_items > 3 %}
                    <img src="{% static 'img/icon-substract.svg' %}" onclick="changeGridItems(this)" data-value="{{ grid_items|add:"-1"}}" alt="grid minus row">
                {% endif %}
            </div>
            {% endif %}
            <img src="{% static 'img/icon-gridview.svg' %}" onclick="changeView(this)" data-origin="home" data-value="grid" alt="grid view">
            <img src="{% static 'img/icon-listview.svg' %}" onclick="changeView(this)" data-origin="home" data-value="list" alt="list view">
        </div>
    </div>
</div>
<div id="player" class="player-wrapper"></div>
<div class="boxed-content {% if view_style == "grid" %}boxed-{{ grid_items }}{% endif %}">
    <div class="video-list {{ view_style }} {% if view_style == "grid" %}grid-{{ grid_items }}{% endif %}">
        {% if results %}
            {% for video in results %}
                <div class="video-item {{ view_style }}">
                    <a href="#player" data-id="{{ video.youtube_id }}" onclick="createPlayer(this)">
                        <div class="video-thumb-wrap {{ view_style }}">
                            <div class="video-thumb">
                                <img src="{{ video.vid_thumb_url }}" alt="video-thumb">
                                {% if video.player.progress %}
                                    <div class="video-progress-bar" id="progress-{{ video.youtube_id }}" style="width: {{video.player.progress}}%;"></div>
                                {% else %}
                                    <div class="video-progress-bar" id="progress-{{ video.youtube_id }}" style="width: 0%;"></div>
                                {% endif %}
                            </div>
                            <div class="video-play">
                                <img src="{% static 'img/icon-play.svg' %}" alt="play-icon">
                            </div>
                        </div>
                    </a>
                    <div class="video-desc {{ view_style }}">
                        <div class="video-desc-player" id="video-info-{{ video.youtube_id }}">
                            {% if video.player.watched %}
                                <img src="{% static 'img/icon-seen.svg' %}" alt="seen-icon" data-id="{{ video.youtube_id }}" data-status="watched" onclick="updateVideoWatchStatus(this)" class="watch-button" title="Mark as unwatched">
                            {% else %}
                                <img src="{% static 'img/icon-unseen.svg' %}" alt="unseen-icon" data-id="{{ video.youtube_id }}" data-status="unwatched" onclick="updateVideoWatchStatus(this)" class="watch-button" title="Mark as watched">
                            {% endif %}
                            <span>{{ video.published }} | {{ video.player.duration_str }}</span>
                        </div>
                        <div class="video-desc-details">
                            <div>
                                {% if playlist_info.playlist_type == "custom" %}
	                            	<a href="{% url 'channel_id' video.channel.channel_id %}"><h3>{{ video.channel.channel_name }}</h3></a>
	                            {% endif %}
	                            <a class="video-more" href="{% url 'video' video.youtube_id %}"><h2>{{ video.title }}</h2></a>
                        	</div>
                        	{% if playlist_info.playlist_type == "custom" %}
                        		{% if pagination %}
                        			{% if pagination.last_page > 0 %}
	                        			<img id="{{ video.youtube_id }}-button" src="{% static 'img/icon-dot-menu.svg' %}" alt="dot-menu-icon" data-id="{{ video.youtube_id }}" data-context="video" onclick="showCustomPlaylistMenu(this,'{{playlist_info.playlist_id}}',{{pagination.current_page}},{{pagination.last_page}})" class="dot-button" title="More actions">
	                        		{% else %}
	                        			<img id="{{ video.youtube_id }}-button" src="{% static 'img/icon-dot-menu.svg' %}" alt="dot-menu-icon" data-id="{{ video.youtube_id }}" data-context="video" onclick="showCustomPlaylistMenu(this,'{{playlist_info.playlist_id}}',{{pagination.current_page}},{{pagination.current_page}})" class="dot-button" title="More actions">
                        			{% endif %}
                        		{% else %}
                        			<img id="{{ video.youtube_id }}-button" src="{% static 'img/icon-dot-menu.svg' %}" alt="dot-menu-icon" data-id="{{ video.youtube_id }}" data-context="video" onclick="showCustomPlaylistMenu(this,'{{playlist_info.playlist_id}}',0,0)" class="dot-button" title="More actions">
                        		{% endif %}
                        	{% endif %}
                        </div>
                    </div>
                </div>
            {% endfor %}
        {% else %}
            <h2>No videos found...</h2>
            {% if playlist_info.playlist_type == "custom" %}
               <p>Try going to the <a href="{% url 'home' %}">home page</a> to add videos to this playlist.</p>
            {% else %}
            	<p>Try going to the <a href="{% url 'downloads' %}">downloads page</a> to start the scan and download tasks.</p>
            {% endif %} 
        {% endif %}
    </div>
</div>
{% endblock content %}