{% extends "global/Page.html" %}
{% load otree static %}

{# ****************************************************************************************************************** #}
{# *** STYLES *** #}
{# ****************************************************************************************************************** #}

{% block styles %}
<link href="{% static 'EXLEY_ASSO/EXLEY_ASSO_STYLE.css' %}" rel="stylesheet">

{% endblock %}

{% block title %}
    
{% endblock %}

{% block content %}

<div class = "cadre">

    <div class= "question" style="font-weight:bold; font-size:17px;">
        Please select the charity you would most likely donate to:
    </div>

    <div class="reponse" style="margin-top:20px;">
        <div class="container">
            {% for asso, desc in participant.vars.associations %}
                <div class="row choice-row mb-3" style="border:2px solid black;" data-radio-id="asso{{ forloop.counter }}">
                    <div class="col">
                        
                        <input type="radio" name="association_choice" id="asso{{ forloop.counter }}" value="{{ asso }}">
                        <label for="asso{{ forloop.counter }}">{{ asso }}</label>
                        
                    </div>
                    <div class="col">
                        {{ desc }}
                    </div>
                </div>
            {% endfor %}
        </div>
    </div>
</div>

    

<br>

<center>
                    
    <button class="blue-button">NEXT</button>
    
</center>

{% endblock %}


{% block scripts %}
<script>
    document.addEventListener('DOMContentLoaded', (event) => {
        document.querySelectorAll('.choice-row').forEach(row => {
            row.addEventListener('click', () => {
                // Désélectionner toutes les autres lignes
                document.querySelectorAll('.choice-row').forEach(otherRow => {
                    otherRow.classList.remove('selected');
                });

                // Sélectionner la nouvelle ligne et cocher le radio
                row.classList.add('selected');
                let radioId = row.getAttribute('data-radio-id');
                document.getElementById(radioId).checked = true;
            });
        });
    });
</script>
{% endblock %}