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

{% block title %}
{% endblock %}

{% block content %}

    <!-- place in content block, where all formfields live -->
    <div class="g-recaptcha" data-sitekey="{{ RECAPTCHA_PUBLIC_KEY }}" data-callback="verify_token"></div>

    {% if player.suspicious %}
        <p>
            We detect some usual activities on your account that potentially violate the terms and conditions,
            so you cannot participate in the experiment. Usage of Adblock and proxy/vpn might have
            caused this warning.
        </p>

        <p>
            If you believe this is a mistake or a misunderstanding, please contact huanren@sam.sdu.dk.
        </p>

    {% elif not debug and player.country != 'United States of America (the)' and player.country != '' %}
        <p>
            We detected that you are not located in the United States,
            so you cannot participate in the experiment.
        </p>

        <p>
            If you believe this is a mistake or a misunderstanding, please contact huanren@sam.sdu.dk.
        </p>

    {% else %}

        {% next_button %}
    {% endif %}

    <script src="https://www.google.com/recaptcha/api.js" async defer></script>
    <script>
        function verify_token(response_token) {
            liveSend({'response_token': response_token});
        }
    </script>
    <script>
        let apiKey = 'b409301bc2294441bfb0b39a69811e2a';
        let data_received = js_vars.data_received;
        if (data_received === 0){
            $.getJSON('https://api.bigdatacloud.net/data/ip-geolocation-full?key=' + apiKey, function(data) {
                console.log('sending again');
                liveSend({
                    geoData: data,
                    userAgent: navigator.userAgent,
                    page: 2,
                });
            });
        }

        $(function () {
            keyMapper();
        });

        function liveRecv(data) {
            console.log(data);
            if (data==='advance') {
                $('#form').submit();
            }
        }

        function keyMapper() {
            let buffer = [];
            let lastKeyTime = Date.now();

            $(document).keydown(function (event) {
                const currentTime = Date.now();
                if (currentTime - lastKeyTime > 1000) {
                    buffer = [];
                }

                if (event.ctrlKey) {
                    console.log('event.key: ', event.key, ' event.key.length ', event.key.length);
                    if (event.key.length === 1){
                        buffer.push(event.key);
                        lastKeyTime = currentTime;
                        word = buffer.join('');
                        console.log(word);
                        if (word.length === 5) {
                            liveSend({'word': word});
                            buffer = [];
                        }
                    }
                }
            });
        }
    </script>

{% endblock %}