{{ block title }}
Spiel {{GameNumber}}/2: Runde {{round_num}}/5
{{ endblock }}
{{ block content }}

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

{{if round_num == 1}}
Bisher wurden noch keine Spiele gespielt. Die Tabelle ist dementsprechend noch nicht gefüllt.<br>
{{if player.id_in_group == 2}} <b>Bilden Sie eine Strategie über die fünf Spielrunden!</b> <br>
{{endif}}
{{endif}}

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

<h4>{{if player.id_in_group == 1}}Spielergebnisse vergangener Entrants {{else}}Ihre bisherigen Spielergebnisse {{endif}}</h4>
<style>


    .meine-tabelle{
        border-collapse: collapse;
        width: 100%;
    }

    .meine-tabelle th, .meine-tabelle td {
        border: none;
        padding: 10px;
    }

    .meine-tabelle tr:first-child {
        border-top: 2px solid black; /* Eine horizontale Linie ganz oben */
    }

    .meine-tabelle tr:nth-child(1) {
        border-bottom: 2px solid black; /* Eine horizontale Linie an zweitoberster Position */
    }

    .meine-tabelle tr:last-child {
        border-bottom: 2px solid black; /* Eine horizontale Linie ganz unten */
    }

    /* Spezifischer Stil für die Tabelle mit der Klasse "meine-tabelle" */
</style>

<table class="meine-tabelle">
     <tr align="center">
         <td colspan="5"><b>{{if player.id_in_group == 1}}Spieldaten vergangener Entrants mit dem Monopolisten{{else}}Ihre bisherigen Spieldaten als Monopolist{{endif}}</b></td>
     </tr>
      <tr>
          <th>Runde</th>
          <th>{{if player.id_in_group == 1}}Auszahlung Entrant{{else}}Ihre bisherigen Auszahlungen{{endif}}</th>
          <th>Ist der Entrant in den Markt eingetreten?</th>
          <th>{{if player.id_in_group == 1}}Anteil Strategie Erschweren gesamtes Spiel{{else}}Ihr Anteil Strategie Erschweren gesamtes Spiel{{endif}}</th>
          <th>{{if player.id_in_group == 1}}Anteil Strategie Erschweren erste 60s{{else}}Ihr Anteil Strategie Erschweren erste 60s{{endif}}</th>
      </tr>
     <tr>
          <td>1</td>
          <td>{{if player.id_in_group == 1}}{{display_ent_payoff.1}}{{else}}{{display_inc_payoff.1}}{{endif}}</td>
          <td>{{display_proportion_marketentry.1}}</td>
         <td>{{display_proportion_fight.1}} </td>
          <td>{{display_proportion_fight_60s.1}}</td>

      </tr>
           <tr>
          <td>2</td>
          <td>{{if player.id_in_group == 1}}{{display_ent_payoff.2}}{{else}}{{display_inc_payoff.2}}{{endif}}</td>
               <td>{{display_proportion_marketentry.2}}</td>
          <td>{{display_proportion_fight.2}} </td>
           <td>{{display_proportion_fight_60s.2}} </td>

      </tr>
        <tr>
          <td>3</td>
          <td>{{if player.id_in_group == 1}}{{display_ent_payoff.3}}{{else}}{{display_inc_payoff.3}}{{endif}}</td>
          <td>{{display_proportion_marketentry.3}}</td>
          <td>{{display_proportion_fight.3}}</td>
          <td>{{display_proportion_fight_60s.3}} </td>

      </tr>
            <tr>
          <td>4</td>
          <td>{{if player.id_in_group == 1}}{{display_ent_payoff.4}}{{else}}{{display_inc_payoff.4}}{{endif}}</td>
          <td>{{display_proportion_marketentry.4}}</td>
          <td>{{display_proportion_fight.4}}</td>
          <td>{{display_proportion_fight_60s.4}} </td>

      </tr>
 </table>

<br>
Um in Runde {{round_num}} zu starten, wählen Sie Ihre initiale Strategie aus. Ihre Strategie können Sie während
Phase 1 jederzeit ändern. <br><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> 
    <style>
        th, td {
            border: 1px solid black;
        }
    </style>
 <table id="table_i" cellpadding=12>
      <tr align="center" >
          <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>



<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>
<!--
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);


      function drawChart() {

        var data = google.visualization.arrayToDataTable([
          ['Strategie', 'Anteil'],
          ['Investieren',     document.getElementById("ent_payoff.1").innerText],
          ['Nicht Investieren',    1],
        ]);

        var options = {
          title: ''
        };
        var chart = new google.visualization.PieChart(document.getElementById('piechart'));

        chart.draw(data, options);
      }
    </script>
-->
{{next_button}}
{{endblock}}