{% extends "home/base.html" %}
{% block content %}
{% load static %}
<div class="boxed-content">
    <div class="title-bar">
        <h1>Recent Videos</h1>
    </div>
    <div class="view-controls">
        <div class="toggle">
            <span>Hide watched:</span>
            <div class="toggleBox">
                <input id="hide_watched" onclick="toggleCheckbox(this)" type="checkbox" {% if hide_watched %}checked{% endif %}>
                {% if hide_watched %}
                    <label for="" class="ofbtn">Off</label>
                {% else %}
                    <label for="" class="onbtn">On</label>
                {% endif %}
            </div>
        </div>
        <div class="view-icons">
            <div class="sort">
                <div id="hidden-form">
                    <span>Sort by:</span>
                    <select name="sort" id="sort" onchange="sortChange(this.value)">
                        <option value="published" {% if sort_by == "published" %}selected{% endif %}>date published</option>
                        <option value="downloaded" {% if sort_by == "published" %}selected{% endif %}>date downloaded</option>
                        <option value="views" {% if sort_by == "published" %}selected{% endif %}>views</option>
                        <option value="likes" {% if sort_by == "published" %}selected{% endif %}>likes</option>
                    </select>
                    <select name="sord-order" id="sort-order" onchange="sortChange(this.value)">
                        <option value="asc" {% if sort_order == "asc" %}selected{% endif %}>asc</option>
                        <option value="desc" {% if sort_order == "desc" %}selected{% endif %}>desc</option>
                    </select>
                </div>
            </div>
            <img src="{% static 'img/icon-sort.svg' %}" alt="sort-icon" onclick="showForm()">
            <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">
    <div class="video-list {{ view_style }}">
        {% if results %}
            {% for video in results %}
                <div class="video-item {{ view_style }}">
                    <a href="#player" data-src="/media/{{ video.source.media_url }}" data-thumb="/cache/{{ video.source.vid_thumb_url }}" data-title="{{ video.source.title }}" data-channel="{{ video.source.channel.channel_name }}" data-channel-id="{{ video.source.channel.channel_id }}" data-id="{{ video.source.youtube_id }}" onclick="createPlayer(this)">
                        <div class="video-thumb-wrap {{ view_style }}">
                            <div class="video-thumb">
                                <img src="/cache/{{ video.source.vid_thumb_url }}" alt="video-thumb">
                            </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.source.youtube_id }}">
                            {% if video.source.player.watched %}
                                <img src="{% static 'img/icon-seen.svg' %}" alt="seen-icon" id="{{ video.source.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.source.youtube_id }}" onclick="isWatched(this.id)" class="unseen-icon" title="Mark as watched.">
                            {% endif %}
                            <span>{{ video.source.published }} | {{ video.source.player.duration_str }}</span>
                        </div>
                        <div>
                            <a href="{% url 'channel_id' video.source.channel.channel_id %}"><h3>{{ video.source.channel.channel_name }}</h3></a>
                            <a class="video-more" href="{% url 'video' video.source.youtube_id %}"><h2>{{ video.source.title }}</h2></a>
                        </div>
                    </div>
                </div>
            {% endfor %}
        {% else %}
            <h2>No videos found...</h2>
        {% endif %}
    </div>
</div>
{% endblock content %}