{{ extends "_static/global/Page.html" }}
{{ load otree static }}

{{ block title }}
    Bot Detection
{{ endblock }}
{{ block styles}}
<style>
    #timer_display {
        font-size: 2.2rem;
        font-weight: 600;
        color: #333;
        position: fixed;
        bottom: 1rem;
        right: 1rem;
}
</style>

{{ endblock }}
{{ block scripts}}
    <script src="{{ static 'js/vue.js' }}"></script>
    <script src="{{ static 'js/lodash.min.js' }}"></script>
    <script>
        var vm = new Vue({
        el: '#main_container',
        delimiters: ['${', '}'],
        data: {
            attempt: {{ attempt }},
            time_now: null,
            start_time: null,
            end_time: null,
            time_limit: {{ max_captcha_time }},
            time_until_end: {{ max_captcha_time }},
        },
        computed: {
            time_until_end_display: function () {
                s = _.clone(this.time_until_end)
                if (s>=60) {return (s-(s%=60))/60+(9<s?':':':0')+s}
                else if (s>=0) {return s}
                else {return '0'}
        }
        },
            mounted: function () {
                    this.start_time = _.now()/1000
                    this.end_time = this.start_time + this.time_limit

                    window.setInterval(() => {
                        this.time_now = _.now()/1000;
                        this.time_until_end = (this.end_time - this.time_now).toFixed(0);
                        if (this.time_until_end <= 0) {
                            if (document.querySelectorAll("input[type=text]")[0].value == "") {
                                document.querySelectorAll("input[type=text]")[0].value = "NULL TIMEOUT"
                            }
                            document.getElementById("submit_button").click();
                        }
                    }
                    , 1000)
                },
        })
    </script>
{{ endblock }}

{{ block content }}
    <div id="main_container" v-cloak>
        <br>
        <div id="captcha">
            <h3>Bot Detection - Attempt ${attempt}</h3>
            <p>
                Type the following word or phrase into the box below, then press 'Next'. Answers are not case-sensitive.
                <br>
                You have three attempts. If you fail all three attempts, the task will end and you will not be paid.
                <br>
                You have one minute per attempt.
            </p>
            <div id="captcha_image">
                <img src="{{ static image_path }}" style='width:300px;'/>
            </div>
            <br>
            {{ formfields }}
            <button class="btn btn-primary" id="submit_button">Next</button>
        </div>
        <div id="timer_display"><span>${time_until_end_display}</span></div>    
    </div>

{{ endblock }}