{% 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="selected" 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="/discord/">
    <table>
        <tr>
            <td></td>
            <td>
                <select name="select" onchange="changecat(this.value)">
                    <option selected id="new" value="{{ len }}">Create new Discord config</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" id="name" name="name" value=""></td>
        </tr>
        <tr>
            <td class="comlumn-name">Send errors</td>
            <td><input type="checkbox" id="errorsT" name="errorsT" /><label for="errorsT">Toggle</label></td>
        </tr>
        <tr>
            <td class="comlumn-name">Send success</td>
            <td><input type="checkbox" id="successT" name="successT" /><label for="successT">Toggle</label></td>
        </tr>
        <tr>
            <td class="comlumn-name">Success link</td>
            <td><input type="text" id="successL" name="successL" value=""></td>
        </tr>
        <tr>
            <td class="comlumn-name">Failure Link</td>
            <td><input type="text" id="errorsL" name="errorsL" value=""></td>
        </tr>

    </table>
    <table>
        <tr>
            <td class="comlumn-name"></td>
            <td style="width:60%;"><input type="submit"  name="DISCORD" id="submit" value="Create !" class="button" style="width:90%;"/></td>
            <td style="padding-right: 20px;">
                <input type="submit" name="DISCORD" id="submit" value="delete" class="button"/>
            </td>
        </tr>
    </table>
</form>
<script>
    function changecat(value) {
        data = JSON.parse('{{data|tojson}}'); //convertit le dictionnaire data en JSON
        
        if (value == "{{len}}"){
            document.getElementById("name").value = "";
            document.getElementById("submit").value = "Create !";
            document.getElementById("successT").checked = false;
            document.getElementById("errorsT").checked = false;
            document.getElementById("successL").value = "";
            document.getElementById("errorsL").value = "";
        }
        else {
            console.log(data[parseInt(value)]["successL"]);
            document.getElementById("submit").value = "Update";
            document.getElementById("successT").checked = data[parseInt(value)]["successT"] == "True";
            document.getElementById("errorsT").checked = data[parseInt(value)]["errorsT"] == "True";
            document.getElementById("successL").value = data[parseInt(value)]["successL"];
            document.getElementById("errorsL").value = data[parseInt(value)]["errorsL"];
            document.getElementById("name").value = data[parseInt(value)]["name"];
        }
    }
    
</script>

{% endif %}
{% endblock %}