<!-- Tempalte for device configureation -->

<div style="margin:20px;">
<h1> Configuration of rig [% rig_info.name %]</h1>

<div style="display:flex;justify-content:center;align-items:stretch;gap: 50px;width:fit-content;margin:auto;">

<div class="content-container top-select" style="width:250px;text-align:center;">
<h3> Select device type </h3>
<br>
<form method="post" action="/cgi-bin/celltest/device_config.cgi" enctype="multipart/form-data">
[% INCLUDE print_hidden.tt %]
<select name="type" onchange="this.form.submit()" autocomplete=off>
<option value=""></option>
[% FOR i IN data.classes %]
<option value="[% i %]" [% IF nav.type == i %]selected=selected[% END %]>[% data.classnames.$i %]</option>
[% END %]
</select></form>
</div>

[% IF nav.type %]
<div class="content-container top-select"  style="width:250px;text-align:center;">
<h3> Select device </h3>
<br>
<form method="post" action="/cgi-bin/celltest/device_config.cgi" enctype="multipart/form-data" name=device>
[% INCLUDE print_hidden.tt %]
<input type="hidden" name="type" value="[% nav.type %]">
<select name="device" onchange="this.form.submit()" style="min-width:150px;">
<option value=""></option>
[% FOR i IN data.devices %]
<option value="[% i %]" [% IF nav.device == i %]selected=selected[% END %]>[% i %]</option>
[% END %]
</select>
</form>
</div>

<div class="content-container top-select"  style="width:250px;text-align:center;display:inline;vertical-align:middle;">
<h3>New [% nav.type %]</h3>
<br><form method="post" action="/cgi-bin/celltest/device_config.cgi" enctype="multipart/form-data" name="new_dev">
[% INCLUDE print_hidden.tt %]
<input type="hidden" name="type" value="[% nav.type %]">
<input type="hidden" name="device" value="">
</form>
<button type=button onclick="new_device()">Create device</button>
</div>

[% END %]
</div>
</div>

<!-- End device configuration template -->


<script>

function new_device()
{
    var text = prompt("New device name:",'');
    if (text == null)
    {
        return false;
    }
    var reg = /^\w+\$/;
    if (!reg.test(text))
    {
        alert("Device names must be a single string containing only alpahnumeric characters and no spaces!");
        return false;
    }
    var type = document.new_dev.type.value;
    run_ajax('new_device.cgi','&action=new_device&type='+type+'&value='+text,set_new_device);
}


function set_new_device(res)
{
    var name = '';
    var arr = res.split("\n");
    if (arr[0] == "OK" || arr[0] == "WARN")
    {
        if (arr[0] == "WARN")
        {
            alert(arr[3]);
        }
        name = arr[2];
    }
    else
    {
        alert(arr[0]);
        return false;
    }
    document.new_dev.device.value = name;
    document.new_dev.submit();
}


</script>

<style>

.top-select {
    padding:20px;
}


</style>