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

<div class="boxed-content">
    <div class="title-split">
        <div class="title-bar">
            <h1>Playlists</h1>
        </div>
        {% if request.user|has_group:"admin" or request.user.is_staff %}

        <div class="title-split-form">
            <img id="animate-icon" onclick="showForm();showForm('hidden-form2')" src="{% static 'img/icon-add.svg' %}" alt="add-icon" title="Subscribe to Playlists">
            <div class="show-form">
                <form id="hidden-form" action="/playlist/" method="post">
                    {% csrf_token %}
                    {{ subscribe_form }}
                    <button type="submit">Subscribe</button>
                </form>
                <form id="hidden-form2" action="/playlist/" method="post">
                    {% csrf_token %}
                    {{ create_form }}
                    <button type="submit">Create</button>
                </form>
            </div>
        </div>
        {% endif %}

    </div>
    <div id="notifications" data="subscription"></div>
    <div class="view-controls">
        <div class="toggle">
            <span>Show subscribed only:</span>
            <div class="toggleBox">
                <input id="show_subed_only" onclick="toggleCheckbox(this)" type="checkbox" {% if show_subed_only %}checked{% endif %}>
                {% if not show_subed_only %}
                    <label for="" class="ofbtn">Off</label>
                {% else %}
                    <label for="" class="onbtn">On</label>
                {% endif %}
            </div>
        </div>
        <div class="view-icons">
            <img src="{% static 'img/icon-gridview.svg' %}" onclick="changeView(this)" data-origin="playlist" data-value="grid" alt="grid view">
            <img src="{% static 'img/icon-listview.svg' %}" onclick="changeView(this)" data-origin="playlist" data-value="list" alt="list view">
        </div>
    </div>
    <div class="playlist-list {{ view_style }}">
        {% if results %}
            {% for playlist in results %}
            <div class="playlist-item {{ view_style }}">
                <div class="playlist-thumbnail">
                    <a href="{% url 'playlist_id' playlist.playlist_id %}">
                        <img src="/cache/playlists/{{ playlist.playlist_id }}.jpg" alt="{{ playlist.playlist_id }}-thumbnail">
                    </a>
                </div>
                <div class="playlist-desc {{ view_style }}">
                    {% if playlist.playlist_type != "custom" %}
                    	<a href="{% url 'channel_id' playlist.playlist_channel_id %}"><h3>{{ playlist.playlist_channel }}</h3></a>
                    {% endif %}
                    <a href="{% url 'playlist_id' playlist.playlist_id %}"><h2>{{ playlist.playlist_name }}</h2></a>
                    <p>Last refreshed: {{ playlist.playlist_last_refresh }}</p>
                    {% if playlist.playlist_type != "custom" %}
	                    {% if playlist.playlist_subscribed %}
	                        <button class="unsubscribe" type="button" data-type="playlist" data-subscribe="" data-id="{{ playlist.playlist_id }}" onclick="subscribeStatus(this)" title="Unsubscribe from {{ playlist.playlist_name }}">Unsubscribe</button>
	                    {% else %}
	                        <button type="button" data-type="playlist" data-subscribe="true" data-id="{{ playlist.playlist_id }}" onclick="subscribeStatus(this)" title="Subscribe to {{ playlist.playlist_name }}">Subscribe</button>
	                    {% endif %}
	                {% endif %}
                </div>
            </div>
            {% endfor %}
        {% else %}
            <h2>No playlists found...</h2>
        {% endif %}
    </div>
</div>
<script type="text/javascript" src="{% static 'progress.js' %}"></script>
{% endblock content %}