<div class="queue active" id="queue-tab">
    <h2>$T('menu-queue')</h2>

    <div class="info-container" data-bind="visible: diskSpaceLeft1()" style="display: none;">
        <!-- ko if: hasWarnings()  -->
        <div class="info-container-box">
            <a href="#queue-messages" class="queue-error-info">
                <span class="glyphicon glyphicon-exclamation-sign"></span> <strong data-bind="text: allWarnings().length"></strong>
            </a>
        </div>
        <!-- /ko -->
        <!-- ko if: (queueDataLeft() != '')  -->
        <div class="info-container-box">
            <span class="glyphicon glyphicon-save"></span>
            <span data-bind="text: queueDataLeft"></span> $T('Glitter-left')
        </div>
        <!-- /ko -->
        <!-- ko if: (parseInt(quotaLimit()) != 0)  -->
        <div class="info-container-box">
            <span data-bind="css: { 'queue-error-info' : (parseInt(quotaLimitLeft())<=0) }">
                <span class="glyphicon glyphicon-log-in"></span> <span data-bind="text: quotaLimitLeft"></span> / <span data-bind="text: quotaLimit"></span> $T('quota-left')
            </span>
        </div>
        <!-- /ko -->
        <div class="info-container-box" data-bind="css: { 'queue-error-info' : diskSpaceExceeded1() }">
            <span class="glyphicon glyphicon-hdd"></span> <span data-bind="text: diskSpaceLeft1"></span>B $T('Glitter-free')
            <!-- ko if: diskSpaceLeft2()  -->
            <em>($T('Glitter-freeTemp'))</em>
            <!-- /ko -->
        </div>
        <!-- ko if: diskSpaceLeft2()  -->
        <div class="info-container-box"  data-bind="css: { 'queue-error-info' : diskSpaceExceeded2() }">
            <span class="glyphicon glyphicon-hdd"></span> <span data-bind="text: diskSpaceLeft2"></span>B $T('Glitter-free')
        </div>
        <!-- /ko -->
        <div class="info-container-box-sorting" style="display: none" data-bind="visible: refreshRate() > 2">
            <a href="#" data-bind="click: refresh">
                <span class="glyphicon glyphicon-repeat" data-tooltip="true" data-placement="left" title="$T('Glitter-refresh')"></span>
            </a>
        </div>
        <div class="info-container-box-sorting dropdown" data-bind="visible: hasQueue()">
            <a href="#" data-toggle="dropdown">
                <span class="glyphicon glyphicon-sort-by-alphabet" data-tooltip="true" data-placement="left" title="$T('cmenu-sorting')"></span>
            </a>
            <a href="#" data-bind="click: queue.showMultiEdit">
                <span class="glyphicon glyphicon-tasks" data-tooltip="true" data-placement="left" title="$T('Glitter-multiOperations')"></span>
            </a>
            <ul class="dropdown-menu">
                <li><a href="#" data-action="sortRemainingAsc" data-bind="click: queue.queueSorting">$T('Glitter-sortRemaining')</a></li>
                <li><a href="#" data-action="sortAgeAsc" data-bind="click: queue.queueSorting">$T('Glitter-sortAgeAsc')</a></li>
                <li><a href="#" data-action="sortAgeDesc" data-bind="click: queue.queueSorting">$T('Glitter-sortAgeDesc')</a></li>
                <li><a href="#" data-action="sortNameAsc" data-bind="click: queue.queueSorting">$T('Glitter-sortNameAsc')</a></li>
                <li><a href="#" data-action="sortNameDesc" data-bind="click: queue.queueSorting">$T('Glitter-sortNameDesc')</a></li>
                <li><a href="#" data-action="sortSizeAsc" data-bind="click: queue.queueSorting">$T('Glitter-sortSizeAsc')</a></li>
                <li><a href="#" data-action="sortSizeDesc" data-bind="click: queue.queueSorting">$T('Glitter-sortSizeDesc')</a></li>
            </ul>
        </div>
    </div>
    <div class="clearfix"></div>
    <table class="table table-striped table-hover queue-table">
        <thead>
            <tr>
                <th style="width: 25px;"></th>
                <th></th>
                <!-- ko foreach: extraQueueColumns -->
                <th class="table-header-extra"></th>
                <!-- /ko -->
                <th class="table-header-progress" data-bind="css: { 'table-header-progress-smaller' : extraQueueColumns().length }"></th>
                <th style="width: 85px;"></th>
                <th style="width: 60px;"></th>
            </tr>
        </thead>
        <!-- ko if: !hasQueue() -->
        <tbody class="no-downloads">
            <tr>
                <td colspan="6" data-bind="attr: { 'colspan': 5 + extraQueueColumns().length }">
                    <a href="#modal-add-nzb" class="hover-button" data-toggle="modal">
                        <span title="$T('Glitter-dragAndDrop')" data-tooltip="true"><span class="glyphicon glyphicon-plus-sign"></span> $T('Glitter-addNZB')</span>
                    </a>
                </td>
            </tr>
        </tbody>
        <!-- /ko -->
        <tbody data-bind="visible: hasQueue(), sortable: { data: queue.queueItems, afterMove: queue.move, options: { start: queue.dragStart, stop: queue.dragStop, axis: 'y', containment: '.queue', distance: 10 } }" style="display: none;">
            <tr class="queue-item">
                <td>
                    <a href="#" data-bind="click: pauseToggle, attr: { 'title': pausedStatus() ? '$T('link-resume')' : '$T('link-pause')' }">
                        <span class="hover-button glyphicon" data-bind="css: queueIcon"></span>
                    </a>
                </td>
                <td class="name">
                    <div class="row-wrap-text" data-bind="visible: !editingName(), css: { 'direct-unpack-text': direct_unpack }">
                         <!-- ko foreach: labels -->
                            <span class="label label-warning" data-bind="text: \$data" ></span>
                        <!-- /ko -->
                        <span data-bind="text: name, attr: { 'title': name_title }"></span>
                        <!-- ko if: password()  -->
                        <small class="queue-item-password">
                            <span class="glyphicon glyphicon-lock"></span>
                            <span data-bind="text: password"></span>
                        </small>
                        <!-- /ko -->
                    </div>
                    <form data-bind="submit: editingNameSubmit">
                        <input type="text" data-bind="value: nameForEdit, visible: editingName(), hasfocus: editingName" />
                    </form>
                    <div class="name-icons direct-unpack hover-button" data-bind="visible: direct_unpack() && !editingName()">
                        <span class="glyphicon glyphicon-compressed"></span> <span data-bind="text: direct_unpack"></span>
                    </div>
                    <div class="name-options" data-bind="visible: !editingName(), css: { disabled: isGrabbing() }">
                        <a href="#" data-bind="click: \$parent.queue.moveButton" class="hover-button buttonMoveToTop" title="$T('Glitter-top')"><span class="glyphicon glyphicon-chevron-up"></span></a>
                        <a href="#" data-bind="click: \$parent.queue.moveButton" class="hover-button buttonMoveToBottom" title="$T('Glitter-bottom')"><span class="glyphicon glyphicon-chevron-down"></span></a>
                        <a href="#" data-bind="click: editName" class="hover-button" title="$T('Glitter-rename')"><span class="glyphicon glyphicon-pencil"></span></a>
                        <a href="#" data-bind="click: showFiles" class="hover-button" title="$T('nzoDetails') - $T('srv-password')"><span class="glyphicon glyphicon-folder-open"></span></a>
                        <small data-bind="text: avg_age"></small>
                    </div>
                </td>
                <!-- ko foreach: parent.parent.extraQueueColumns -->
                <td class="row-extra-text">
                    <div class="row-wrap-text" data-bind="text: \$parent.showColumn(\$data)"></div>
                </td>
                <!-- /ko -->
                <td class="progress-indicator">
                    <div class="progress">
                        <div class="progress-bar progress-bar-info" data-bind="attr: { 'style': 'width: ' + percentage() + '%; background-color: ' + progressColor() + ';' }">
                            <strong data-bind="text: percentage() + '%'"></strong>
                            <i data-bind="text: missingText"></i>
                        </div>
                        <span data-bind="text: progressText"></span>
                    </div>
                </td>
                <td class="timeleft row-wrap-text" data-bind="text: statusText"></td>
                <td class="delete">
                    <label data-bind="visible: parent.isMultiEditing()">
                        <input type="checkbox" name="multiedit" title="$T('Glitter-multiSelect')" data-bind="click: parent.addMultiEdit, attr: { 'id': 'multiedit_' + id } " />
                    </label>
                    <!-- ko if: !isGrabbing() -->
                    <div class="dropdown" data-bind="visible: !parent.isMultiEditing()">
                        <a href="#" data-toggle="dropdown" data-bind="click: toggleDropdown">
                            <span class="caret"></span>
                        </a>
                        <!-- ko if: hasDropdown()  -->
                        <ul class="dropdown-menu queue-item-settings">
                            <li title="$T('category')" data-tooltip="true" data-placement="left">
                                <span class="glyphicon glyphicon-tag"></span>
                                <select name="Category" class="form-control" data-bind="options: parent.categoriesList, optionsValue: 'catValue', optionsText: 'catText',  value: category, event: { change: changeCat }"></select>
                            </li>
                            <!-- ko if: !isFetchingBlocks -->
                            <li title="$T('priority')" data-tooltip="true" data-placement="left">
                                <span class="glyphicon glyphicon-sort-by-attributes-alt"></span>
                                <select name="Priority" class="form-control" data-bind="options: parent.priorityOptions, optionsValue: 'value', optionsText: 'name', value: priority, event: { change: changePriority }"></select>
                            </li>
                            <!-- /ko -->
                            <li title="$T('swtag-pp')" data-tooltip="true" data-placement="left">
                                <span class="glyphicon glyphicon-check"></span>
                                <select name="Processing" class="form-control" data-bind="options: parent.processingOptions, optionsValue: 'value', optionsText: 'name', value: unpackopts, event: { change: changeProcessing }"></select>
                            </li>
                            <li title="$T('eoq-scripts')" data-tooltip="true" data-placement="left">
                                <span class="glyphicon glyphicon-flash"></span>
                                <select name="Post-processing" class="form-control" data-bind="options: parent.scriptsList, value: script, optionsValue: 'scriptValue', optionsText: 'scriptText', event: { change: changeScript }, enable: (parent.scriptsList().length > 1)"></select>
                            </li>
                        </ul>
                        <!-- /ko -->
                    </div>
                    <!-- /ko -->
                    <a href="#" class="hover-button" title="$T('removeNZB-Files')" data-bind="click: parent.triggerRemoveDownload"><span class="glyphicon glyphicon-trash"></span></a>
                </td>
            </tr>
        </tbody>
    </table>

    <form class="multioperations-selector" data-bind="visible: (hasQueue() && queue.isMultiEditing())" style="display: none;">
        <div class="add-nzb-inputbox add-nzb-inputbox-small add-nzb-inputbox-options">
            <label for="multiedit-checkall-queue">
                <input type="checkbox" name="multieditCheckAll" id="multiedit-checkall-queue" title="$T('Glitter-checkAll')" data-bind="click: queue.checkAllJobs" data-tooltip="true" data-placement="top" />
            </label>
            <a href="#" class="hover-button" title="$T('removeNZB-Files')" data-bind="click: queue.doMultiDelete" data-tooltip="true" data-placement="top">
                <span class="glyphicon glyphicon-trash"></span>
            </a>
        </div>
        <div class="add-nzb-inputbox add-nzb-inputbox-small">
            <label for="multiedit-play" data-bind="event: { mousedown: queue.handleMultiEditStatusMouseDown }">
                <input type="radio" name="multiedit-status" value="resume" id="multiedit-play" data-bind="event: { change: queue.doMultiEditUpdate }" />
                <span class="glyphicon glyphicon-play" title="$T('link-resume')" data-tooltip="true" data-placement="top"></span>
            </label>
            <label for="multiedit-pause" data-bind="event: { mousedown: queue.handleMultiEditStatusMouseDown }">
                <input type="radio" name="multiedit-status" value="pause" id="multiedit-pause" data-bind="event: { change: queue.doMultiEditUpdate }" />
                <span class="glyphicon glyphicon-pause" title="$T('link-pause')" data-tooltip="true" data-placement="top"></span>
            </label>
            <a href="#" class="hover-button" title="$T('Glitter-top')" data-bind="click: queue.doMultiMoveToTop" data-tooltip="true" data-placement="top">
                <span class="glyphicon glyphicon-chevron-up"></span>
            </a>
            <a href="#" class="hover-button" title="$T('Glitter-bottom')" data-bind="click: queue.doMultiMoveToBottom" data-tooltip="true" data-placement="top">
                <span class="glyphicon glyphicon-chevron-down"></span>
            </a>
            <span class="label label-default" data-bind="text: queue.multiEditItems().length">0</span>
        </div>
        <div class="add-nzb-inputbox-clear"></div>
        <div class="add-nzb-inputbox" data-tooltip="true" data-placement="top" title="$T('category')">
            <span class="glyphicon glyphicon-tag"></span>
            <select name="Category" class="form-control" data-bind="options: queue.categoriesList, optionsValue: 'catValue', optionsText: 'catText', optionsCaption: '', event: { change: queue.doMultiEditUpdate }"></select>
        </div>
        <div class="add-nzb-inputbox" data-tooltip="true" data-placement="top" title="$T('priority')">
            <span class="glyphicon glyphicon-sort-by-attributes-alt"></span>
            <select name="Priority" class="form-control" data-bind="options: queue.priorityOptions, optionsValue: 'value', optionsText: 'name', optionsCaption: '', event: { change: queue.doMultiEditUpdate }"></select>
        </div>
        <div class="add-nzb-inputbox" data-tooltip="true" data-placement="top" title="$T('swtag-pp')">
            <span class="glyphicon glyphicon-check"></span>
            <select name="Processing" class="form-control" data-bind="options: queue.processingOptions, optionsValue: 'value', optionsText: 'name', optionsCaption: '', event: { change: queue.doMultiEditUpdate }"></select>
        </div>
        <div class="add-nzb-inputbox" data-tooltip="true" data-placement="top" title="$T('eoq-scripts')">
            <span class="glyphicon glyphicon-flash"></span>
            <select name="Post-processing" class="form-control" data-bind="options: queue.scriptsList, optionsValue: 'scriptValue', optionsText: 'scriptText', optionsCaption: '', event: { change: queue.doMultiEditUpdate }"></select>
        </div>
        <div class="clearfix"></div>
    </form>

    <div class="input-group search-box" data-bind="visible: queue.hasQueueSearch" style="display: none;">
        <input type="text" class="form-control" placeholder="$T('Glitter-search')" required data-bind="textInput: queue.searchTerm, event: { keydown: queue.clearSearchTerm }" />
        <a data-bind="event: { mousedown: queue.clearSearchTerm }">
            <span class="glyphicon" data-bind="css: { 'glyphicon-search' : !queue.searchTerm(), 'glyphicon-remove' : queue.searchTerm() }"></span>
        </a>
    </div>

    <ul class="pagination" data-bind="foreach: queue.pagination.allpages, visible: queue.pagination.hasPagination" style="display: none;">
        <li data-bind="css: { active: isCurrent, disabled: isDots }, click: onclick">
            <span data-bind="text: page"></span>
        </li>
    </ul>
</div>
