{% extends "home/base.html" %}
{% block content %}
{% load static %}
<div class="title-bar">
    <h1>Recent Videos</h1>
</div>
<div class="two-col">
    <div class="sort">
        <div>
            <p>Sort order from <span class="settings-current">{{ sortorder }}</span>
            <select name="sort" id="sort" onchange="sortChange(this.value)">
                <option value="" disabled selected> -- change sort order -- </option>
                <option value="published">date published</option>
                <option value="downloaded">date downloaded</option>
            </select></p>
        </div>
        <div>
            <p>Hide watched videos <span class="settings-current">{{ hide_watched }}</span>
            <select name="watched" id="watched" onchange="hideWatched(this.value)">
                <option value="" disabled selected> -- change hide watched -- </option>
                <option value="0">show watched videos</option>
                <option value="1">hide watched videos</option>
            </select></p>
        </div>
    </div>
    <div class="search-form">
        <form action="/" method="POST" id="search-box">
            {% csrf_token %}
            <input name="videoSearch" list="resultBox" type="text" id="searchInput" autocomplete="off">
        </form>
        <div class="search-icon">
            <img src="{% static 'img/icon-search.svg' %}" alt="search-icon" onclick="showSearch()">
        </div>
    </div>
</div>
<div id="player" class="video-player"></div>
<div class="video-list">
    {% if videos %}
        {% for video in videos %}
            <div class="video-item">
                <a href="#player" data-src="/media/{{ video.source.media_url }}" data-thumb="/cache/videos/{{ video.source.youtube_id }}.jpg" data-title="{{ video.source.title }}" data-channel="{{ video.source.channel.channel_name }}" data-id="{{ video.source.youtube_id }}" onclick="createPlayer(this)">
                    <div class="video-thumb-wrap">
                        <div class="video-thumb">
                            <img src="/cache/videos/{{ video.source.youtube_id }}.jpg" 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">
                    <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 }}" class="seen-icon">
                        {% 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>
{% endblock content %}