<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

<link rel="stylesheet" type="text/css" href="{{'/media/modern/css/bootstrap.min.css'|url}}">
<link rel="stylesheet" type="text/css" href="{{'/media/modern/css/jquery-ui-1.12.1.min.css'|url}}"/>
<link rel="stylesheet" type="text/css" href="{{'/media/modern/css/styles.css'|url}}">

<link rel="icon" href="{{'/favicon.ico'|url}}"/>

<style type="text/css">
.ui-icon,
.ui-widget-content .ui-icon {
  background-image: url("{{'/media/modern/img/ui-icons_444444_256x240.png'|url}}");
}

#goto_top.affix-top {
  position: absolute;
  bottom: -82px;
  left: 10px;
}

#goto_top.affix {
  position: fixed;
  bottom: 18px;
  left: 10px;
}
</style>

<title>{% block title %}pyLoad {{_('Webinterface')}}{% endblock %}</title>

{% block head %}
{% endblock %}
</head>
<body>

{% macro selected(name, right=False) -%}
  {% if name in url -%}class="{% if right -%}right {% endif %}selected"{%- endif %}
  {% if not name in url and right -%}class="right"{%- endif %}
{%- endmacro %}

<nav id="sticky-nav" class="navbar navbar-default navbar-fixed-top hidden-xs hidden-sm" style="display: none; border-bottom: 1px solid rgba(0,0,0,.15); box-shadow: 0 1px 6px 0 rgba(32,33,36,0.28); min-height: 45px;">
  <ul  class="nav navbar-nav">
    <li ondragstart="return false;" {{selected('home')}}>
      <a href="{{'/home/'|url}}" title="{{_('Home')}}"><span class="glyphicon glyphicon-home"></span></a>
    </li>
    <li ondragstart="return false;" {{selected('queue')}}>
      <a href="{{'/queue/'|url}}" title="{{_('Queue')}}"><span class="glyphicon glyphicon-tasks"></span></a>
    </li>
    <li ondragstart="return false;" {{selected('collector')}}>
      <a href="{{'/collector/'|url}}" title="{{_('Collector')}}"><span class="glyphicon glyphicon-magnet"></span></a>
    </li>
    <li ondragstart="return false;" {{selected('downloads')}}>
      <a href="{{'/downloads/'|url}}" title="{{_('Downloads')}}"><span class="glyphicon glyphicon-download"></span></a>
    </li>
    <li ondragstart="return false;" {{selected('logs')}}>
      <a href="{{'/logs/'|url}}" title="{{_('Logs')}}"><span class="glyphicon glyphicon-list"></span></a>
    </li>
  {% if user.is_admin %}
    <li ondragstart="return false;" {{selected('admin')}}>
      <a href="{{'/admin/'|url}}" title="{{_('Administration')}}"><span class="glyphicon glyphicon-cog"></span></a>
    </li>
  {% endif %}
    <li ondragstart="return false;" {{selected('settings', True)}}>
      <a href="{{'/settings/'|url}}"  title="{{_('Config')}}"><span class="glyphicon glyphicon-wrench"></span></a>
    </li>
    <li class="divider-vertical"></li>
    <li ondragstart="return false;">
      <a role="button" id="action_add1" data-toggle="modal" data-target="#add_box" title="{{_('Add Package')}}"><span class="glyphicon glyphicon-plus"></span></a>
    </li>
  </ul>
  <span id="cap_info1" class="cap_info col-xs-12 col-sm-auto" style="display: {% if captcha %}inline{%else%}none{% endif %};margin-top:-2px; height: 15px;">
      <button id="action_cap1" class="btn btn-light navbar-btn col-xs-12 col-sm-auto" data-toggle="modal" data-target="#cap_box" data-backdrop="static"><span  class="glyphicon glyphicon-barcode"></span> {{_('Captcha waiting')}}</button>
  </span>
  <ul class="nav navbar-nav navbar-right">
    <li id="load-indicator1" class="load-indicator" style="opacity: 0; display: block; margin-top: 11px; margin-right: 35px;">
       <img src="{{'/media/modern/img/ajax-loader.gif'|url}}" alt="" style="padding-right: 5px"/>
       {{_('loading')}}
    </li>
  </ul>
</nav>
<div id="head-panel">
  <div id="head-search-and-login">
    {% block headpanel %}
      {% if user.is_authenticated %}
        {% if update %}
        <span>
        <span style="font-weight: bold; margin: 0 2px 0 2px;">{{_('pyLoad Update available!')}}</span>
        </span>
        {% endif %}
        {% if plugins %}
        <span>
        <span style="font-weight: bold; margin: 0 2px 0 2px;">{{_('Plugins updated, please restart!')}}</span>
        </span>
        {% endif %}
      {% endif %}
    {% endblock %}
  </div>

  <nav class="navbar navbar-default">
    <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
        <a class="navbar-brand" href="#"><img id="head-logo" src="{{'/media/modern/img/pyload-logo.png'|url}}" alt="pyLoad" style="height:30px;"/></a>
      </div>
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav">
        {% block menu %}
         {% if user.is_authenticated %}
          <li ondragstart="return false;" {{selected('home')}}>
              <a href="{{'/home/'|url}}" title=""><span class="glyphicon glyphicon-home"></span><span class="hidden-sm"> {{_('Home')}}</span></a>
          </li>
          <li ondragstart="return false;" {{selected('queue')}}>
              <a href="{{'/queue/'|url}}" title=""><span class="glyphicon glyphicon-tasks"></span><span class="hidden-sm"> {{_('Queue')}}</span></a>
          </li>
          <li ondragstart="return false;" {{selected('collector')}}>
              <a href="{{'/collector/'|url}}" title=""><span class="glyphicon glyphicon-magnet"></span><span class="hidden-sm"> {{_('Collector')}}</span></a>
          </li>
          <li ondragstart="return false;" {{selected('downloads')}}>
              <a href="{{'/downloads/'|url}}" title=""> <span class="glyphicon glyphicon-download"></span><span class="hidden-sm"> {{_('Downloads')}}</span></a>
          </li>
    {#  <li ondragstart="return false;" {{selected('filemanager')}}>#}
    {#      <a href="{{'/filemanager/'|url}}" title=""><span class="glyphicon glyphicon-magnet"></span><span class="hidden-sm"> {{_('FileManager')}}</span></a>#}
    {#  </li>#}
          <li ondragstart="return false;" {{selected('logs')}}>
              <a href="{{'/logs/'|url}}" title=""><span class="glyphicon glyphicon-list"></span><span class="hidden-sm"> {{_('Logs')}}</span></a>
          </li>
        {% if user.is_admin %}
          <li ondragstart="return false;" {{selected('admin')}}>
              <a href="{{'/admin/'|url}}" title=""><span class="glyphicon glyphicon-cog"></span><span class="hidden-sm">  {{_('Administration')}}</span></a>
          </li>
        {% endif %}
          <li ondragstart="return false;" {{selected('settings', True)}}>
              <a href="{{'/settings/'|url}}"  title=""><span class="glyphicon glyphicon-wrench"></span><span class="hidden-sm"> {{_('Config')}}</span></a>
          </li>
         {% endif %}
        {% endblock %}

        </ul>
        {% if user.is_authenticated %}
          <ul class="nav navbar-nav navbar-right">
            <li><span class="navbar-text"><span class="glyphicon glyphicon-user"></span><span class="hidden-sm hidden-md"> {{user.name}}</span></span></li>
            <li><a href="{{'/logout'|url}}"  class="action logout" rel="nofollow"><span class="glyphicon glyphicon-log-out"></span><span class="hidden-sm hidden-md">  {{_('Logout')}}</span></a></li>
            <li ondragstart="return false;" {{selected('info')}}><a href="{{'/info'|url}}"  class="action info" rel="nofollow"><span class="glyphicon glyphicon-info-sign"></span><span class="hidden-sm hidden-md">  {{_('Info')}}</span></a></li>
          </ul>
        {% endif %}        
      </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
  </nav>

  <div style="clear:both;"></div>
</div>

<div class="btn-toolbar" role="toolbar" aria-label="...">
{% if perms.STATUS %}
    <!--<div class="btn-group btn-group-sm col-xs-12 col-sm-3 col-md-3 col-lg-3" role="group" aria-label="...">-->
    <div class="btn-group btn-group-sm" style="margin-left: 20px; margin-right: 20px;" role="group" aria-label="...">
        <button id="action_play" class="btn btn-default" href="#" title="{{_('Resume Queue')}}"><span class="glyphicon glyphicon-play"></span>&nbsp;</button>
        <button id="action_stop" type="button" class="btn btn-default" title="{{_('Pause Queue')}}"><span class="glyphicon glyphicon-pause"></span>&nbsp;</button>
        <button id="action_cancel" type="button" class="btn btn-default" title="{{_('Abort Downloads')}}"><span class="glyphicon glyphicon-stop"></span>&nbsp;</button>
        <button id="action_add2" data-toggle="modal" data-target="#add_box" type="button" class="action_add btn btn-default" title="{{_('Add Package')}}"><span class="glyphicon glyphicon-plus"></span>&nbsp;</button>
    </div>
{% endif %}

{% block pageactions %}
{% endblock %}

    <span id="cap_info2" class="cap_info col-xs-12 col-sm-auto" style="display: {% if captcha %}inline{%else%}none{% endif %};margin-top:-2px;">
        <button id="action_cap2" class="btn btn-default col-xs-12 col-sm-auto" data-toggle="modal" data-target="#cap_box" data-backdrop="static"><span  class="glyphicon glyphicon-barcode"></span> {{_('Captcha waiting')}}</button>
    </span>


{% if perms.LIST %}
    <div class="btn-group btn-group-sm col-xs-12 col-sm-auto" role="group" aria-label="..." style="float:right;">
        <button class="btn col-xs-3 col-sm-auto"><span class="hidden-sm">{{_('Download:')}}</span><span class="glyphicon glyphicon-download hidden-xs hidden-md hidden-lg"></span> <span id="time"  class="label label-{% if status.download %}success{% else %}danger{% endif %}">{% if status.download %}{{_('on')}}{% else %}{{_('off')}}{% endif %}</span></button>
        <button type="button" class="btn col-xs-3 col-sm-auto"><span class="hidden-sm">{{_('Reconnect:')}}</span><span class="glyphicon glyphicon-refresh hidden-xs hidden-md hidden-lg"></span> <span id="reconnect" class="label label-{% if status.reconnect %}success{% else %}danger{% endif %}">{% if status.reconnect %}{{_('on')}}{% else %}{{_('off')}}{% endif %}</span></button>
        <button type="button" class="btn col-xs-3 col-sm-auto"><span class="action backlink"><span class="hidden-xs hidden-sm">{{_('Speed:')}} </span><b id="speed">{{status.speed}}</b></span></button>
        <span class="btn col-xs-3 col-sm-auto" style="background-color: #F0F0F0"><span class="action cog">{{_('Active:')}} <b id="aktiv" title="{{_('Active')}}">{{status.active}}</b> / <b id="aktiv_from" title="{{_('Queued')}}">{{status.queue}}</b> / <b id="aktiv_total" title="{{_('Total')}}">{{status.total}}</b></span></span>
    </div>
{% endif %}
</div>

<div id="body-wrapper" class="dokuwiki">
    <div id="content" style="width: 99%; padding-left: 10px; padding-right: 10px;" lang="en" dir="ltr">
      <div style="display: flex;justify-content: space-between;">
        <div style="margin-bottom: 20px;">
          <h3>{% block subtitle %}{{_(' ')}}{% endblock %}</h3>
        </div>
        <div>
          {% block statusbar %}
          {% endblock %}
          {% for message in messages %}
              <p><b>{{message}}</b></p>
          {% endfor %}
        </div>
        <div id="load-indicator2" class="load-indicator" style="opacity: 0; margin-top: 5px;">
             <img src="{{'/media/modern/img/ajax-loader.gif'|url}}" alt="" style="padding-right: 5px"/>
             {{_('loading')}}
        </div>
      </div>

      {% block content %}
      {% endblock content %}
    </div>
</div>

<hr style="clear: both;" />
<div id="foot" class="navbar navbar-static-bottom" style="width: 100%; text-align:center;">&copy; 2008-2020 pyLoad Team</div>

<div id="goto_top" class="btn-primary hidden" style="position: fixed; width: 25px; height: 25px;background-color: #007bff; color: #0b0b0b; opacity: 0.5; cursor: pointer; z-index: 10; border-radius: 5px; display: block;" title="{{_('Back to top')}}">
    <div class="glyphicon glyphicon-chevron-up" style="padding-top: 5px; padding-left: 6px; opacity: 0.5;"></div>
</div>

<div style="display: none;">
    {% block hidden %}
    {% endblock %}
</div>
{% block dialog %}
{% endblock %}

{% include "modern/window.html" %}
{% include "modern/captcha.html" %}
<noscript><h1>Enable JavaScript to use the webinterface.</h1></noscript>

<script type="text/javascript" src="{{'/media/js/modern/jquery-3.2.1.min.js'|url}}"></script>
<script type="text/javascript" src="{{'/media/js/modern/jquery-ui-1.12.1.min.js'|url}}"></script>
<script type="text/javascript" src="{{'/media/js/modern/jquery.peekabar.min.js'|url}}"></script>
<script type="text/javascript" src="{{'/media/js/modern/bootstrap.min.js'|url}}"></script>
<script type="text/javascript" src="{{'/media/js/modern/base.js'|url}}"></script>

{% block footer %}
{% endblock %}

</body>
</html>

