{% extends "config_bundle/steps/table_formset.html" %}

{% load bootstrap4 %}

{% block table %}
    <thead>
        <tr>
            <th>Device</th>
            <th>Image</th>
            <th>HeadNode</th>
        </tr>
    </thead>
    <tbody>
{% for form in formset %}
    <tr>
        <td>{% bootstrap_field form.host_name show_label=False %}</td>
        <td>{% bootstrap_field form.image show_label=False %}</td>
        <td class="table_hidden_input_parent">
            <input id="radio_{{forloop.counter}}" class="my_radio" type="radio" name="headnode" value="{{forloop.counter}}">
            {{ form.headnode }}
        </td>
    </tr>
{% endfor %}
{{formset.management_form}}

{% endblock table %}

{% block tablejs %}
<script>

    document.getElementById("radio_{{headnode}}").checked = true;

</script>
{% endblock tablejs %}


{% block onleave %}
var parents = document.getElementsByClassName("table_hidden_input_parent");
for(var i=0; i<parents.length; i++){
    var node = parents[i];
    var radio = node.getElementsByClassName("my_radio")[0];
    var checkbox = radio.nextElementSibling;
    if(radio.checked){
        checkbox.value = "True";
    }
}

var form = $("#table_formset");
var formData = form.serialize();
var req = new XMLHttpRequest();
req.open("POST", "/wf/workflow/", false);
req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
req.onerror = function() { alert("problem with form submission"); }
req.send(formData);
{% endblock onleave %}