{{ extends "global/Page.html" }}

{{ block title }}

{{ endblock }}

{{ block content }}
<p>Please indicate the person you would prefer talking to by clicking on their profile.</p>
{{ formfield_errors 'preferred_role' }}
<div class="row">
    <div class="col">
        {{ include 'PartnerCard.html' with label='Player A' && person=p1 && select=True && show_reward=True &&
        name=p1.endogeneous_role }}
    </div>
    <div class="col">
        {{ include 'PartnerCard.html' with label='Player B' && person=p2 && select=True && show_reward=True &&
        name=p2.endogeneous_role }}
    </div>
</div>
<input type="hidden" name="preferred_role" id="preferred_role" value="" required />

<style>
  .tb th, .tb td { padding: 10px; border: solid 1px #777; }
</style>

<table class="tb">
  <tr>
    <td>In round 1, {{ p1.name }} kept {{ p1.participant.kept.0 }} from a common account of {{ p1_r1_account }}.</td>
    <td>In round 1, {{ p2.name }} kept {{ p2.participant.kept.0 }} from a common account of {{ p2_r1_account }}.</td>
  </tr>
  <tr>
    <td>In round 2, {{ p1.name }} kept {{ p1.participant.kept.1 }} from a common account of {{ p1_r2_account }}.</td>
    <td>In round 2, {{ p2.name }} kept {{ p2.participant.kept.1 }} from a common account of {{ p2_r2_account }}.</td>
  </tr>
</table>
<p></p>
{{ next_button }}
{{ endblock }}

{{ block scripts }}
<script>
    var radioButtons = document.querySelectorAll('input[type="radio"]');
    var input = document.getElementById('preferred_role');
    var nextBtn = document.getElementById('next-btn');

    // Iteriere über alle Radio-Buttons und registriere einen Event-Handler für das 'change'-Event
    for (var i = 0; i < radioButtons.length; i++) {
        radioButtons[i].addEventListener('change', function () {
            // Deaktiviere alle Radio-Buttons außer dem ausgewählten
            input.value = this.name;
            for (var j = 0; j < radioButtons.length; j++) {
                if (radioButtons[j] !== this) {
                    radioButtons[j].checked = false;
                }
            }
        });
    }
</script>
{{ endblock }}