{% extends "header.html" %}

{% block body %}

<script>

function updateEntry(index)
{
    var form = document.createElement("form");
    form.setAttribute("method", "post");
    form.setAttribute("action", '/updateserver/');

    var sname = document.getElementById('servername-' + index).value;
    var type  = document.getElementById('type-' + index).value;
    var flic  = document.getElementById('flic-' + index).value;
    var loc   = document.getElementById('loc-' + index).value;
    var ports = document.getElementById('ports-' + index).value;
    var pcfg  = document.getElementById('pcfg-' + index).value;
    var scfg  = document.getElementById('scfg-' + index).value;

    submitForm(form, sname, type, flic, loc, ports, pcfg, scfg);
}


function saveEntry()
{
    var form = document.createElement("form");
    form.setAttribute("method", "post");
    form.setAttribute("action", '/saveserver/');

    var sname = document.getElementById('servername-999').value;
    var type  = document.getElementById('type-999').value;
    var flic  = document.getElementById('flic-999').value;
    var loc   = document.getElementById('loc-999').value;
    var ports = document.getElementById('ports-999').value;
    var pcfg  = document.getElementById('pcfg-999').value;
    var scfg  = document.getElementById('scfg-999').value;

    submitForm(form, sname, type, flic, loc, ports, pcfg, scfg);
}


function submitForm(form, sname, type, flic, loc, ports, pcfg, scfg)
{
    hf = document.createElement("input");
    hf.setAttribute("type", "hidden");
    hf.setAttribute("name", "servername");
    hf.setAttribute("value", sname);
    form.appendChild(hf);

    hf = document.createElement("input");
    hf.setAttribute("type", "hidden");
    hf.setAttribute("name", "type");
    hf.setAttribute("value", type);
    form.appendChild(hf);

    hf = document.createElement("input");
    hf.setAttribute("type", "hidden");
    hf.setAttribute("name", "flic");
    hf.setAttribute("value", flic);
    form.appendChild(hf);

    hf = document.createElement("input");
    hf.setAttribute("type", "hidden");
    hf.setAttribute("name", "loc");
    hf.setAttribute("value", loc);
    form.appendChild(hf);

    hf = document.createElement("input");
    hf.setAttribute("type", "hidden");
    hf.setAttribute("name", "ports");
    hf.setAttribute("value", ports);
    form.appendChild(hf);

    hf = document.createElement("input");
    hf.setAttribute("type", "hidden");
    hf.setAttribute("name", "pcfg");
    hf.setAttribute("value", pcfg);
    form.appendChild(hf);

    hf = document.createElement("input");
    hf.setAttribute("type", "hidden");
    hf.setAttribute("name", "scfg");
    hf.setAttribute("value", scfg);
    form.appendChild(hf);

    document.body.appendChild(form);
    form.submit();
}

function deleteEntry(index)
{
    var form = document.createElement("form");
    form.setAttribute("method", "post");
    form.setAttribute("action", '/deleteserver/');

    var s = 'servername-' + index;
    var sname = document.getElementById(s).value;
 
    var hf = document.createElement("input");
    hf.setAttribute("type", "hidden");
    hf.setAttribute("name", "servername");
    hf.setAttribute("value", sname);
    form.appendChild(hf);

    document.body.appendChild(form);
    form.submit();
}


</script>

<style>

body { background-color:#ffffff; }
.center
{
  margin:0 auto;
}
table {
    table-layout: auto;
    border-collapse: collapse;
}
td {
  padding:6px;
}

th {
  text-align:center;
}
table td input {
 width: 100%;   
}
</style>

<div style="margin:0 auto;display:flex;justify-content:center;">
    <div class="panel panel-default">
      <div class="panel-heading">
       <h2 style="text-align:center;margin-bottom:16px;">Configure Replay Assets</h2>
       <div style="display:flex;justify-content:center;">
         <table border=1 style="align-self:center;">
           <th>flic id</th><th>box name</th><th>&nbsp; type &nbsp;</th><th>Location</th><th title="displayed port e.g e0, 10, etc">Ports</th>
             <th title="used for tcp-server->  nap, eth, enp1s, etc.">port config</th><th title="port on switch or packetbroker">switch ports</th><th></th><th></th>
            <tr>
             {% for s in servers %}
                <td><input type=text size=8 id=flic-{{s[0]}} value={{ s[7] }}></td>
                <td><input type=text size=16 id=servername-{{s[0]}} value={{ s[1] }}></td>
                <td><input type=text size=8 id=type-{{s[0]}} value={{ s[2] }}></td>
                <td><input type=text size=8 id=loc-{{s[0]}} value={{ s[8] }}></td>
                <td><input type=text id=ports-{{s[0]}} size={{s[4]|length*3+2}} value="{% for x in s[4] %} {{x}} {%endfor%}"></td>
                <td><input type=text id=pcfg-{{s[0]}}  size={{s[5]|length*4+3}} value="{% for x in s[5] %} {{x}} {%endfor%}"></td>
                <td><input type=text id=scfg-{{s[0]}}  size={{s[6]|length*3+2}} value="{% for x in s[6] %} {{x}} {%endfor%}"></td>
                <td><input type=button value=Update onclick="javascript:updateEntry({{s[0]}});"></td>
                <td><input type=button value=Delete onclick="javascript:deleteEntry({{s[0]}});"></td>      
              <tr>
             {% endfor %}
                <td><input type=text size=8 id=flic-999></td>
                <td><input type=text size=16 id=servername-999></td>
                <td><input type=text size=8 id=type-999></td>
                <td><input type=text size=8 id=loc-999></td>
                <td><input type=text id=ports-999></td>
                <td><input type=text id=pcfg-999></td>
                <td><input type=text id=scfg-999></td>
                <td><input type=button value=Save onclick="javascript:saveEntry();"></td>
                <td><input type=button value=Clear onclick="javascript:clearEntry();"></td>
         </table>
        </div>
    </div>
  </div>
</div>
{% endblock %}