{{ block content }}
<style>
.otree-title {
    background: #EEF5FF;
    font-size: 40px;
    text-align: center;
    padding: 5% 0% 2% 0%;
}
.otree-body {
    max-width:1500px
}
.otree-btn-next {
    float: right;
    margin-right: 1%;
}
p {
    font-size: 20px;
}
.otree-timer {
    display: none;
}
.persist{
    height:16px;
    width:16px;
    align: center;
    margin-left:39%;
    margin-bottom:12%;
}
</style>

    <p align="right">You have <span id="time-left"></span> remaining to complete the test.</p>


    <div style="float:left; width:45%;">
    <img class="image" src="{{ static question_data.path }}" alt="test_image alt" style="width:100%;"/>
    </div>

    <div style="float:left; padding-left:4%; padding-top:2%; width:51%;">


    {{ for image in image_data }}
        <label style="text-align: left; width:24%">
            <img src="{{ static image.path }}" width="100%">
            <input type="radio" name="img_choice" value="{{ image.name }}" class="persist">
        </label>
    {{ endfor }}

    </div>



    <br>

    {{ next_button }}

    {{ formfield_errors 'img_choice' }}

    <script>
        let customTimerEle = document.getElementById('time-left');

        document.addEventListener("DOMContentLoaded", function (event) {
            $('.otree-timer__time-left').on('update.countdown', function (event) {
                let minutes = Math.floor(event.offset.totalSeconds/60);
                let seconds = event.offset.totalSeconds%60;
                customTimerEle.innerText = minutes + ":" + String(seconds).padStart(2, '0');
            });
        });

    </script>

{{ endblock }}