<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>{% block title %}pyLoad WebUI{% endblock %}</title>
    <meta name="description" content="pyLoad WebUI">
    <meta name="viewport" content="width=device-width">

    <!-- TODO Include this font -->
    <link href="http://fonts.googleapis.com/css?family=Abel" rel="stylesheet" type="text/css"/>
    <link href="/static/css/bootstrap.css" rel="stylesheet" type="text/css"/>
    <link href="/static/css/font.css" rel="stylesheet" type="text/css"/>
    <link href="/static/css/default/style.less" rel="stylesheet/less" type="text/css" media="screen"/>
    {% block css %}
    {% endblock %}

    <script src="/static/js/libs/less-1.3.0.min.js" type="text/javascript"></script>
    <script type="text/javascript" data-main="static/js/config" src="/static/js/libs/require-2.1.2.js"></script>
    <script>
        require(['default'], function(App) {
            App.init();
            {% block require %}
            {% endblock %}
        });
    </script>

    {% block head %}
    {% endblock %}
</head>
<body>
<div id="wrap">
    <header>
        <div class="left">
            <div class="logo"></div>
            <span class="title visible-large-screen">pyLoad</span>
        </div>
        <div class="right">
            {% if user %}
                <div class="header_block menu-block">
                    <div id="notifications-area">
                        Notifications
                        <span class="badge badge-info">88</span>
                    </div>
                    {#                    <a class="header-link" href="/settings"><i class="icon-cog icon-white"></i> Settings</a>#}
                    {#                    <a class="header-link" href="#"><i class="icon-list-alt icon-white"></i> Accounts</a>#}
                    <br/>

                    <a class="btn btn-success btn-grabber" href="#"><i class="icon-plus icon-white"></i> Add</a>

                    <div class="btn-group">
                        <a class="btn btn-blue" href="#"><i class="icon-user icon-white"></i> User</a>
                        <a class="btn btn-blue dropdown-toggle" data-toggle="dropdown" href="#"><span
                                class="caret"></span></a>
                        <ul class="dropdown-menu" style="right: 0; left: -100%">
                            <li><a href="#"><i class="icon-pencil"></i> Edit</a></li>
                            <li><a href="#"><i class="icon-trash"></i> Delete</a></li>
                            <li><a href="#"><i class="icon-ban-circle"></i> Ban</a></li>
                            <li class="divider"></li>
                            <li><a href="#"><i class="i"></i> Make admin</a></li>
                        </ul>
                    </div>

                </div>

                <div id="speedgraph" class="visible-desktop"></div>

                <div class="header_block right-border">
                    <span class="pull-right">8:15:01</span><br>
                    <span class="pull-right">Started</span><br>
                        <span class="pull-right"><span
                                style="font-weight:bold;color: #fff !important;">5</span> of 12</span>

                </div>
                <div class="header_block left-border">
                    <i class="icon-time icon-white"></i> Remaining:<br>
                    <i class="icon-retweet icon-white"></i> Status:<br>
                    <i class="icon-download-alt icon-white"></i> Downloads: <br>
                </div>

                <div id="progress-area" style="margin-top: 16px">
                    No running tasks
                    <i class="icon-white icon-tasks pull-right"></i>
                    <div class="progress" id="globalprogress">
                        <div class="bar" style="width: 48%">48%</div>
                    </div>

                    {#                    <div>#}
                    {#                        <span class="pull-left">3,65 MB of 5,30 MB</span>#}
                    {#                        <span class="pull-right">420,7 kB / sec</span>#}
                    {#                    </div>#}
                    <div class="popover bottom">
                        <div class="arrow"></div>
                        <div class="popover-inner">
                            <h3 class="popover-title">
                                Running...
                                <button type="button" class="close" aria-hidden="true">&times;</button>
                            </h3>
                            <div class="popover-content">
                                <ul class="progress-list">
                                    <li>
                                        Some Download
                                        <span class="pull-right">YouTube</span>
                                        <div class="progress">
                                            <div class="bar" style="width: 25%"></div>
                                        </div>
                                        20 Kb of 23 MB (500 kb/s)
                                        <span class="pull-right">
                                            50%
                                        </span>
                                    </li>
                                    <li>
                                        Some Download
                                        <span class="pull-right">YouTube</span>
                                        <div class="progress">
                                            <div class="bar" style="width: 45%"></div>
                                        </div>
                                        20 Kb of 23 MB (500 kb/s)
                                        <span class="pull-right">
                                            50%
                                        </span>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>

            {% endif %}
        </div>
    </header>
    <div id="content">
        {% for msg in messages %}
            <p>{{ msg }}</p>
        {% endfor %}

        {% block content %}
        {% endblock content %}
    </div>
</div>
<footer>
    <div class="center">
        <div class="logo"></div>
        <div class="block copyright">
            © 2008-2013<br>
            <a href="http://pyload.org/" target="_blank">The pyLoad Team</a><br>
        </div>

        <div class="block">
            <h2 class="block-title">Powered by</h2>
            Bootstrap <br>
            dsfdsf <br>
            sdf dsg <br>
        </div>

        <div class="block">
            <h2 class="block-title">pyLoad</h2>
            <a href="/toggle_mobile">{{ _("Mobile Version") }}</a> <br>
            dsfdsf <br>
            sdf dsg <br>
        </div>

        <div class="block">
            <h2 class="block-title">Community</h2>
            asd <br>
            dsfdsf <br>
            sdf dsg <br>
        </div>

        <div class="block">
            <h2 class="block-title">Development</h2>
            asd <br>
            dsfdsf <br>
            sdf dsg <br>
        </div>
    </div>
</footer>
<div id="modal-overlay" class="hide"></div>
{% block deferred %}
{% endblock deferred %}
</body>
</html>