{{ extends "global/Page.html" }}


{% block scripts %}
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script>

    var sec = 0;

    var timer = setInterval(function () {
    document.getElementById("s1_decision_time").value = ((sec+=100)/1000);}, 100);

    //document.getElementById("form").elements["s1_contribution"].addEventListener('change', clickSlider());

    //function clickSlider() {
    //    alert("clickevent");
    //    document.getElementById("form").elements["slider_check"].value = 1;
    //}

    function checkwork(autosubmit){

       var decisioncheck = Number(document.getElementById("form").elements["slider_check"].value);
       //alert(decisioncheck);
       //var checkflag = 0;

       //if (contribution < 0 || contribution > 2) {
       //     checkflag = 1;
       //     alert("Please select a value between $0.00 and $2.00.")
       // }


        if (decisioncheck == 1) {
            document.getElementById("form").submit();
        } else {
            alert("Please select a contribution between $0.00 and $1.00 by clicking and moving the slider.");
        }

    }


</script>
<script src="{{ static 'mgslider.js' }}"></script>

<script>
   $(document).ready(function (event) {
       slider1 = new mgslider("s1_contribution", 0.00, 1.00, 0.05);
       slider1.yourvalue = "Your contribution ($)";
       slider1.recall = true; // Optional line to remember value across errors
       slider1.print(document.getElementById("s1_contribution_val"));


   });



</script>
{% endblock %}

{% block styles %}

    <STYLE TYPE="text/css">
        .indented { padding-left: 50pt; padding-right: 50pt; font-weight: normal !important;}
        .tabmarg {margin-left: 80px}
        .res{
            font-size: large;}
        .resultlabel{
            color: #1B232F;
            font-size: large;
            font-weight: bold;
            background-color: #FFDDD8;
        }
        .resultlabelsm{
            color: #1B232F;
            font-weight: bold;
            background-color: #FFDDD8;
        }
        .norm{
            font-size: medium;
        }
        .ui-dialog-titlebar-close {display: none;}
        .ui-dialog-content {
            background-color: #f6f6f6;
            padding: 15px;
            border: #ebebeb;
            border-style: groove;
            border-width: 2px;
            line-height: normal;
        }
        .ui-dialog-buttonpane {
            text-align: right;
        }
        #dialog-exp {
            display: none
        }
        #dialog-message-1 {
            display: none
        }
        #dialog-message-2 {
            display: none
        }
        #dialog-message-3 {
            display: none
        }
        table, tr, td {
            border: none;
            padding: 3px;
            border-spacing: 3px;
        }
        .noborder table, .noborder tbody, .noborder td, .noborder th, .noborder tr
        {
            border: none;
        }


        .mgslider-wrapper {
            border-spacing: 10px;
        }
        .mgslider-show {
            text-align: center;
        }
        .mgslider-limit {
            width: 10%;
            min-width: 75px;
            height: 40px;
            margin: 100px;
            text-align: center;
            background: #eee;
            border: 1px solid #888;
        }
        .mgslider-limit, .mgslider-value {
            font-variant-numeric: tabular-nums;
        }
        .mgslider-before {
            height: 16px;
            width: 100%;
            background: #1e5bff;
        }
        .mgslider-feedback {
            -webkit-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }

    </STYLE>

{% endblock %}

{{ block title }}
    Stage 1 Contribution Decision
{{ endblock }}

{{ block content }}


    <hr>

    <p>
        Please activate the slider below by clicking anywhere on the blue line. Please move the slider to indicate your
        desired effect on the likelihood that Manager B receives a positive performance evaluation.
    </p>

    <p>
        The more you move the slider to the right on the scale, the greater the increase in the likelihood of a positive
        performance evaluation for Manager B (i.e., $0.05 has a smaller effect than $0.10, which is smaller than $0.15,
        and so on).
    </p>
    <p>
        Recall that your total pay for this project will be $2.00 minus the amount you choose on the slider below.
    </p>

    <table class="noborder" width="80%" cellspacing="2" cellpadding="2">
        <tr>
            <td width="35%" align="left">Increase in likelihood of Manager's positive evaluation:</td>
            <td width="5%" align="left">&nbsp;</td>
            <td width="20%" align="left">None</td>
            <td width="40%" align="right">Much more likely</td>
        </tr>
        <tr>
            <td width="25%" align="center">&nbsp;</td>
            <td width="5%" align="left">&nbsp;</td>
            <td colspan="2" width="35%" align="center"><div id="s1_contribution_val"></div>{{ formfield_errors 's1_contribution' }}
                </td>
        </tr>
        <tr>
            <td width="35%" align="center">Contribution</td>
            <td width="5%" align="left">&nbsp;</td>
            <td width="20%" align="left">$0.00</td>
            <td width="40%" align="right">$1.00</td>
        </tr>
    </table>



    <hr>

    <button type="button" class="btn btn-primary" onclick="checkwork(0)">Next</button>
    <input type="hidden" id="s1_decision_time" name="s1_decision_time">
    <input type="hidden" id="slider_check" name="slider_check" value="0">

{{ endblock }}