{{ block title }}
Spiel {{GameNumber}}/2: Proberunde
{{ endblock }}
{{ block content }}
<h4 id="title"></h4>

Um in Phase 1 zu starten, wählen Sie Ihre initiale Strategie aus. Ihre Strategie können Sie während
Phase 1 jederzeit ändern. <br><br>

<!--<input type="radio" id="ein" onclick ="sendRadio_in(value)" name="entrant" value="10">
<label for="ein">Markteintritt</label><br>
<input type="radio" id="aus" onclick="sendRadio_out(value)" name="entrant" value="15">
<label for="aus">Kein Markteintritt</label><br> -->



{{if player.id_in_group == 1}}

    <h4>Ihre initiale Strategie:</h4>
    <style>
        th, td {
            border: 1px solid black;
        }
    </style>
 <table id="table_e" cellpadding=12>

      <tr align="center" >
          <th>Entrant</th>
          <th colspan="2">Monopolist</th>
      </tr>

      <tr>
        <th style="width:200px"></th>
        <td>
            <label for="dulden">Investment Dulden</label>
        </td>
        <td>
            <label for="fight">Investment Erschweren</label></td>
        </td>
      </tr>

    <tr id="investieren">
          <td>
              <input type="radio" id="ent_in" onclick ="sendAction_e(value)" name="ent"  value="IN">
              <label for="ein">Investieren</label>
          </td>
          <td align="center"><p id="tolerate_in" class="action_display">(<b>{{Constants.payout_entrant_invest_tolerate_1}}</b>,{{Constants.payout_incumbent_invest_tolerate_1}})</p></td>
          <td align="center"><p id="fight_in" class="action_display">(<b>{{Constants.payout_entrant_invest_fight_1}}</b>,{{Constants.payout_incumbent_invest_fight_1}})</p></td>
      </tr>

    <tr id="Ninvestieren">
          <td>
              <input type="radio" id="ent_out" onclick="sendAction_e(value)" name="ent"  value="OUT">
              <label for="aus">Nicht Investieren</label></td>
          <td align="center"><p id="tolerate_out" class="action_display">(<b>{{Constants.payout_entrant_ninvest_tolerate_1}}</b>,{{Constants.payout_incumbent_ninvest_tolerate_1}})</p></td>
          <td align="center"><p id="fight_out" class="action_display">(<b>{{Constants.payout_entrant_ninvest_fight_1}}</b>,{{Constants.payout_incumbent_ninvest_fight_1}})</p></td>
      </tr>
    </table>

{{else}}

    <h4>Ihre initiale Strategie:</h4> <br>
    <style>
        th, td {
            border: 1px solid black;
        }
    </style>
 <table id="table_i" cellpadding=12>

      <tr>
          <th>Entrant</th>
          <th colspan="2">Monopolist</th>
      </tr>

      <tr>
        <th></th>
        <td style="width:200px">
            <input type="radio" id="inc_tolerate" onclick ="sendAction_i(value)" name="incumbent"  value="TOLERATE">
            <label for="dulden">Investment Dulden</label>
        </td>
        <td style="width:230px">
            <input type="radio" id="inc_fight" onclick="sendAction_i(value)" name="incumbent"  value="FIGHT">
            <label for="fight">Investment Erschweren</label></td>
        </td>
      </tr>

      <tr>
          <td style="width:30%">
              <label for="ein">Investieren</label>
          </td>
          <td align="center"><p id="tolerate_in" class="action_display">({{Constants.payout_entrant_invest_tolerate_1}},<b>{{Constants.payout_incumbent_invest_tolerate_1}}</b>)</p></td>
          <td align="center"><p id="fight_in" class="action_display">({{Constants.payout_entrant_invest_fight_1}},<b>{{Constants.payout_incumbent_invest_fight_1}}</b>)</p></td>
      </tr>

      <tr>
          <td>
              <label for="aus">Nicht Investieren</label></td>
          <td align="center"><p id="tolerate_out" class="action_display">({{Constants.payout_entrant_ninvest_tolerate_1}},<b>{{Constants.payout_incumbent_ninvest_tolerate_1}}</b>)</p></td>
          <td align="center"><p id="fight_out" class="action_display">({{Constants.payout_entrant_ninvest_fight_1}},<b>{{Constants.payout_incumbent_ninvest_fight_1}}</b>)</p></td>
      </tr>
    </table>

{{endif}}
<br>

<style>
    .otree-btn-next{
        display: none;
    }
</style>

<br><br>

<p id='help'></p>

<script>
    let title = document.getElementById('title');
    let help = document.getElementById('help');

    function sendAction_i(value) {
         console.log('liveRecv', value)
         liveSend(value);
         $('.otree-btn-next').show();

         //Make cells bold
        if (value == "FIGHT"){
            //Bold
            console.log('Strategy changed')
            document.getElementById("table_i").rows[1].cells[2].style.backgroundColor = '#E0FFFF';
            document.getElementById("table_i").rows[2].cells[2].style.backgroundColor = "#E0FFFF";
            document.getElementById("table_i").rows[3].cells[2].style.backgroundColor = "#E0FFFF";

            // Light
            document.getElementById("table_i").rows[1].cells[1].style.backgroundColor = "#FFFFFF";
            document.getElementById("table_i").rows[2].cells[1].style.backgroundColor = "#FFFFFF";
            document.getElementById("table_i").rows[3].cells[1].style.backgroundColor = "#FFFFFF";
            }

        else{
            //Bold
            document.getElementById("table_i").rows[1].cells[1].style.backgroundColor = "#E0FFFF";
            document.getElementById("table_i").rows[2].cells[1].style.backgroundColor = "#E0FFFF";
            document.getElementById("table_i").rows[3].cells[1].style.backgroundColor = "#E0FFFF";

            // Light
            document.getElementById("table_i").rows[1].cells[2].style.backgroundColor = "#FFFFFF";
            document.getElementById("table_i").rows[2].cells[2].style.backgroundColor = "#FFFFFF";
            document.getElementById("table_i").rows[3].cells[2].style.backgroundColor = "#FFFFFF";
            }
        }

    function sendAction_e(value) {
        console.log('liveRecv', value)
         liveSend(value);
        $('.otree-btn-next').show();

        // Make cells bold
        if (value == "IN"){
            document.getElementById("investieren").style.backgroundColor = "#E0FFFF";
            document.getElementById("Ninvestieren").style.backgroundColor = "#FFFFFF";
        }
        else{
            document.getElementById("investieren").style.backgroundColor = "#FFFFFF";
            document.getElementById("Ninvestieren").style.backgroundColor = "#E0FFFF";
        }
    }

</script>

{{next_button}}
{{ endblock }}