{% 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;

    function radio_pre_submit(){
        var parents = document.getElementsByClassName("table_hidden_input_parent");
        for(const node of parents){
            const radio = node.getElementsByClassName("my_radio")[0];
            const checkbox = radio.nextElementSibling;
            if(radio.checked){
                checkbox.value = "True";
            }
        }
    }

    form_submission_callbacks.push(radio_pre_submit);
</script>
{% endblock tablejs %}