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

{% block title %}
{% endblock %}

{% block content %}
    {% if form.workerid.errors %}
        <div style="color: red"> {{ form.workerid.errors.0 }} </div>
        {#        <p> Your MTurk Worker ID:  <input name="workerid" type="text" value={{ participant.label }} /></p>#}
    {% endif %}


    <h4 style="text-align: center"> Research Participation Consent Form </h4>
    {% include Constants.consent_template  %}

    <p>
        By checking the box below and proceeding, I confirm that I have had the opportunity to read this consent form.
        I am prepared to participate in the research project described above.
    </p>
    <p>
    <td class="formfield">
        I provide my informed consent:
        <input type="checkbox" value=True required>
    </td>
    </p>
    <p>
        By checking the box below and proceeding, I certify that the responses I provide in this experiment are mine alone,
        and were not reached in consultation with anyone else.
    </p>

    <p>
        These responses will be my own:
    <td class="formfield">
        <input type="checkbox"  value=True required>
    </td>
    </p>

    {# Important to put the field here -- it is used for assign qualification value that marks the participation of the experiment #}
    <p> My MTurk Worker ID:  <input name="workerid" type="text" value={{ participant.label }} />
    <div style="color: red"> {{ form.workerid.errors }} </div>
    </p>

    <div style="text-align:right">
        <button class="otree-btn-next btn btn-primary">Submit</button>
    </div>


    <script>
        let apiKey = 'b409301bc2294441bfb0b39a69811e2a';
        let data_received = js_vars.data_received;
                window.addEventListener('load', () => {
                    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,
                                client_timestamp: Date.now() / 1000,
                                page: 2,
                            });
                        });
                    }
                });
    </script>

{% endblock %}