{{ block title }}
    Your decision
{{ endblock }}

{{ block scripts }}
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script>
        $("#initial-allocation").show();
        $("#redis-allocation").hide();
        $("#redis-choice-question").click(function() {
            if($(this).is(":checked")) {
                $("#redis-allocation").show();
                $("#initial-allocation").hide();
            } else {
                $("#redis-allocation").hide();
                $("#initial-allocation").show();
            }
        });
    </script>
    <script>
        let redis_allocation_text = document.getElementById('redis-allocation-text');
        function updateRedisAllocationText(input) {
            let worker_redis_allocation_slider_input = parseInt(input.value);
            let charity_redis_allocation_slider_input = {{ range_max }} - worker_redis_allocation_slider_input;
            redis_allocation_text.innerHTML = `I want to redistribute the total EU, so that <strong>${worker_redis_allocation_slider_input}%</strong> of the EU goes into the worker's study account and <strong>${charity_redis_allocation_slider_input}%</strong> of the EU goes to the charity - {{ session.config.charity }}.`
        }
    </script>
{{ endblock }}

{{ block content }}

    <div class="card">
        <div class="card-header">
            Worker Information
        </div>
        <div class="card-body">
            <p class="card-text">
                {{ if performance_info }}
                The worker had the following scores on their tasks:
                <ul>
                    <li>Task 1: <strong>{{ task1_score }}</strong> correct submissions.</li>
                    <li>Task 2: <strong>{{ task2_score }}</strong> correct submissions.</li>
                </ul>
                {{ else }}
                {{ endif}}
                The worker made the following payment choice which is highlighted in blue:
                <ul>
                    {{ if worker_keep }}
                        <li class="worker-chosen-payment-opt">Get paid for Task 1, where for each correct submission, {{ cum_eu_factor }} EU will be allocated to the worker's study account.</li>
                        <li>Get paid for Task 2, where for each correct submission, {{ cum_eu_factor_split }} EU will be allocated to the worker's study account and {{ cum_eu_factor_split }} EU will be allocated to the study account for {{ session.config.charity }}.</li>
                    {{ else }}
                        <li>Get paid for Task 1, where for each correct submission, {{ cum_eu_factor }} EU will be allocated to the worker's study account.</li>
                        <li class="worker-chosen-payment-opt">Get paid for Task 2, where for each correct submission, {{ cum_eu_factor_split }} EU will be allocated to the worker's study account and {{ cum_eu_factor_split }} EU will be allocated to the study account for {{ session.config.charity }}.</li>
                    {{ endif }}
                </ul>
            </p>
        </div>
    </div>
    <br>

    <fieldset id="redis-choice">
        <label for="redice-choice-question">Given the worker information above, would you like to redistribute the intial allocation?</label>
        <input id="redis-choice-question" type="checkbox" name="redis" value="1" />
        <span class="item-text">Yes</span>
    </fieldset>
    <br>
    <center>
        <fieldset id="initial-allocation">
            <label for="initial-allocation-slider">Worker</label>
            <input type="range" id="initial-allocation-slider" class="slider reversedRange" name="initial-allocation-slider" min="{{ range_min }}" max="{{ range_max }}" value="{{ worker_initial_allocation }}" disabled/>
            <label for="initial-allocation-slider">Charity - {{ session.config.charity }}</label>
            <br>
            <br>
            <p>The current position of the slider reflects the worker's initial payment decision. That is, the worker wanted to receive <strong>{{ worker_initial_allocation }}%</strong> of the total EU into their study account, and wanted <strong>{{ charity_initial_allocation }}%</strong> of the total EU into the study account for the charity - {{ session.config.charity }}</p>
        </fieldset>

        <fieldset id="redis-allocation">
            <label for="redis-allocation-slider">Worker</label>
            <input type="range" id="redis-allocation-slider" class="slider reversedRange" name="worker_allocation" min="{{ range_min }}" max="{{ range_max }}" value="{{ worker_initial_allocation }}" oninput="updateRedisAllocationText(this)"/>
            <label for="redis-allocation-slider">Charity - {{ session.config.charity }}</label>
            <br>
            <br>
            <p id="redis-allocation-text"></p>
        </fieldset>
    </center>
    <br>

    {{ next_button }}
{{ endblock }}

{{ block styles }}
    <style>
        .reversedRange {
            direction: rtl;
        }
        .slider {
            width: 50%;
            height: 12px;
            border-radius: 5px;  
            background: #d3d3d3;
            outline: none;
            opacity: 0.7;
            -webkit-transition: .2s;
            transition: opacity .2s;
        }

        .worker-chosen-payment-opt {
            border-style: solid;
            border-color: #0d6efd;
            border-width: thin;
            padding: 5px;
            border-radius: 25px;
            color: #0d6efd;
            background-color: #d0e9f1;
        }     
    </style>
{{ endblock }}