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

{{ block styles }}
<style>
    .otree-title {
        font-size: 45px;
        text-align: center;
        text-decoration: underline;
    }

     .main_Container{
        display: flex;
        flex-direction: column;
        //align-items: stretch;;
        margin: 25px;
    }

    /* Create two equal columns that floats next to each other */
    .main_Column {
      float: left;
      //width: 50%;
      padding: 10px;
      //height: 550px;
    }
    .main_Column.left{
        width: 60%;
    }
    .main_Column.right{
        width: 40%;
    }

    .main_Row{
        float: top;
        padding: 10px;
    }
    .main_Row.up{
        height: 90%;
    }
    .main_Row.down{
        height: 10%;
    }
    /* Clear floats after the columns */
    .main_Row:after {
      content: "";
      display: table;
      clear: both;
    }

    .status_table, th, td {
      border: 2px solid black;
    }
    .status_table td {
        padding-top: 20px;
        padding-bottom: 20px;
        text-align: center;
    }
    .status_table th {
        width: 13%;
        padding-top: 20px;
        padding-bottom: 20px;
        text-align: center;
        font-weight: bold;
    }
    .status_table{
        position: relative;
        top: 60px;
        left: 60px;
    }

     .btn{
         display: inline-block;
         margin: auto;
         width: 100%;
         padding: 10px;

    }
     .button {
         background-color: #4CAF50; // Green
         border-color: white;
         color: white;
         padding: 20px;
         text-align: center;
         text-decoration: none;
         font-size: 20px;
         margin: 4px 30px;
         cursor: pointer;
         border-radius: 8px;
     }
</style>
{{ endblock }}

{{ block content }}
<!--<link rel = "stylesheet" href="Intro.css">-->

<div class = "main_Container">
    <div class = "main_Row up">
        <div class = "main_Column left">

        <p style="font-size:38px; text-align:center;">Your Value: {{player.value}} points</p>

        <p style="font-size:28px; text-align:left; text-indent: 1em;">The starting price of the auction is going to be 20.</p>

        <p style="font-size:28px; text-align:left;">
        <br>Please decide whether you want to participate in this auction or not.<br>
        <br>Once your decision is ready, please click one of the buttons below.<br>
        </p>
        </div>

        <div class = "main_Column right">
            <table class = "status_table">
                <tr>
                    <th>PARTICIPANT</th>         <th>STATUS</th>
                </tr>
                <tr>
                    <td id = 'ALabel'>BIDDER A</td>         <td id = "state1"> ACTIVE </td>
                </tr>
                <tr>
                    <td id = 'BLabel'>BIDDER B</td>     <td id = 'state2'> ACTIVE </td>
                </tr>
                <tr>
                    <td id = 'CLabel'>BIDDER C</td>     <td id = 'state3'> ACTIVE </td>
                </tr>
                <tr>
                    <td id = 'DLabel'>BIDDER D</td>     <td id = 'state4'> ACTIVE </td>
                </tr>
            </table>
        </div>
    </div>

    <div class="main_Row down">
        <div class="btn">
            <button class="button button2" type = "button" id = "optout" onclick = "SendLiveQuit()">DON'T PARTICIPATE</button>
            <button class="button button1">PARTICIPATE</button>
        </div>
    </div>

    </div>

{{ endblock }}

{{ block scripts }}
<script>
    let pid= {{ player.id_in_group}};
    let payrounds = [js_vars.P1_payround,js_vars.P2_payround,js_vars.P3_payround,js_vars.P4_payround];
    let statuses = [js_vars.P1_status,js_vars.P2_status,js_vars.P3_status,js_vars.P4_status];
    //let remaining_players = statuses.reduce((a, b) => a + b, 0);


    function new_setTable(){
        for (var i = 1; i <= 5; i++){
            tr = $('.status_table tr').eq(i);
            text = tr.find('td').eq(0).text();
            td1= tr.find('td').eq(0);
            td2= tr.find('td').eq(1);
            if(i==pid){
                td1.html(text+"<b> (YOU)</b>");
            }
            else{
                payrounds[i-1]?td1.css('background-color', '#ffd700'):td1.css('background-color', 'white');
                statuses[i-1]?td2.css('background-color', 'white'):td2.text("INACTIVE").css('background-color', '#696969');
            }
        }
    }

    new_setTable()

    function liveRecv(data){
        let outter_id = data["opt-outer"];

        if (js_vars.player_id === outter_id){
            document.getElementById('form').submit();
        }

        $('.status_table tr').eq(outter_id).find('td').eq(1).text("INACTIVE").css('background-color', '#696969');
    }

    function SendLiveQuit(){
        liveSend({'msg':"I quit!"});
    }
</script>

{{ endblock }}