{{ block title }}
    Clue Pairs
{{ endblock }}
{{ block content }}

<style>
    .otree-timer {
        display: none;
    }
</style>

<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>
<p>The mystery word for this round is:</p>
<p><b>{{ mystery_word }}</b></p>
<p>Please enter all clue pairs that come to your mind for this word <font color="#FF0000"><b>(one clue per text field)</b></font>:</p>
{{ formfield 'Idea1' }} <b>+</b> {{ formfield 'Idea2' }}
<details>
    <summary>Add a second clue pair</summary>
    {{ formfield 'Idea3' }} <b>+</b> {{ formfield 'Idea4' }}
        <details>
            <summary>Add a third clue pair</summary>
            {{ formfield 'Idea5' }} <b>+</b> {{ formfield 'Idea6' }}
                <details>
                    <summary>Add a fourth clue pair</summary>
                    {{ formfield 'Idea7' }} <b>+</b> {{ formfield 'Idea8' }}
                        <details>
                            <summary>Add a fifth clue pair</summary>
                            {{ formfield 'Idea9' }} <b>+</b> {{ formfield 'Idea10' }}
                                <details>
                                    <summary>Add a sixth clue pair</summary>
                                    {{ formfield 'Idea11' }} <b>+</b> {{ formfield 'Idea12' }}
                                        <p>You have reached the maximum number of clue pairs that can be submitted.</p>
                                </details>
                        </details>
                </details>
        </details>
</details>
</br>    
<button class= "otree-btn btn btn-info">Next</button>
</br>
</br>
<details>
    <summary>Summary of Rules</summary>
    <br>
    <ul>    
        <li><b><u>Objective:</u></b> One of the players – <i>the Guesser</i> – needs to guess a secret word based on a clue pair provided by the other players.</li>
        <li>If two or more groups provide <b>identical clue pairs</b>, these will be removed before <i>the Guesser</i> sees them, and the round ends.</li>
        <li><b>Invalid clue pairs</b> contain hints that share the same word stem as the secret word, are a translation of the secret word, or are entirely made up.</li>
    </ul>  
</details>

{{ endblock }}