{{ block title }}
    Round {{ player.round_number }}
{{ endblock }}

{{ block content }}

    <style>
        .otree-btn-next {
            float: right;
            margin: 40px auto;
        }
        
        .button {
            background-color: #007bff;
            color: white;
            border-radius: 3px;
            border: none;
            padding: 5px 25px;
            margin-bottom: 20px;
        }
        .button:hover {
            background-color: white;
            border: 1px solid #008CBA;
            color: black;
            border-radius: 3px;
        }

        table {
            border-collapse: collapse;
            width: 70%;
            margin-left: auto;
            margin-right: auto;
        }
        td, th {
            border: 1px solid black;
            text-align: center;
            padding: 8px;
        }
        th {
            background-color: #dddddd;
        }
    </style>

    {{ if session.choice_condition == True }}

        {{ if group.employee_set == True }}

            <p>
                The firm has chosen to let you set the employee wage. 
            </p>

            {{ if session.capped_condition == True }}
            
                <p>
                    The firm has set a wage cap of {{ group.cap }} Lira.
                </p>
        
            {{ endif }}

            {{ formfield 'wage' label='Please set your wage:'}}

            <button type='button' class='button' onclick='send_input()'>Calculate Payoffs</button>

            <table>
                <tr><th>Production Level</th><th>0.1</th><th>0.2</th><th>0.3</th><th>0.4</th><th>0.5</th><th>0.6</th><th>0.7</th><th>0.8</th><th>0.9</th><th>1.0</th></tr>
                <tr><th>Firm 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>Employee Payoff</th><td id="e1"></td><td id="e2"></td><td id="e3"></td><td id="e4"></td><td id="e5"></td><td id="e6"></td><td id="e7"></td><td id="e8"></td><td id="e9"></td><td id="e10"></td></tr>
            </table><br>

        {{ else }}

            <p>
                The firm has chosen to set the employee wage.
            </p>
            <p>
                The firm has set the employee wage at {{ group.wage }} Lira.
            </p>

        {{ endif }}

    {{ else }}

        {{ if session.session_employee_set == True }}

            {{ formfield 'wage' label='Please set your wage:'}}

            <button type='button' class='button' onclick='send_input()'>Calculate Payoffs</button>

            <table>
                <tr><th>Production Level</th><th>0.1</th><th>0.2</th><th>0.3</th><th>0.4</th><th>0.5</th><th>0.6</th><th>0.7</th><th>0.8</th><th>0.9</th><th>1.0</th></tr>
                <tr><th>Firm 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>Employee Payoff</th><td id="e1"></td><td id="e2"></td><td id="e3"></td><td id="e4"></td><td id="e5"></td><td id="e6"></td><td id="e7"></td><td id="e8"></td><td id="e9"></td><td id="e10"></td></tr>
            </table><br>

        {{ else }}

            <p>
                The firm has set the employee wage at {{ group.wage }} Lira.
            </p>

        {{ endif }}
    {{ endif }}
    
    {{ 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) {
            if (data['type'] == 'error') {
                document.getElementById('f1').innerHTML = ""; // Insert the Firm payoff for a given wage and production level of 0.1
                document.getElementById('f2').innerHTML = ""; // Insert the Firm payoff for a given wage and production level of 0.2
                document.getElementById('f3').innerHTML = ""; // Insert the Firm payoff for a given wage and production level of 0.3
                document.getElementById('f4').innerHTML = ""; // Insert the Firm payoff for a given wage and production level of 0.4
                document.getElementById('f5').innerHTML = ""; // Insert the Firm payoff for a given wage and production level of 0.5
                document.getElementById('f6').innerHTML = ""; // Insert the Firm payoff for a given wage and production level of 0.6
                document.getElementById('f7').innerHTML = ""; // Insert the Firm payoff for a given wage and production level of 0.7
                document.getElementById('f8').innerHTML = ""; // Insert the Firm payoff for a given wage and production level of 0.8
                document.getElementById('f9').innerHTML = ""; // Insert the Firm payoff for a given wage and production level of 0.9
                document.getElementById('f10').innerHTML = ""; // Insert the Firm payoff for a given wage and production level of 1.0
                document.getElementById('e1').innerHTML = ""; // Insert the Employee payoff for a given wage and production level of 0.1
                document.getElementById('e2').innerHTML = ""; // Insert the Employee payoff for a given wage and production level of 0.2
                document.getElementById('e3').innerHTML = ""; // Insert the Employee payoff for a given wage and production level of 0.3
                document.getElementById('e4').innerHTML = ""; // Insert the Employee payoff for a given wage and production level of 0.4
                document.getElementById('e5').innerHTML = ""; // Insert the Employee payoff for a given wage and production level of 0.5
                document.getElementById('e6').innerHTML = ""; // Insert the Employee payoff for a given wage and production level of 0.6
                document.getElementById('e7').innerHTML = ""; // Insert the Employee payoff for a given wage and production level of 0.7
                document.getElementById('e8').innerHTML = ""; // Insert the Employee payoff for a given wage and production level of 0.8
                document.getElementById('e9').innerHTML = ""; // Insert the Employee payoff for a given wage and production level of 0.9
                document.getElementById('e10').innerHTML = ""; // Insert the Employee payoff for a given wage and production level of 1.0
                alert(data['message']); // Display an error message to the participant, could be due to non-integer or out of range.
            }
            else if (data['type'] == 'possible_payoffs') {
                document.getElementById('f1').innerHTML = data['f1']; // Insert the Firm payoff for a given wage and production level of 0.1
                document.getElementById('f2').innerHTML = data['f2']; // Insert the Firm payoff for a given wage and production level of 0.2
                document.getElementById('f3').innerHTML = data['f3']; // Insert the Firm payoff for a given wage and production level of 0.3
                document.getElementById('f4').innerHTML = data['f4']; // Insert the Firm payoff for a given wage and production level of 0.4
                document.getElementById('f5').innerHTML = data['f5']; // Insert the Firm payoff for a given wage and production level of 0.5
                document.getElementById('f6').innerHTML = data['f6']; // Insert the Firm payoff for a given wage and production level of 0.6
                document.getElementById('f7').innerHTML = data['f7']; // Insert the Firm payoff for a given wage and production level of 0.7
                document.getElementById('f8').innerHTML = data['f8']; // Insert the Firm payoff for a given wage and production level of 0.8
                document.getElementById('f9').innerHTML = data['f9']; // Insert the Firm payoff for a given wage and production level of 0.9
                document.getElementById('f10').innerHTML = data['f10']; // Insert the Firm payoff for a given wage and production level of 1.0
                document.getElementById('e1').innerHTML = data['e1']; // Insert the Employee payoff for a given wage and production level of 0.1
                document.getElementById('e2').innerHTML = data['e2']; // Insert the Employee payoff for a given wage and production level of 0.2
                document.getElementById('e3').innerHTML = data['e3']; // Insert the Employee payoff for a given wage and production level of 0.3
                document.getElementById('e4').innerHTML = data['e4']; // Insert the Employee payoff for a given wage and production level of 0.4
                document.getElementById('e5').innerHTML = data['e5']; // Insert the Employee payoff for a given wage and production level of 0.5
                document.getElementById('e6').innerHTML = data['e6']; // Insert the Employee payoff for a given wage and production level of 0.6
                document.getElementById('e7').innerHTML = data['e7']; // Insert the Employee payoff for a given wage and production level of 0.7
                document.getElementById('e8').innerHTML = data['e8']; // Insert the Employee payoff for a given wage and production level of 0.8
                document.getElementById('e9').innerHTML = data['e9']; // Insert the Employee payoff for a given wage and production level of 0.9
                document.getElementById('e10').innerHTML = data['e10']; // Insert the Employee payoff for a given wage and production level of 1.0
            }
        };
    </script>

{{ endblock }}