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

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

{% block content %}

<script type="text/javascript">
    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("bfDownload").value = "True"
        document.getElementById("chosenBF").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 will be determined by 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")   
            }
        }

        // Disable buttons if bonus file was downloaded already
        if (js_vars.chosenBF != "None"){
            deactivate_btns(js_vars.chosenBF);
            }
    });

    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>

<div class="row"></div>
<div class="row my-3 bg-light px-3 py-3 rounded border">
    <div class="col">
        <div class = "d-none">
            {{ formfield_errors 'bfDownload' }}
            <input type="hidden" id="bfDownload" name="bfDownload" value="False"></input>
            
            {{ formfield_errors 'chosenBF' }}
            <input type="hidden" id="chosenBF" name="chosenBF" value=""></input>
        </div>

        <div>

            <div>
                <p>
                    <strong>
                        You will complete three tasks in this experiment but only one of them – your "bonus task" – determines 
                        your entire bonus. 
                    </strong>
                    <br></br>
                    Your bonus task is randomly determined as follows: 
                    You must download one of the three password-protected “bonus files” below.
                    Each bonus file describes one of the experimental tasks, and 
                    the task described in your downloaded bonus file is your bonus task. 
                    Because you will receive the password to your bonus file only after completing all tasks, 
                    you do not yet know your bonus task. 
                    This suggests that you should complete each task with great care, as if it determines 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"
                            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>
        </div>


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

        </div>
    </div>

    {% if testing %}
        {{ formfield 'feedback_dwnldBonusFiles' }}
    {% endif %}
     
    {% endblock %}