{% extends "home/base.html" %}
{% load static %}
{% block content %}
<div class="boxed-content">
    <div class="title-bar">
        <h1>Downloads {% if channel_filter_id %} for {{ channel_filter_name }}{% endif %}</h1>
    </div>
    <div id="notifications" data="download"></div>
    <div id="downloadControl"></div>
    <div class="info-box info-box-3">
        <div class="icon-text">
            <img id="rescan-icon" onclick="rescanPending()" src="{% static 'img/icon-rescan.svg' %}" alt="rescan-icon">
            <p>Rescan subscriptions</p>
        </div>
        <div class="icon-text">
            <img id="download-icon" onclick="dlPending()" src="{% static 'img/icon-download.svg' %}" alt="download-icon">
            <p>Start download</p>
        </div>
        <div class="icon-text">
            <img id="animate-icon" onclick="showForm()" src="{% static 'img/icon-add.svg' %}" alt="add-icon">
            <p>Add to download queue</p>
            <div class="show-form">
                <form id='hidden-form' action="/downloads/" method="post">
                    {% csrf_token %}
                    {{ add_form }}
                    <button type="submit">Add to download queue</button>
                </form>
            </div>
        </div>
    </div>
    <div class="view-controls three">
        <div class="toggle">
            <span>Show only ignored videos:</span>
            <div class="toggleBox">
                <input id="show_ignored_only" onclick="toggleCheckbox(this)" type="checkbox" {% if show_ignored_only %}checked{% endif %}>
                {% if not show_ignored_only %}
                    <label for="" class="ofbtn">Off</label>
                {% else %}
                    <label for="" class="onbtn">On</label>
                {% endif %}
            </div>
        </div>
        <div class="view-icons">
            {% if channel_agg_list|length > 1 %}
                <select name="channel_filter" id="channel_filter" onchange="channelFilterDownload(this.value)">
                    <option value="all" {% if not channel_filter_id %}selected{% endif %}>all</option>
                    {% for channel in channel_agg_list %}
                        <option {% if channel_filter_id == channel.id %}selected{% endif %} value="{{ channel.id }}">{{ channel.name }} ({{channel.count}})</option>
                    {% endfor %}
                </select>
            {% endif %}
            {% 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="downloads" data-value="grid" alt="grid view">
            <img src="{% static 'img/icon-listview.svg' %}" onclick="changeView(this)" data-origin="downloads" data-value="list" alt="list view">
        </div>
    </div>
    <h3>Total videos in queue: {{ max_hits }}{% if max_hits == 10000 %}+{% endif %} {% if channel_filter_id %} - from channel <i>{{ channel_filter_name }}</i>{% endif %}</h3>
</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 }}" id="dl-{{ video.source.youtube_id }}">
                    <div class="video-thumb-wrap {{ view_style }}">
                        <div class="video-thumb">
                            <img src="{{ video.source.vid_thumb_url }}" alt="video_thumb">
                            {% if show_ignored_only %}
                                <span>ignored</span>
                            {% else %}
                                <span>queued</span>
                            {% endif %}
                        </div>
                    </div>
                    <div class="video-desc {{ view_style }}">
                        <div>
                            {% if video.source.channel_indexed %}
                            <a href="{% url 'channel_id' video.source.channel_id %}">{{ video.source.channel_name }}</a>
                            {% else %}
                                <span>{{ video.source.channel_name }}</span>
                            {% endif %}
                            <h3>{{ video.source.title }}</h3>
                        </div>
                        <p>Published: {{ video.source.published }} | Duration: {{ video.source.duration }} | {{ video.source.youtube_id }}</p>
                        <div>
                            {% if show_ignored_only %}
                                <button data-id="{{ video.source.youtube_id }}" onclick="forgetIgnore(this)">Forget</button>
                                <button data-id="{{ video.source.youtube_id }}" onclick="addSingle(this)">Add to queue</button>
                            {% else %}
                                <button data-id="{{ video.source.youtube_id }}" onclick="toIgnore(this)">Ignore</button>
                                <button id="{{ video.source.youtube_id }}" data-id="{{ video.source.youtube_id }}" onclick="downloadNow(this)">Download now</button>
                            {% endif %}
                        </div>
                    </div>
                </div>
            {% endfor %}
        {% endif %}
    </div>
</div>
<script type="text/javascript" src="{% static 'progress.js' %}"></script>
{% endblock content %}