{{> mod_minilesson/questionheader}}
<div class="minilesson_wordshuffle_player_box gapfill-container mt-5">
    <div style="display:none;" class="wordshuffle_results">{{#str}}wordshuffle_results, mod_minilesson{{/str}}</div>

    <div class="wordshuffle_maintitle" style="display: none">{{iteminstructions}}</div>
    <div class="wordshuffle_itemtext mod_minilesson_itemtext {{rtl}}" style="display: none">{{{itemtext}}}</div>

    <div class="wordshuffle_image_container text-center pt-5">
        <img class="wordshuffle_image" src="{{{itemimageurl}}}" alt="{{#str}}wordshuffle, mod_minilesson{{/str}}">
    </div>

    <div class="wordshuffle_title text-center mt-3">{{#str}}wordshuffle, mod_minilesson{{/str}}</div>

    <div class="wordshuffle_description mt-3 text-center">{{iteminstructions}}</div>

    <div class="wordshuffle_mainmenu mt-3 pb-5">
        <div class="wordshuffle_loaded" style="display:none;">
            <button disabled class='btn btn-block btn-primary wordshuffle_start_btn'>
                {{#str}}start, mod_minilesson{{/str}} <i class='fa fa-play ml-1'></i>
            </button>
        </div>
        <div class="wordshuffle_not_loaded">
            <p>{{#str}}loading, mod_minilesson{{/str}}</p>
        </div>
    </div>

    {{> mod_minilesson/progresstimer }}
    {{#audiocontent}}
    <div style="display:none;" class="wordshuffle_listen_cont text-center mb-2">
        <button class="btn animatesoundbtn position-relative wordshuffle_listen_btn">
            <div class='soundWave'>
                <div class='bar'></div>
                <div class='bar'></div>
                <div class='bar'></div>
                <div class='bar'></div>
                <div class='bar'></div>
            </div>
        </button>
    </div>
    {{/audiocontent}}

    <div style="display:none;" class="question">
        {{#sentences}}
            <div class="wordshuffle_wordset_container wordshuffle_wordset_{{index}} text-center" style="display:none;" data-index="{{index}}" >
                <div class="question-sentence d-flex flex-wrap justify-content-center align-items-start mb-2">
                    {{#gapwords}}
                        {{#isgap}}
                            {{! Slots with per-slot feedback under each  }}
                            <div class="slot-wrap text-center">
                                <div class="slot drop-slot border border-2 border-secondary-subtle" data-index="{{{ index }}}" aria-label="Slot 1"></div>
                                <div id="fb-{{{ index }}}" class="small text-muted mt-1">&nbsp;</div>
                            </div>
                        {{/isgap}}
                        {{^isgap}}
                            <span class="word-text">{{{ word }}}</span>
                        {{/isgap}}
                    {{/gapwords}}
                </div>

                {{! Word bank  }}
                <div id="word-bank" class="word-bank bank d-flex flex-wrap justify-content-center p-2 mb-3">
                    {{#randomgaps}}
                        <div class="word" tabindex="0">{{{ word }}}</div>
                    {{/randomgaps}}
                </div>

                {{#imageurl}}
                <div class='minilesson_sentence_image'>
                    <div class='minilesson_padded_image'>
                        <img src='{{{imageurl}}}' alt='Image for wordset' />
                    </div>
                </div>
                {{/imageurl}}
                {{#hint}}
                <div class='definition-container'><div class='definition'>
                    <div class='hinticon-container'><i class='fa fa-lightbulb-o hinticon'></i></div>
                    {{hint}}
                </div></div>
                {{/hint}}
            </div>
         {{/sentences}}
    </div>

    <div style="display:none;" class="wordshuffle_controls text-center">

        <button class="btn wordshuffle_ctrl-btn wordshuffle_check_btn">
             <i class="fa fa-refresh"></i> {{#str}} reset {{/str}}
        </button>

        {{#allowretry}}
        <button class="btn ctrl-btn wordshuffle_retry_btn">
            <i class="fa fa-refresh"></i> {{#str}}tryagain, mod_minilesson{{/str}}
        </button>
        {{/allowretry}}

        <button class="btn wordshuffle_ctrl-btn wordshuffle_skip_btn">
            {{#str}}skip, mod_minilesson{{/str}} <i class="fa fa-arrow-right"></i>
        </button>

    </div>

    <div class="wordshuffle_resultscontainer"></div>
</div>
{{> mod_minilesson/questionfooter}}