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

{{ block title }}
    Step 1
{{ endblock }}

{{ block content }}

    {{ formfields }}
    <button type='button' class='button' onclick='send_input()'>Calculate Payoffs</button>
    <table class="payoff-table">
        <tr><th>Production Level</th><th>1</th><th>2</th><th>3</th><th>4</th><th>5</th><th>6</th><th>7</th><th>8</th><th>9</th><th>10</th></tr>
        <tr><th>Your Payoff</th><td id="f1"></td><td id="f2"></td><td id="f3"></td><td id="f4"></td><td id="f5"></td><td id="f6"></td><td id="f7"></td><td id="f8"></td><td id="f9"></td><td id="f10"></td></tr>
        <tr><th>Worker Payoff</th><td id="w1"></td><td id="w2"></td><td id="w3"></td><td id="w4"></td><td id="w5"></td><td id="w6"></td><td id="w7"></td><td id="w8"></td><td id="w9"></td><td id="w10"></td></tr>
    </table><br>
    
    {{ next_button }}

    <script>
        // This makes it easier to refer to the users budget request input.
        let input = document.getElementById('id_wage'); 

        // Send input to otree to check input validity
        function send_input() {
            liveSend(input.value);
        };

        // Receive information from oTree and display 
        function liveRecv(data) {
            document.getElementById('f1').innerHTML = data['f1']; // Insert the Firm payoff for a given wage and production level of 1
            document.getElementById('f2').innerHTML = data['f2']; // Insert the Firm payoff for a given wage and production level of 2
            document.getElementById('f3').innerHTML = data['f3']; // Insert the Firm payoff for a given wage and production level of 3
            document.getElementById('f4').innerHTML = data['f4']; // Insert the Firm payoff for a given wage and production level of 4
            document.getElementById('f5').innerHTML = data['f5']; // Insert the Firm payoff for a given wage and production level of 5
            document.getElementById('f6').innerHTML = data['f6']; // Insert the Firm payoff for a given wage and production level of 6
            document.getElementById('f7').innerHTML = data['f7']; // Insert the Firm payoff for a given wage and production level of 7
            document.getElementById('f8').innerHTML = data['f8']; // Insert the Firm payoff for a given wage and production level of 8
            document.getElementById('f9').innerHTML = data['f9']; // Insert the Firm payoff for a given wage and production level of 9
            document.getElementById('f10').innerHTML = data['f10']; // Insert the Firm payoff for a given wage and production level of 10
            document.getElementById('w1').innerHTML = data['w1']; // Insert the worker payoff for a given wage and production level of 1
            document.getElementById('w2').innerHTML = data['w2']; // Insert the worker payoff for a given wage and production level of 2
            document.getElementById('w3').innerHTML = data['w3']; // Insert the worker payoff for a given wage and production level of 3
            document.getElementById('w4').innerHTML = data['w4']; // Insert the worker payoff for a given wage and production level of 4
            document.getElementById('w5').innerHTML = data['w5']; // Insert the worker payoff for a given wage and production level of 5
            document.getElementById('w6').innerHTML = data['w6']; // Insert the worker payoff for a given wage and production level of 6
            document.getElementById('w7').innerHTML = data['w7']; // Insert the worker payoff for a given wage and production level of 7
            document.getElementById('w8').innerHTML = data['w8']; // Insert the worker payoff for a given wage and production level of 8
            document.getElementById('w9').innerHTML = data['w9']; // Insert the worker payoff for a given wage and production level of 9
            document.getElementById('w10').innerHTML = data['w10']; // Insert the worker payoff for a given wage and production level of 10
        };
    </script>

{{ endblock }}