{% extends '/tml/base.html' %}

{% block title %}{{ _("Config") }} - {{ super() }} {% endblock %}
{% block subtitle %}{{ _("Config") }}{% endblock %}

{% block head %}
    <script type="text/javascript" src="/lib/MooTools/TinyTab/tinytab.js"></script>
    <script type="text/javascript" src="/lib/MooTools/MooDropMenu/MooDropMenu.js"></script>
    <script type="text/javascript" src="/js/settings.js"></script>

{% endblock %}

{% block content %}

    <ul id="toptabs" class="nav nav-tabs">
            <li role="presentation" class"active"><a href="#">{{ _("General") }}</a></li>
            <li role="presentation"><a href="#">{{ _("Plugins") }}</a></li>
            <li role="presentation"><a href="#">{{ _("Accounts") }}</a></li>
    </ul>

    <div id="tabsback" style="height: 20px; padding-left: 150px; color: white; font-weight: bold;">

    </div>

        <span id="tabs-body">
            <!-- General -->
            <span id="general" class="active tabContent">
                <ul class="nav tabs" style="width: 20%; float:left;">
                    <li class>
                        <div class="panel panel-default" >
                          <div class="panel-body">
                            <ul id="general-menu" style="float: left; height: 600px; overflow: auto; overflow-x: hidden; width: 100%">
                                {% for entry,name in conf.general %}
                                    <nobr>
                                        <li style="list-style-type: none; cursor: pointer; margin-top: 10px;" id="general|{{ entry }}">{{ name }}</li>
                                    </nobr>
                                {% endfor %}
                            </ul>
                          </div>
                        </div>
                    </li>
                </ul>

                <form style="float: left; width:40%; margin-left: 20%; diplay:block; position: fixed; overflow: auto;" id="general_form" action="" method="POST" autocomplete="off">
                    <span id="general_form_content">
                    <br>
                    <h3>&nbsp;&nbsp; {{ _("Choose a section from the menu") }}</h3>
                    <br>
                    </span>

                  <input class="btn btn-primary" style="float:right; margin-right: 10px;" id="general|submit"  type="submit" value="{{_("Submit")}}"/>
                </form>
            </span>

            <!-- Plugins -->
            <span id="plugins" class="tabContent">
                <ul class="nav tabs" style="width: 20%; float:left; hight:300px;">
                    <li class>
                        <div class="panel panel-default">
                            <div class="panel-body">
                                <ul id="plugin-menu" style="float: left; height: 600px; overflow: auto; overflow-x: hidden; width: 100%">
                                    {% for entry,name in conf.plugin %}
                                        <nobr>
                                            <li style="list-style-type: none; cursor: pointer; margin-top: 10px;" id="plugin|{{ entry }}">{{ name }}</li>
                                        </nobr>
                                    {% endfor %}
                                </ul>
                            <div>
                        </div>
                    </li>
                </ul>


                 <form style="float: left; width:40%; margin-left: 10px;" id="plugin_form" action="" method="POST" autocomplete="off">

                     <span id="plugin_form_content" style:"position: static;">
                    <br>
                    <h3>&nbsp;&nbsp; {{ _("Choose a section from the menu") }}</h3>
                    <br>
                         </span>
                     <input class="btn btn-primary" style="float:right; margin-right: 10px;" id="plugin|submit" class="styled_button" type="submit" value="{{_("Submit")}}"/>
                </form>

            </span>

            <!-- Accounts -->
            <span id="accounts" class="tabContent">
            <form id="account_form" action="/json/update_accounts" method="POST">

                        <table class="settable wide table">

                        <thead>
                        <tr>
                            <th>{{ _("Plugin") }}</th>
                            <th>{{ _("Name") }}</th>
                            <th>{{ _("Password") }}</th>
                            <th>{{ _("Status") }}</th>
                            <th>{{ _("Premium") }}</th>
                            <th>{{ _("Valid until") }}</th>
                            <th>{{ _("Traffic left") }}</th>
                            <th>{{ _("Time") }}</th>
                            <th>{{ _("Max Parallel") }}</th>
                            <th>{{ _("Delete?") }}</th>
                        </tr>
                        </thead>


                            {% for account in conf.accs %}
                                {% set plugin = account.type %}
                                       <tr>
                                            <td>
                                                <span style="padding:5px">{{ plugin }}</span>
                                            </td>

                                           <td><label for="{{plugin}}|password;{{account.login}}"
                                                      style="color:#424242;">{{ account.login }}</label></td>
                                           <td>
                                               <input id="{{plugin}}|password;{{account.login}}"
                                                      name="{{plugin}}|password;{{account.login}}"
                                                      type="password" value="{{account.password}}" size="12"/>
                                           </td>
                                           <td>
                                               {% if account.valid %}
                                                   <span style="font-weight: bold; color: #006400;">
                                                   {{ _("valid") }}
                                               {% else %}
                                                   <span style="font-weight: bold; color: #8b0000;">
                                                   {{ _("not valid") }}
                                               {% endif %}
                                               </span>
                                           </td>
                                          <td>
                                               {% if account.premium %}
                                                   <span style="font-weight: bold; color: #006400;">
                                                   {{ _("yes") }}
                                               {% else %}
                                                   <span style="font-weight: bold; color: #8b0000;">
                                                   {{ _("no") }}
                                               {% endif %}
                                               </span>
                                           </td>
                                           <td>
                                   <span style="font-weight: bold;">
                                   {{ account.validuntil }}
                                   </span>
                                           </td>
                                           <td>
                                   <span style="font-weight: bold;">
                                   {{ account.trafficleft }}
                                   </span>
                                           </td>
                                           <td>
                                               <input id="{{plugin}}|time;{{account.login}}"
                                                      name="{{plugin}}|time;{{account.login}}" type="text"
                                                      size="7" value="{{account.time}}"/>
                                           </td>
                                           <td>
                                               <input id="{{plugin}}|limitdl;{{account.login}}"
                                                      name="{{plugin}}|limitdl;{{account.login}}" type="text"
                                                      size="2" value="{{account.limitdl}}"/>
                                           </td>
                                           <td>
                                               <input id="{{plugin}}|delete;{{account.login}}"
                                                      name="{{plugin}}|delete;{{account.login}}" type="checkbox"
                                                      value="True"/>
                                           </td>
                                       </tr>
                                {% endfor %}
                            </table>
            <button id="account_add" style="margin-left: 5px;" type="submit" class="btn btn-default">&nbsp;<span class="glyphicon glyphicon-plus"></button>

            <button id="account_submit" type="submit" class="btn btn-primary" >{{_("Submit")}}</button>

            </form>
            </span>
        </span>
{% endblock %}
{% block hidden %}
<div id="account_box" style="z-index: 2">
<form id="add_account_form" action="/json/add_account" method="POST" enctype="multipart/form-data">
<h3>{{_("Add Account")}}</h3>
<p>{{_("Enter your account data to use premium features.")}}</p>

<div class="form-group">
<label for="account_login">{{_("Login")}}</label>
<input class="form-control" id="account_login" name="account_login" type="text" />
<p >{{_("Your username.")}}</p>
</div>
<div class="form-group">
<label for="account_password">{{_("Password")}}</label>
<input class="form-control" id="account_password" name="account_password" type="password" size="20" />
<p >{{_("The password for this account.")}}</p>
</div>
<div class="form-group">
<label for="account_type">{{_("Type")}}</label>
<p>{{_("Choose the hoster for your account.")}}</p>
</div>
<div class="form-group">
    <select name=account_type id="account_type">
        {% for type in types|sort %}
            <option value="{{ type }}">{{ type }}</option>
        {% endfor %}
    </select>
</div>
<button class="btn btn-primary" style="float: right; margin-left: 5px;" id="account_add_button" type="submit">{{_("Add")}}</button>
<button class="btn btn-default" style="float: right;" id="account_reset" style="margin-left: 0" type="reset">{{_("Reset")}}</button>
<div class="spacer"></div>

</form>

</div>
{% endblock %}