{{ block title }}
Spiel {{GameNumber}}/2: Proberunde
{{ endblock }}
{{ block content }}

<h4 id="title"></h4>

Um in Phase 1 zu starten, wählst du deine initiale Strategie aus. Deine Strategie kannst du während
Phase 1 jederzeit ändern. <br>
Dir wurde folgende Rolle zugeteilt:

<!--<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}}

    <b>Du bist in der Rolle des Entrants</b><br><br>
    <h4>Bitte wähle deine initiale Strategie:</h4> <br><br>
    <style>
        th, td {
            border: 1px solid black;
        }
    </style>
     <table cellpadding=12>

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

      <tr width="40%">
        <th></th>
        <td>
            <label for="dulden">Investment Dulden</label>
        </td>
        <td>
            <label for="fight">Investment Erschweren</label></td>
        </td>
      </tr>

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

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

<!--Eingabe Button Entrant inkl. Text-->
<input type="button" hidden class="button" value="Eingabe" id="button_ent" onclick="button_sendAction_e()">
<p id="wait_e" style="visibility: hidden">Warte auf Entrant</p>

{{else}}

    <b>Du bist in der Rolle des Monopolisten</b><br><br>
    <h4>Bitte wähle deine initiale Strategie:</h4> <br><br>
    <style>
        th, td {
            border: 1px solid black;
        }
    </style>
     <table cellpadding=12>

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

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

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

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

<!--Eingabe Button Incumbent-->
<input type="button" hidden class="button" value="Eingabe" id="button_inc" onclick="button_sendAction_i()">
<p id="wait_i" style="visibility: hidden">Warte auf Monopolist</p>
{{endif}}
<br>


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

    .button{
        padding:0.3em 1.2em;
        margin:0 0.3em 0.3em 0;
        box-sizing: border-box;
        text-decoration:none;
        font-family:'Roboto',sans-serif;
        font-weight:300;
        color:#FFFFFF;
        background-color:gray;
        text-align:center;
        transition: all 0.2s;
}
    .button:hover{
        background-color:black;
        }


</style>

<br><br>

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

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

    // Function of incumbent, activated if radio Button is clicked
    function sendAction_i() {
        document.getElementById('button_inc').removeAttribute("hidden");
        $('.otree-btn-next').show();
    }

    // Function of entrant, activated if radio Button is clicked
    function sendAction_e() {
        document.getElementById('button_ent').removeAttribute("hidden")
        //document.getElementById("myP").style.visibility = "hidden";
        $('.otree-btn-next').show();
    }

    // Function to run if incumbent clicks on button
    function button_sendAction_i() {
        if(document.getElementById('inc_tolerate').checked) {
            liveSend("TOLERATE")
        }
        else{
            liveSend("Fight")
        }

        //Info to player, disable radio button and hide "Eingabe" button
        document.getElementById("inc_tolerate").disabled = true;
        document.getElementById("inc_fight").disabled = true;
        document.getElementById("wait_i").style.visibility = "visible";
        document.getElementById('button_inc').style.visibility = 'hidden'
    }

    // Function to run if entrant clicks on button
        function button_sendAction_e() {
        if(document.getElementById('ent_in').checked) {
            liveSend("IN")
        }
        else{
            liveSend("OUT")
        }

        //Info to player, disable radio button and hide "Eingabe" button
        document.getElementById("wait_e").style.visibility = "visible";
        document.getElementById("ent_in").disabled = true;
        document.getElementById("ent_out").disabled = true;
        document.getElementById('button_ent').style.visibility = 'hidden'
    }

</script>

{{next_button}}
{{ endblock }}