{% extends "base.html" %}
{% block left_pannel %}
<table>
    <tr>
        <td>
            <button class="unselected" onclick="location.href = '/override';">override</button>
        </td>
    </tr>
    <tr>
        <td>
            <button class="selected" onclick="location.href = '/config';">config</button>
        </td>  
    </tr>
    <tr>
        <td>
            <button class="unselected" onclick="location.href = '/discord';">discord</button>
        </td>
    </tr>
    <tr>
        <td>
            <button class="unselected" onclick="location.href = '/database';">database</button>
        </td>
    </tr>
    <tr>
        <td>
            <button class="unselected" onclick="location.href = '/proxy';">proxy</button>
        </td>  
    </tr>
    <tr>
        <td>
            <button class="unselected" onclick="location.href = '/settings';">settings</button>
        </td>
    </tr>
</table>
{% endblock %}



{% block content %}
{%if not current_user.is_authenticated %}
    <button class="unselected" onclick="location.href = '/login';">login</button>
{% else %}
<form method="post" action="/config/">


    <table>
        <tr>
            <td style="width: 10%;">config : </td>
            <td style="width: 40%;">
                <select onchange="changecat(this.value)" name="config">
                    <option id="config" value="{{len}}">New config</option>
                    {% for i in configs %}
                    <option id="{{configs[i]['name']}}" value="{{i}}">{{configs[i]['name']}}</option>
                    {% endfor %}
                </select>
            </td>
            <td style="width: 10%;">name : </td>
            <td>
                <input type="text" id="name" name="name" value = "">
            </td>
        </tr>
        <tr>
            <td style="width: 10%;">Proxy : </td>
            <td style="width: 40%;">
                <select id="proxy" name="proxy">
                    <option id="" value="-1">No proxy</option>
                    {% for i in proxys %}
                    <option id="{{proxys[i]['name']}}" value="{{i}}">{{proxys[i]['name']}}</option>
                    {% endfor %}
                </select>
            </td>
            <td style="width: 10%;">Discord : </td>
            <td>
                <select id="discord" name="discord">
                    <option id="no discord" value="-1">No discord (not sure about the support)</option>
                    {% for i in discords %}
                    <option id="{{discords[i]['name']}}" value="{{i}}">{{discords[i]['name']}}</option>
                    {% endfor %}
                </select>
            </td>
        </tr>
    </table>
    <br><br>
    <table>
        <tr>
            <td>Mail</td>
            <td>Password</td>
            <td>2FA</td>
        </tr>
        <tr>
            <td><input type="text" id="mail1" name="mail1" value=""></td>
            <td><input type="text" id="pwd1"  name="pwd1"  value=""></td>
            <td><input type="text" id="2fa1"  name="2fa1"  value=""></td>
            <td class="left-button"><button class="ban" name="ban" value="">ban</button></td>
        </tr>
        <tr>
            <td><input type="text" id="mail2" name="mail2" value=""></td>
            <td><input type="text" id="pwd2"  name="pwd2"  value=""></td>
            <td><input type="text" id="2fa2"  name="2fa2"  value=""></td>
            <td class="left-button"><button class="ban" name="ban" value="">ban</button></td>

        </tr>
        <tr>
            <td><input type="text" id="mail3" name="mail3" value=""></td>
            <td><input type="text" id="pwd3"  name="pwd3"  value="" ></td>
            <td><input type="text" id="2fa3"  name="2fa3"  value=""></td>
            <td class="left-button"><button class="ban" name="ban" value="">ban</button></td>

        </tr>
        <tr>
            <td><input type="text" id="mail4" name="mail4" value=""></td>
            <td><input type="text" id="pwd4"  name="pwd4"  value="" ></td>
            <td><input type="text" id="2fa4"  name="2fa4"  value=""></td>
            <td class="left-button"><button class="ban" name="ban" value="">ban</button></td>

        </tr>
        <tr>
            <td><input type="text" id="mail5" name="mail5" value=""></td>
            <td><input type="text" id="pwd5"  name="pwd5"  value=""></td>
            <td><input type="text" id="2fa5"  name="2fa5"  value=""></td>
            <td class="left-button"><button class="ban" name="ban" value="">ban</button></td>

        </tr>
    </table>
    <input type="submit" class="confirm" name="data" id="submit" value="Update !" class="button"/>

    
</form>




<script>
    function changecat(value) {
        data = JSON.parse('{{data|tojson}}'); //convertit le dictionnaire data en JSON
        console.log(this.value)
        if (value == "{{len}}"){
            document.getElementById("submit").value = "Create !";
            document.getElementById("discord").value = "-1";
            document.getElementById("proxy").value = "-1";
            document.getElementById("name").value = "";
            for (let i = 1; i < 6; i++) {
                document.getElementById("mail"+ i).value = "";
                document.getElementById("pwd"+  i).value = "" ;
                document.getElementById("2fa"+  i).value = "" ;
            }
        }
        else {
            document.getElementById("submit").value = "Update !";
            document.getElementById("discord").value = data[parseInt(value)]["discord"];
            document.getElementById("proxy").value = data[parseInt(value)]["proxy"];
            document.getElementById("name").value = data[parseInt(value)]["name"];
            for (let i = 1; i < 6; i++) {
                document.getElementById("mail"+ i).value = data[parseInt(value)]['accounts'][i]["mail"] ;
                document.getElementById("pwd"+  i).value = data[parseInt(value)]['accounts'][i]["pwd"] ;
                document.getElementById("2fa"+  i).value = data[parseInt(value)]['accounts'][i]["2fa"] ;
            }
            
        }
    }
    
</script>



{% endif %}
{% endblock %}