{{ block title }}Grazie per la partecipazione!{{ endblock }}
{{ block content }}

<style>
    .center-button {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100px; /* Adjust height as needed */
    }

    body {
        font-size: 18px;  /* try 16–20px depending on preference */
    }
</style>
    <p>
        <font size="5">  
            <strong>Il Suo punteggio: {{ player.score }}/40</strong>
        </font>
    </p>

     <button class="btn btn-primary" id="button_details" type="button">Dettagli</button> 

    <p></p>

    <div id="details" style="display:none">
        {% for field in form %}
            <p></p>
            <p>&#11096 {{ field.label }}</p>
            {% for q in questions %}
            {% if q.name == field.name %}
                {{ q.ans }}
                <i>La Sua risposta: {{ q.value }}</i> {{ q.check }}
            {% endif %}
            {% endfor %}
            <p></p>
        {% endfor %}
    </div>

    <p>
    <div class="center-button">
    <button class="btn btn-primary" type="button" onclick="redirectToURL()">Torna su Prolific per ricevere il pagamento</button>
    </div>
</p>

    {% include "_templates/global/scripts.html" %}

    {% include "_templates/global/styles.html" %}
    <script>
    let url = js_vars.redirect_url
    
    document.getElementById('button_details').addEventListener('click', function() {
            var div = document.getElementById('details'); 
            if (div.style.display == 'none') {
                div.style.display = 'block';
            } else {
                div.style.display = 'none';
            }
        });
    
    function redirectToURL() {
        window.location.href = url;
    } 
    </script>
{{ endblock }}