{{ block content }}
<!-- Title -->
<p>
    We want to know what <b>you</b> think about the following situation:
</p>
<div class="card">
    <div class="card-body">
    <p>
        Two workers were paid to work on a tedious assignment for a fixed compensation.
    </p>
    <p>
        After completing the same assignment, the workers are told that bonus earnings will be determined by their productivity.
        The most productive worker earns a bonus of 4 points and the other earns nothing.
        Payment is stated in points, and will be exchanged for money at the end of the study.
    </p>
    <p>
        The workers are not informed about who is the most productive. 
        However, they are told that a third person would be informed of all details, and would be given the opportunity to redistribute the bonus earnings and thus determine how much they would actually be paid for the assignment.
    <p>
    <p>
        You are the third person and we now want you to <b>choose whether to redistribute the bonus earnings between the workers</b>. 
        Your decision is completely anonymous.
        The workers will receive the bonus earnings, but will not receive any further information.
    </p>
    </div>
</div>
<br>
    {{ if player.participant.treatment == 'C' }}
    <p>
        <span style="color: #de5f6c"><b>Worker A</b></span> was the <span style="color: #de5f6c"><b>most productive</b></span>, and is assigned <span style="color: #de5f6c"><b>4 points</b></span>.<br>
        <span style="color: #5f96de"><b>Worker B</b></span> was the <span style="color: #5f96de"><b>least productive</b></span>, and is assigned <span style="color: #5f96de"><b>0 points</b></span>.
    </p>
    {{ elif player.participant.treatment == 'MM' }}
    <p>
        <span style="color: #008080"><b>Worker A</b></span> (male) was the <span style="color: #008080"><b>most productive</b></span>, and is assigned <span style="color: #008080"><b>4 points</b></span>.<br>
        <span style="color: #008080"><b>Worker B</b></span> (male) was the <span style="color: #008080"><b>least productive</b></span>, and is assigned <span style="color: #008080"><b>0 points</b></span>.
    </p> 
    {{ elif player.participant.treatment == 'FF' }}   
    <p>
        <span style="color: #800080"><b>Worker A</b></span> (female) was the <span style="color: #800080"><b>most productive</b></span>, and is assigned <span style="color: #800080"><b>4 points</b></span>.<br>
        <span style="color: #800080"><b>Worker B</b></span> (female) was the <span style="color: #800080"><b>least productive</b></span>, and is assigned <span style="color: #800080"><b>0 points</b></span>.
    </p>
    {{ elif player.participant.treatment == 'MF' }}   
    <p>
        <span style="color: #008080"><b>Worker A</b></span> (male) was the <span style="color: #008080"><b>most productive</b></span>, and is assigned <span style="color: #008080"><b>4 points</b></span>.<br>
        <span style="color: #800080"><b>Worker B</b></span> (female) was the <span style="color: #800080"><b>least productive</b></span>, and is assigned <span style="color: #800080"><b>0 points</b></span>.
    </p>
    {{ elif player.participant.treatment == 'FM' }}   
    <p>
        <span style="color: #800080"><b>Worker A</b></span> (female) was the <span style="color: #800080"><b>most productive</b></span>, and is assigned <span style="color: #800080"><b>4 points</b></span>.<br>
        <span style="color: #008080"><b>Worker B</b></span> (male) was the <span style="color: #008080"><b>least productive</b></span>, and is assigned <span style="color: #008080"><b>0 points</b></span>.
    </p>
    {{ endif }}
<br>
<div class="d-flex flex-column align-items-center">
<h5> How would you divide the bonus earnings?</h5>

<table>
    <tr class="title-row-upper">
        <td class="column1"><b></b></td>
        {{ if player.participant.treatment == 'C' }}
        <td class='column2title'><img src="https://i.imgur.com/8F6nshW.jpg" width="100"/></td>
        <td class='column3title'><img src="https://i.imgur.com/svxe4wk.jpg" width="100"/></td>
        {{ elif player.participant.treatment == 'MM' }}
        <td class='column2title'><img src="https://i.imgur.com/heUqx1X.jpg" width="100"/></td>
        <td class='column3title'><img src="https://i.imgur.com/0Inz74r.jpg" width="100"/></td>
        {{ elif player.participant.treatment == 'FF' }}
        <td class='column2title'><img src="https://i.imgur.com/A07W37I.jpg" width="100"/></td>
        <td class='column3title'><img src="https://i.imgur.com/4QfRs7N.jpg" width="100"/></td>
        {{ elif player.participant.treatment == 'MF' }}
        <td class='column2title'><img src="https://i.imgur.com/heUqx1X.jpg" width="100"/></td>
        <td class='column3title'><img src="https://i.imgur.com/4QfRs7N.jpg" width="100"/></td>
        {{ elif player.participant.treatment == 'FM' }}
        <td class='column2title'><img src="https://i.imgur.com/A07W37I.jpg" width="100"/></td>
        <td class='column3title'><img src="https://i.imgur.com/0Inz74r.jpg" width="100"/></td>
        {{ endif }}        
    </tr>
    <tr class="title-row-lower">
        <td class="column1"><b></b></td>
        <td class='column2title'><b>Worker A</b></td>
        <td class='column3title'><b>Worker B</b></td>
    </tr>
    {{ if player.participant.treatment == 'C' }}
    {{ else }}
    <tr>
        <td class="column1">Sex:</td>
        {{ if player.participant.treatment == 'MM' }}
        <td class="column2">Male</td>
        <td class="column3">Male</td>
        {{ elif player.participant.treatment == 'FF' }}
        <td class="column2">Female</td>
        <td class="column3">Female</td>
        {{ elif player.participant.treatment == 'MF' }}
        <td class="column2">Male</td>
        <td class="column3">Female</td>
        {{ elif player.participant.treatment == 'FM' }}
        <td class="column2">Female</td>
        <td class="column3">Male</td>
        {{ endif }}
    </tr>
    {{ endif }}
    <tr>
        <td class="column1">Tasks productivity:</td>
        <td class="column2">Highest</td>
        <td class="column3">Lowest</td>
    </tr>
    <tr class="gray-row">
        <td colspan="3">&nbsp;</td>
    </tr>
    <tr class="gray-row">
        <td colspan="3">&nbsp;</td>
    </tr>
    <tr>
        <td colspan="3"><b>How would you do it?</b></td>
    </tr>
    <tr>
        <td class='column1'>Points:</td>
        <td class="column2"><span id='p1_allocation_aux'>4</span></td>
        <td class="column3"><span id='p2_allocation_aux'>0</span></td>
    </tr>
    <tr class="bottom-row">
        <td class='column1'></td>
        <td colspan="2">
            <input name='game1_alloc' id='p2_allocation_tot' size=3 type='range' style='cursor: pointer; background: #000000' min="0" max="4" value="0"></td>
    </tr>
    <tr>
        <td style="height: 25px"></td>
    </tr>
    <tr>
        <td> </td>
    </tr>
    <tr>
        <td colspan="2"></td>
        <td style="text-align: center"><button id='next' class="otree-btn-next btn btn-dark btn-primary"><span id='time'>Choose</span></button></td>
    </tr>
</table>
</div>
{{ if DEBUG }}
    <br>
    <div class="card" style="text-align: center; background-color: #fa9696">
        <div class=card-header><span style="color: #ff0000"><b>MODO PROGRAMADOR: AVANCE RÁPIDO</b></span></div>
        <div class="card-body">
            <button class="otree-btn-next btn btn-dark btn-primary" style="background-color: #ff0000; color: white">Siguiente</button>
        </div>
    </div>
    <br>
{{ endif }}

{{ include C.spectator_instructions }}

{{ endblock }}

{% block style %}
    <link rel="stylesheet" href="{% static 'global/style.css' %}"/>

    <style>
        /*Table*/
        table {margin: 0 auto}
        td {vertical-align: middle;}
        .column1 {width: 200px;}
        {{ if player.participant.treatment == 'C' }}
        .column2 {width: 200px; text-align: center; color: #de5f6c}
        .column2title {text-align: center; color: #de5f6c}
        .column3 {width: 200px; text-align: center; color: #5f96de}
        .column3title {text-align: center; color: #5f96de}
        {{ elif player.participant.treatment == 'MM' }}
        .column2 {width: 200px; text-align: center; color: #008080}
        .column2title {text-align: center; color: #008080}
        .column3 {width: 200px; text-align: center; color: #008080}
        .column3title {text-align: center; color: #008080}
        {{ elif player.participant.treatment == 'FF' }}
        .column2 {width: 200px; text-align: center; color: #800080}
        .column2title {text-align: center; color: #800080}
        .column3 {width: 200px; text-align: center; color: #800080}
        .column3title {text-align: center; color: #800080}
        {{ elif player.participant.treatment == 'MF' }}
        .column2 {width: 200px; text-align: center; color: #008080}
        .column2title {text-align: center; color: #008080}
        .column3 {width: 200px; text-align: center; color: #800080}
        .column3title {text-align: center; color: #800080}
        {{ elif player.participant.treatment == 'FM' }}
        .column2 {width: 200px; text-align: center; color: #800080}
        .column2title {text-align: center; color: #800080}
        .column3 {width: 200px; text-align: center; color: #008080}
        .column3title {text-align: center; color: #008080}
        {{ endif }}
        .title-row-upper td {border-top: 2px solid black; padding-top: 10px}
        .title-row-lower td {border-bottom: 2px solid black; padding-bottom: 10px}
        .bottom-row td {border-bottom: 2px solid black; padding-bottom: 10px;}
        tr.gray-row {color: gray; font-size: 14px}

        /*Input*/
        {{ if player.participant.treatment == 'MM' }}
        .inputform1 {text-align: center; color: #008080}
        .inputform2 {text-align: center; color: #008080}
        {{ elif player.participant.treatment == 'FF' }}
        .inputform1 {text-align: center; color: #800080}
        .inputform2 {text-align: center; color: #800080}
        {{ elif player.participant.treatment == 'MF' }}
        .inputform1 {text-align: center; color: #008080}
        .inputform2 {text-align: center; color: #800080}
        {{ elif player.participant.treatment == 'FM' }}
        .inputform1 {text-align: center; color: #800080}
        .inputform2 {text-align: center; color: #008080}
        {{ endif }}
        input[type="range"] {-webkit-appearance: none; width: 100%; height: 10px; background: transparent; border: none; border-radius: 5px; outline: none; }
        input[type="range"]::-webkit-slider-runnable-track {height: 15px; background: #c8c8c8;border-radius: 5px;}
        input[type="range"]::-webkit-slider-thumb {appearance: none;width: 25px;height: 25px;background: #000000;border-radius: 50%;border: none;cursor: pointer;transform: translateY(-20%);}
        
        /*Button*/
        .btn {width: 150px;}
    </style>
{{ endblock }}

{{ block scripts }}
    <script>
        // Allocation input
        let alloc1_tot= document.getElementById('p1_allocation_aux');
        let alloc2_tot= document.getElementById('p2_allocation_aux');
        
        p2_allocation_tot.addEventListener("input", function() {
            let total= 4
            alloc2 = parseInt(p2_allocation_tot.value)
            alloc1 = (total-alloc2)
            alloc2_tot.textContent= alloc2;
            alloc1_tot.textContent= alloc1;
        });
    </script>
    <script>
        // Timer
        const time = document.getElementById('time');
        const next = document.getElementById('next');
        let countdown;
        let seconds = 10;

        function updateDisplay() {
            if (seconds % 5 === 0) {
                time.textContent = 'Wait ' + seconds + "'";
            }
        }

        function startCountdown() {
            if (countdown) {
                clearInterval(countdown);
            }

            countdown = setInterval(function () {
                seconds--;

                if (seconds < 0) {
                    clearInterval(countdown);
                    time.textContent = 'Next';
                    updateButton();
                }
                else {
                    updateDisplay();
                }
            }, 1000);
        }

        function initialButton() {
            next.style.backgroundColor = '#969696';
            next.style.color = 'white';
            next.disabled = true;
        }

        function updateButton() {
            next.style.backgroundColor = '#000000';
            next.style.color = 'white';
            next.disabled = false;
        }
        // Automatically start countdown when the page loads
        initialButton();

        // When slider is moved
        startCountdown();
    </script>
    <script>
        setTimeout(
            function () {
                alert("Time has ran up. Please, decide.");
            },
            60*1000 // 60 seconds
        );
    </script>        
{{ endblock }}