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

{% block title %}
Your bonus
{% endblock %}

{% block content %}
<div class="row my-3 bg-light px-3 py-3 rounded border">
    <div class="col">
        <div class = "d-none">
            {{ form.download_bool.errors }}
            <input type="hidden" id="download_bool" name="download_bool" value="False"></input>

            {{ form.user_chosen_decision.errors }}
            <input type="hidden" id="user_chosen_decision" name="user_chosen_decision" value=""></input>
        </div>

        <div>

            <div>
                <p>
                    <strong>
                        You will complete eleven tasks in this experiment and only one of them – your bonus task – determines 
                        your entire bonus. 
                    </strong>
                </p>
                <p>
                    Your bonus task is randomly determined as follows: 
                    Download one of the eleven bonus files below.
                    Each bonus file describes one task. 
                    The task in your downloaded bonus file is your bonus task. 
                </p>

                <p>
                    Because you receive the password to your bonus file 
                    only after the experiment, you will know your bonus task
                    only after the experiment. Therefore, complete each task 
                    with great care – it could determine your entire bonus!
                </p>
                
                <p id="disappear_text_2" class="alert alert-warning">
                    <strong>
                        Please download your bonus file 
                    </strong> and save it in a convenient location.
                </p>

                <p>
                <div class="text-center" >
                        {% for i, dwn_id, dwn_link in download_links %}

                        <a href="{% static  dwn_link %}" name="download_btn" id="{{ dwn_id }}" class="btn btn-primary mb-1 mr-1 px-1 testBtn"
                            onclick="liveSend(this.id)" download style="width: 180px;" 
                            >
                            <span>
                                Download
                                <br>
                                <i>
                                    {{dwn_id}}.pdf
                                </i>
                            </span>
                        </a>
                        
                        {% endfor %}
                </div>
                </p>
                
            </div>
            <div id="appear_text" class="alert alert-info d-none">
            </div>

            {{ if touristVersion}}
            <div class="col-12">
                <span style="color:red;">Note:</span>
                In this tourist version, the password for all bonus files
                is '{{showPW}}' (no quotes).
            </div>
            
            {{ endif }}

        </div>


        <button id="hidden_submit" class="btn btn-primary d-none">What are the tasks?</button>

        </div>
    </div>
     
<script type="text/javascript">
    window.onload = function() {
        if (js_vars.user_chosen_decision != "None"){
            deactivate_btns(js_vars.user_chosen_decision);
            }
    }

    function liveRecv(data) {
            deactivate_btns(data);
        }

    function deactivate_btns(cur_id) {
        var all = document.getElementsByName("download_btn");

        for (var i = 0; i < all.length; i++) {
            if (all[i].id != cur_id){
                all[i].classList.add("disabled")
            }
        }
                    
        document.getElementById("download_bool").value = "True"
        document.getElementById("user_chosen_decision").value = cur_id
        document.getElementById("hidden_submit").classList.remove("d-none")
        //document.getElementById("disappear_text").classList.add("d-none")
        document.getElementById("disappear_text_2").classList.add("d-none")
        document.getElementById("appear_text").classList.remove("d-none")
        
        document.getElementById("appear_text").innerHTML = `
                    <strong>
                        Your bonus file is ${cur_id}.pdf.
                    </strong>
                    Your bonus is determined by how you complete the task described in 
                    ${cur_id}.pdf.
                    `
    }

    $( document ).ready(function() {
        // Disable Download Buttons in Page is Ready
        if (js_vars.testing == false) {
            var all = document.getElementsByName("download_btn");
            for (var i = 0; i < all.length; i++) {
                all[i].classList.add("disabled")   
            }
        }
    });

    setTimeout(function() {
        // Enable Download after Waiting Time
        var all = document.getElementsByName("download_btn");
        for (var i = 0; i < all.length; i++) {
            all[i].classList.remove("disabled")   
        }
    }, js_vars.min_time_before_download * 1000)


    
    
</script>
{% endblock %}