{{ block title }}
    Abstimmung
{{ endblock }}
{{ block content }}

<style>
    .otree-timer {
        display: yes;
    }
</style>
<p>Folgende <b>Hinweispaare</b> wurden von Ihnen und Ihren Mitspielenden geschrieben.</p>
<p>Sie haben nun <b>90 Sekunden</b> Zeit, um sich für ein Hinweispaar zu entscheiden. Wenn eine <b>Mehrheit (mindestens 2 Spielende)</b> für ein Hinweispaar entsteht, wird dieses an den Ratenden übergeben. Andernfalls wird ein Hinweispaar per Zufall ausgewählt.</p>
<p>Über den <b>Chat</b> könnt Sie sich innerhalb Ihrer Gruppe koordinieren.</p>
<table class="table table-striped">
    <tr>
        <th>Auswahl</th>
        <th>Meine Stimme</th>
    </tr>
    {{ for pair in pairs }}    
    <tr>
        <th> {{ pair }} </th>       
        <td>
            <input type="radio" name="vote" value="{{ pair }}" id="radio-{{ pair }}" />
        </td>
    </tr>
    {{ endfor }}
</table>

<h4>Chat</h4>
{{ chat }}

<script>
    document.addEventListener("DOMContentLoaded", function (event) {
        $('.otree-timer__time-left').on('update.countdown', function (event) {
            if (event.offset.totalSeconds === 15) {
                $('.otree-timer').show();
            }
        });
    });
</script>
</br>
</br>
<details>
    <summary> Zusammenfassung der Regeln </summary>
</br>
    <ul>    
        <li> <b><u>Ziel:</u></b> Einer der Spielenden – <i>der Ratende</i> – muss ein Geheimwort anhand eines Hinweispaars erraten, das von seinen Mitspielenden geschrieben wurde.</li>
        <li> <b>Ungültige Hinweispaare</b> enthalten Hinweise, die denselben Wortstamm wie das Geheimwort oder wie eins der fünf Tabuwörter haben, eine Übersetzung des Geheimworts sind oder frei erfunden.</li>
    </ul>  
</details>

{{ endblock }}