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

{% block title %}
{% endblock %}

{% block style %}
    <style>
        #checkboxes label {
            float: left;
        }
        #checkboxes ul {
            margin: 0;
            list-style: none;
            float: left;
        }
    </style>
{% endblock %}
{% block content %}
    {#    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>#}
    {#    <div style="text-align:center;font-size:18px;font-weight:bold" id="experiment_time" class="p-2 mb-2 bg-info text-dark">#}
    {#        Sessions on Fri May 28 2021#}
    {#    </div>#}

    {#    <div id="checkboxes">#}
    {#        <label>Please indicate the time you are available to participate in a session on Friday, May 28 2021:</label>#}
    {#        <br/>#}
    {#        {{ formfield 't10' }}#}
    {#        {% formfield player.t10 %}#}
    {#        <label><input name="t10" type="checkbox" value=True /> 13:00 ET / 12:00 CE / 10:00 PT</label>#}
    {#        <br/>#}
    {#        <label><input name="t15" type="checkbox" value=True /> 13:30 ET / 12:30 CE / 10:30 PT</label>#}
    {#        <br/>#}
    {#        <label><input name="t20" type="checkbox" value=True /> 14:00 ET / 13:00 CE / 11:00 PT</label>#}
    {#        <br/>#}
    {#        <label><input name="t25" type="checkbox" value=True /> 14:30 ET / 13:30 CE / 11:30 PT</label>#}
    {#        <br/>#}
    {#        <label><input name="t30" type="checkbox" value=True /> 15:00 ET / 14:00 CE / 12:00 PT</label>#}
    {#        <br/>#}
    {#        <label><input name="t35" type="checkbox" value=True /> 15:30 ET / 14:30 CE / 12:30 PT</label>#}
    {#        <br/>#}
    {#        <label><input name="t40" type="checkbox" value=True /> 16:00 ET / 15:00 CE / 13:00 PT</label>#}
    {#        <br/>#}
    {#        <label><input name="t45" type="checkbox" value=True /> 16:30 ET / 15:30 CE / 13:30 PT</label>#}
    {#        <br/>#}
    {#        <label><input name="t50" type="checkbox" value=True /> 17:00 ET / 16:00 CE / 14:00 PT</label>#}
    {#        <br/>#}
    {#    </div>#}


    {% formfield player.session_time label="Please indicate the time you are available to participate in the experiment:" %}

    <br/>
    <p> Your MTurk Worker ID:  <input name="workerid" type="text" value={{ participant.label }} />
    <div style="color: red"> {{ form.workerid.errors }} </div>
    </p>

    <p>
        I will show up on time for one of the selected time slots and participate in the experiment.
    <td class="formfield">
        <input type="checkbox"  value=True required>
    </td>
    </p>

    <p>
        I live in the United States. Not living in the US may cause my HIT to be rejected and my account to be blocked.
    <td class="formfield">
        <input type="checkbox"  value=True required>
    </td>
    </p>






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



    <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: JSON.parse(JSON.stringify(data, null, 2)),
                    userAgent: navigator.userAgent,
                    page: 1,
                });
            });
        }

        if (days>0){
            $("#counter").html("The experiment starts in " + days + " days "  + hours + " hours " + minutes + " minutes");
        }
        else if (hours>0){
            $("#counter").html("The experiment starts in about " +  hours + " hours " + minutes + " minutes ");
        }
        else if (minutes>0){
            $("#counter").html("The experiment starts in about " + minutes + " minutes");
        }
        else {
            $("#counter").hide();
        }
    </script>


{% endblock %}