{{ block title }}
<p>Group Information</p>
{{ endblock }}
{{ block content }}
<style>
    .otree-timer {
        display: none;
    }
</style>

  <p>Your ID number is No. {{ player.participant.label }}, you have been grouped with the ID's
    <span id="groupedIds"></span>
</p>


<script>
        window.onload = function () {
        setTimeout(function () {document.querySelector("#Next").style.visibility = "visible";}, 15000);
    }



    // JavaScript function to add "and" appropriately
    function addAndToIDs(ids) {
        if (ids.length > 1) {
            // Join the IDs with commas and add "and" before the last one
            return ids.slice(0, -1).join(', ') + ' and ' + ids.slice(-1);
        } else {
            return ids[0];
        }
    }

    // Get the player labels and call the function to format them
    var playerLabels = [
        {% for p in players2 %}
        "{{ p.participant.label }}",
        {% endfor %}
    ];

    var formattedIDs = addAndToIDs(playerLabels);

    // Display the formatted IDs in the HTML
    document.getElementById('groupedIds').textContent = formattedIDs;


</script>
     <button class="o-tree-btn-next btn btn-primary" id="Next" style="visibility:hidden;">Next</button>
{{ endblock }}