{% extends "base.html" %}
{% block left_pannel %}

<table>
    <tr>
        <td>
            <button class="unselected" onclick="location.href = '/override';">override</button>
        </td>
    </tr>
    <tr>
        <td>
            <button class="unselected" 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="selected" 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="/proxy/">
    
    <table>
        <tr>
            <td class="comlumn-name"></td>
            <td>
                <select name="select" onchange="changecat(this.value)">
                    <option selected id="new" value="{{ len }}">Create new proxy</option>
                    {% for i in data %}
                    <option id="{{data[i]['name']}}" value="{{i}}">{{data[i]['name']}}</option>
                    {% endfor %}
                </select>
            </td>
        </tr>
        <tr>
            <td class="comlumn-name">name : </td>
            <td><input type="text" name="name" value="" id="name"></td>
        </tr>
        <tr>
            <td class="comlumn-name">address : </td>
            <td><input type="text" name="address" value="" id="address"></td>
        </tr>
        <tr>
            <td class="comlumn-name">port : </td>
            <td><input type="text" name="port" value="" id="port"></td>
        </tr>
        </table>
        <table>
            <tr>
                <td class="comlumn-name"></td>
                <td style="width:60%;"><input type="submit"  name="PROXY" id="submit" value="Create !" class="confirm" style="width:86%;"/></td>
                <td style="padding-right: 20px;"><input type="submit" name="PROXY" id="submit" value="delete" class="ban" style="width:60%;"/></td>
            </tr>
        </table>

    
</form>


<script>
    function changecat(value) {
        data = JSON.parse('{{data|tojson}}'); //convertit le dictionnaire data en JSON
        if (value == "{{len}}"){
            document.getElementById("submit").value = "Create";
            document.getElementById("address").value = "";
            document.getElementById("port").value = "";
            document.getElementById("name").value = "";
        }
        else {
            document.getElementById("submit").value = "Update";
            document.getElementById("address").value = data[parseInt(value)]["address"];
            document.getElementById("port").value = data[parseInt(value)]["port"];
            document.getElementById("name").value = data[parseInt(value)]["name"];
        }
    }
    
</script>

{% endif %}
{% endblock %}