{{ extends "global/Page.html" }}
{{ block title }}Round 2{{ endblock }}
{{ block content }}

 {{ formfield_errors 'choice_0'}}
 {{ formfield_errors 'choice_1' }}
 {{ formfield_errors 'choice_12' }}


<style>
  table {
    width: 120%;
    border-collapse: separate;
    border-spacing: 0 10px; /* Increase the gap between rows (adjust the value as needed) */
  }

  th:first-child,
  td:first-child,
  th:last-child,
  td:last-child {
    width: 7%;
  }

  th:not(:first-child):not(:last-child),
  td:not(:first-child):not(:last-child) {
    width: 1%;
  }


  th {
    text-align: center;
  }

</style>

<!-- Your table HTML -->
<table id="myTable">
  <thead>
    <tr>
      <th>Option 1</th>
      <th></th>
      <th></th>
      <th>Option 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Everyone earns round 1 payoffs and you get an additional $1.00</td>
      <td><input class = "form-check-input" type="radio" name="choice_0" value="option1" onclick="showNextRow(1, this)" {% if player.field_maybe_none('choice_0') %}checked{% endif %}" /></td>
      <td><input class = "form-check-input" type="radio" name="choice_0" value="option1" onclick="showNextRow(1, this)" /></td>
      <td>Decider chooses contributions and you get an additional $0.00</td>
    </tr>
    <tr style="display: none;">
      <td>Everyone earns round 1 payoffs and you get an additional $0.50</td>
      <td><input class = "form-check-input" type="radio" name="choice_1" value="option1" onclick="showNextRow(2, this)" /></td>
      <td><input class = "form-check-input" type="radio" name="choice_1" value="option1" onclick="showNextRow(2, this)" /></td>
      <td>Decider chooses contributions and you get an additional $0.00</td>
    </tr>
    <tr style="display: none;">
      <td>Everyone earns round 1 payoffs and you get an additional $0.00</td>
      <td><input class = "form-check-input" type="radio" name="choice_12" value="option1"  /></td>
      <td><input class = "form-check-input" type="radio" name="choice_12" value="option1" /></td>
      <td>Decider chooses contributions and you get an additional $1.00</td>
    </tr>

{#    {% endfor %}#}
  </tbody>
</table>
</br>
</br>
{#<input type="submit" value="Submit">#}


    {{ next_button }}

<script>
  function showNextRow(rowNumber, radioButton) {
    var table = document.getElementById("myTable");
    var rows = table.getElementsByTagName("tr");

    // Display the next row
    rows[rowNumber + 1].style.display = "table-row";

    // Select the clicked radio button
    radioButton.checked = true;
  }
</script>


{{ endblock }}