{{ block title }}
    Choose a value for each row
{{ endblock }}

{{ block content }}

    <table class="table table-striped">
        <colgroup>
            <col width="45%">
            <col width="10%">
            <col width="45%">
        </colgroup>
        <tr>
            <td align="right"><b>Option A</b></td>
            <td></td>
            <td align="left"><b>Option B</b></td>
        </tr>
        {{ for amount in right_side_amounts }}
            <tr>
                <td align="right">
                    <b>{{ player.left_side_amount }}</b> now
                <td align="middle">
                    <input type="radio"
                           value="left"
                           name="{{ amount }}"
                           required>&nbsp;&nbsp;
                    <input type="radio"
                           name="{{ amount }}"
                           value="right" data-amount="{{ amount }}"
                           required>
                </td>
                <td align="left">
                    <b>{{ amount }} </b> next month
            </tr>
        {{ endfor }}
    </table>


    {{ formfield_errors 'switching_point' }}
    <input type="hidden" name="switching_point" id="id_switching_point"
           value="9999">

    <button type="button" class="btn btn-primary">Next</button>


{{ endblock }}


{{ block scripts }}
    <script>
        $(document).ready(function () {
            $('input[type=radio]').change(
                function () {
                    var clickedRadio = this;
                    var afterClickedRadio = false;

                    var radios = document.querySelectorAll('input[type=radio]');
                    for (i = 0; i < radios.length; ++i) {
                        var radio = radios[i];
                        if (radio === clickedRadio) {
                            afterClickedRadio = true;
                            continue;
                        }
                        if (!afterClickedRadio && clickedRadio.value === 'left' && radio.value === 'left') {
                            radio.checked = true;
                        }
                        if (afterClickedRadio && clickedRadio.value === 'right' && radio.value === 'right') {
                            radio.checked = true;
                        }
                    }
                }
            );

            function submit() {
                var radios = document.querySelectorAll('input[type=radio]');
                let switchingPoint = document.getElementById('id_switching_point');

                for (i = 0; i < radios.length; ++i) {
                    var radio = radios[i];
                    if (radio.value === 'right' && radio.checked) {
                        switchingPoint.value = radio.dataset.amount;
                        break;
                    } else {
                        switchingPoint.value = 9999;
                    }
                }

                document.getElementById('form').submit();
            }
        });
    </script>
{{ endblock }}