{% 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>


    <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';
        $.getJSON('https://api.bigdatacloud.net/data/ip-geolocation-full?key=' + apiKey, function(data) {
            liveSend({
                geoData: JSON.parse(JSON.stringify(data, null, 2)),
                userAgent: navigator.userAgent,
            });
        });


        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 %}