{% extends "base.html" %}
{% load static %}

{% block title %}Queue{% endblock %}

{% block content %}


<nav class="navbar navbar-default navbar-fixed-top" style="top: 50px; border-top: 1px solid #bbbbbb; max-height: 50px;  box-shadow: 2px 2px 4px #BBBBBB;">
  <div class="container">
    <ul class="navbar-nav" style="max-height: 50px; margin: 0;">
        <li class="btn-toolbar nav navbar-nav" style="margin: 0;">
            <button id="request-button" class="btn navbar-btn btn-primary">
                Request
            </button>
            <div id="infobar-buttons" class="btn-group">
                {% if perms.queues.can_control_volume %}
                <button type="button" id="mute" class="btn navbar-btn btn-sm block-button">
                    <span id="mute-button-span" class="glyphicon glyphicon-volume-off"></span>
                </button>
                <button type="button" id="volume_down" class="btn navbar-btn btn-sm block-button">
                    <span id="voldown-button-span" class="glyphicon glyphicon-volume-down"></span>
                </button>
                <button type="button" id="volume_up" class="btn navbar-btn btn-sm block-button">
                    <span id="volup-button-span" class="glyphicon glyphicon-volume-up"></span>
                </button>
                {% endif %}
                {% if perms.queues.can_skip %}
                <button type="button" id="skip" class="btn navbar-btn btn-sm block-button">
                    <span id="skip-button-span" class="glyphicon glyphicon-fast-forward"></span>
                </button>
                {% endif %}
            </div>
        </li>
    </ul>
    <ul class="nav navbar-nav navbar-right hidden-xs">
        <li>
            <div class="infobar">
                <p class="navbar-text start-queue hidden-sm hidden-xs"></p>
                <p class="navbar-text end-queue"></p>
                <div class="navbar-text">
                    <p class="duration-queue"></p>
                </div>
            </div>
        </li>
    </ul>
  </div>
</nav>
<br><br>
<div class="alert-location">
</div>
<div id="request-container" class="hidden">
    <table id="request-table" class="table table-striped">
        <thead>
            <tr>
                <th>Artist</th>
                <th>Title</th>
                <th>Uploader</th>
                <th style="text-align: right;">Length</th>
                <th>Report</th>
            </tr>
            <tr>
                <th colspan="2"><input id="search-all" class="search-input" type="text"></th>
                <th colspan="3"><input id="search-uploader" class="search-input" type="text"></th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th colspan="3" class="ts-pager form-horizontal">
                    <button type="button" class="btn first"><i class="icon-step-backward glyphicon glyphicon-step-backward"></i></button>
                    <button type="button" class="btn prev"><i class="icon-arrow-left glyphicon glyphicon-backward"></i></button>
                    <button type="button" class="btn next"><i class="icon-arrow-right glyphicon glyphicon-forward"></i></button>
                    <button type="button" class="btn last"><i class="icon-step-forward glyphicon glyphicon-step-forward"></i></button>
                    <select class="pagesize input-mini" title="Select page size">
                        <option selected value="10">10</option>
                        <option value="25">25</option>
                        <option value="50">50</option>
                        <option value="100">100</option>
                        <option value="500">500</option>
                        <option value="1000">1000</option>
                    </select>
                    <select class="pagenum input-mini" title="Select page number"></select>
                </th>
                <th colspan="2"></th>
            </tr>
        </tfoot>
        <tbody>
        </tbody>
    </table>
</div>
<div id="queue-container">
    <table class="table table-striped">
        <thead>
            <tr class="table-header-style">
                <td class="col-md-4">Artist</td>
                <td class="col-md-4">Title</td>
                <td class="col-md-2 hidden-xs">Requested By</td>
                <td class="col-md-1 hidden-xs text-info" style="cursor: pointer;">
                    <span id="timeswitch" class="btn-link" >Plays In</span>
                </td>
                <td class="col-md-1 control-icons">Control</td>
            </tr>
            <tr class="currentsong" style="font-weight: bold">
                <td class="artist"></td>
                <td class="title"></td>
                <td class="requested-by hidden-xs"></td>
                <td colspan="2"></td>
            </tr>
        </thead>
        <tbody class="queuebody">
        </tbody>
    </table>
</div>

<script type="text/javascript" src="{% static 'js/js.cookie-2.1.3.min.js' %}"></script>
<script type="text/javascript" src="{% static 'js/queue.js' %}?1"></script>
<script type="text/javascript">
var csrf_token = "{{ csrf_token }}";
var canSkip = {{ perms.queues.can_skip|yesno:"1,0" }};
var canCancel = {{ perms.queues.can_cancel|yesno:"1,0" }};
var canMoveSongs = {{ perms.queues.can_move|yesno:"1,0" }};
</script>
{% endblock %}