{{ extends "global/Page.html" }}

{{ block scripts }}
    <script>
            document.getElementById("div1_1").style.display = "block";
            document.getElementById("div1_2").style.display = "none";
            document.getElementById("div2_1").style.display = "none";
            document.getElementById("div2_2").style.display = "none";
            document.getElementById("div3_1").style.display = "none";
            document.getElementById("div3_2").style.display = "none";
        function OpenClose11(){
            document.getElementById("div1_1").style.display = "block";
            document.getElementById("div1_2").style.display = "none";
            document.getElementById("div2_1").style.display = "none";
            document.getElementById("div2_2").style.display = "none";
            document.getElementById("div3_1").style.display = "none";
            document.getElementById("div3_2").style.display = "none";
        }
        function OpenClose12(){
            document.getElementById("div1_1").style.display = "none";
            document.getElementById("div1_2").style.display = "block";
            document.getElementById("div2_1").style.display = "none";
            document.getElementById("div2_2").style.display = "none";
            document.getElementById("div3_1").style.display = "none";
            document.getElementById("div3_2").style.display = "none";
        }
        function OpenClose21(){
            document.getElementById("div1_1").style.display = "none";
            document.getElementById("div1_2").style.display = "none";
            document.getElementById("div2_1").style.display = "block";
            document.getElementById("div2_2").style.display = "none";
            document.getElementById("div3_1").style.display = "none";
            document.getElementById("div3_2").style.display = "none";
        }
        function OpenClose22(){
            document.getElementById("div1_1").style.display = "none";
            document.getElementById("div2_1").style.display = "none";
            document.getElementById("div2_2").style.display = "block";
            document.getElementById("div3_1").style.display = "none";
            document.getElementById("div3_2").style.display = "none";
        }
        function OpenClose31(){
            document.getElementById("div1_1").style.display = "none";
            document.getElementById("div2_1").style.display = "none";
            document.getElementById("div2_2").style.display = "none";
            document.getElementById("div3_1").style.display = "block";
            document.getElementById("div3_2").style.display = "none";
        }
        function OpenClose32(){
            document.getElementById("div1_1").style.display = "none";
            document.getElementById("div2_1").style.display = "none";
            document.getElementById("div2_2").style.display = "none";
            document.getElementById("div3_1").style.display = "none";
            document.getElementById("div3_2").style.display = "block";
        }
    </script>
{{ endblock }}

{{ block content }}
    <style id="thetablestyle">
        table{
            font-size: 1em !important;
            width: auto;
             float:right;
        }
        th{
            width: auto;
        }
    </style>
    <style id="others">
        .all{
                margin-left:0px;
                margin-right:0px;
            }
        .center {
                text-align: center;
        }
    </style>

    <div class ="all">

    <!-- Distribution 1 -->

            <!-- Part 1: Text and Graph -->
            <div id="div1_1" align="center" style ="height: 100vh;">
                    <h1>Ihre Auszahlung in Verfahren "{{ C.TOKEN_ADD_1D_NAME }}" war:</h1>
                    <br><br>

                    <!-- Header 1  -->
                     <div class="row" style ="height: 60px !important;">

                            <!-- Header Text -->
                            <div class="col-6 A_roundandtext"></div>

                            <!-- Header Graph  -->
                            <div class="col-5 B"><h2>Einkommen pro Runde</h2></div>

                            <!-- Empty col -->
                            <div class = "col-lg-1 hidden-md"></div>
                     </div>

                    <!-- Text + Graph -->
                    <div class="row">

                             <!-- Text -->
                            <div class="col-6 A_roundandtext">
                                        <table>
                                            <tr>
                                                <th class = "lefttable">Ihr Einkommen pro Runde:</th>
                                                <th>{{ player.StartTokenPT|to2 }}&nbsp;Token </th>
                                            </tr>
                                            <tr style="border-bottom: 1px solid #cdd0d4;">
                                                <th class = "lefttable">Ihr Beitrag in den gemeinsamen Topf pro Runde:</th>
                                                <th>-{{ player.Taxes|to2 }}&nbsp;Token </th>
                                            </tr>
                                            <tr>
                                                <th class = "lefttable">Ihr Einkommen nach Abzug Ihres Beitrages:</th>
                                                <th>{{ player.StartToken|to2 }}&nbsp;Token </th>
                                            </tr>
                                            <tr style="border-bottom: 1px solid #cdd0d4;">
                                                <th class = "lefttable">Ihre Auszahlung aus dem gemeinsamen Topf pro Runde:</th>
                                                <th>{{ player.TokenAdd_1d|to2 }}&nbsp;Token</th>
                                            </tr>
                                            <tr >
                                                <th class = "lefttable">Ihr Gesamteinkommen pro Runde:</th>
                                                <th>{{ player.SumRoundIncome_1d|to2 }}&nbsp;Token</th>
                                            </tr>
                                            <tr style="border-bottom: 1px solid #cdd0d4;"    >
                                                <th class = "lefttable">Ihr Konsum pro Runde:</th>
                                                <th>-{{ player.Consumption_1d|to2 }}&nbsp;Token</th>
                                            </tr>
                                            <tr >
                                                <th class = "lefttable">{{ if player.Wealth_1d_1R > 0 }}
                                                Ihr Vermögen in jeder Runde nach Konsum von {{ player.Consumption_1d|to2 }}&nbsp;Token:
                                                {{ else }}
                                                Ihre Schulden in jeder Runde nach Konsum von {{ player.Consumption_1d|to2 }}&nbsp;Token:
                                                {{ endif }}
                                                </th>
                                                <th>{{ player.Wealth_1d_1R|to2 }}&nbsp;Token</th>
                                            </tr>
                                            <tr>
                                                <th class = "lefttable">{{ if player.Wealth_1d_1R > 0 }}
                                                    Ihr Vermögen nach 5 Runden:
                                                    {{ else }}
                                                    Ihre Schulden nach 5 Runden:
                                                    {{ endif }}
                                                </th>
                                                <th>{{ player.Wealth_1d_5R|to2 }}&nbsp;Token</th>
                                            </tr>
                                        </table>
                                    <br><br>
                            </div>

                            <!-- Graph  -->
                            <div class = "col-5 B">
                                <div id="chartd1_1" class="ChartContainerFor2">
                                        {{ include 'acceptance/charts/Acc_Dis1_1.html' }}
                                </div>
                            </div>

                            <!-- Empty col -->
                            <div class = "col-lg-1 hidden-md"></div>
                    </div>

                    <!-- Verweis auf nächste Seite mit Vermögensentwicklung (always the same) -->
                        <div style = "text-align: center;">
                                <br><br>
                                Auf der nächsten Seite sehen Sie, wie sich Ihr Vermögen und das Vermögen Ihrer Gruppenmitglieder über die 5 Runden entwickelt.
                            </div>

                    <!-- Button-->
                        <!-- Make "buttonclassfixedposition" for lab experiments and "buttonclassonline" for online experiments -->
                        <div class ="buttonclassonline">
                                <div class="row">
                                    <div class = "col-10"></div>
                                    <div class = "col-1"></div>
                                    <div class = "col-1"><button class ="otree-btn-next btn btn-primary" type="button" onclick="OpenClose12()">Weiter</button></div>
                                </div>
                        </div>
            </div>

            <!-- Part 2: Graphs one round and five rounds -->
            <div id  = "div1_2" align="center" style ="height: 100vh;">
                <h1>Ihre Auszahlung in Verfahren "{{ C.TOKEN_ADD_1D_NAME }}" war:</h1>
                <br><br>

                <!-- Header 2 (always the same) New -->
                         <div class="row" style ="height: 60px !important;">
                                <!-- Empty col -->
                                <div class = "col-lg-1 hidden-md"></div>

                                 <!-- Header Runde 1 -->
                                <div class="col-5 A center">
                                    <h2>Vermögen nach Runde 1</h2>
                                </div>

                                <!-- Header Runde 5  -->
                                <div class="col-5 B">
                                    <h2>Vermögen nach Runde 5</h2>
                                </div>

                                <!-- Empty col -->
                                <div class = "col-lg-1 hidden-md"></div>
                        </div>

                <!-- Graphs -->
                         <div class="row">
                                <!-- Empty col -->
                                <div class = "col-lg-1 hidden-md"></div>

                                 <!-- Chart Round 1 -->
                                <div id="chartd1_3" class="col-5 A ChartContainerFor2" >
                                        {{ include 'acceptance/charts/Acc_Dis1_3.html' }}
                                </div>

                                <!-- Chart Round 5 -->
                                <div id="chartd1_4" class="col-5 B ChartContainerFor2">
                                        {{ include 'acceptance/charts/Acc_Dis1_4.html' }}
                                </div>

                                <!-- Empty col -->
                                <div class = "col-lg-1 hidden-md"></div>
                        </div>

                <!-- Button-->
                    <!-- Make "buttonclassfixedposition" for lab experiments and "buttonclassonline" for online experiments -->
                    <div class ="buttonclassonline">
                        <div class="row">
                            <div class = "col-10"></div>
                            <div class = "col-1"><button class ="otree-btn-next btn btn-primary" type="button" onclick="OpenClose11()">Zurück</button></div>
                            <div class = "col-1"><button class ="otree-btn-next btn btn-primary" type="button" onclick="OpenClose21()">Weiter</button></div>
                        </div>
                    </div>
            </div>

    <!-- Distribution 2 -->

            <!-- Part 1: Text and Graph -->
            <div id="div2_1" align="center" style ="height: 100vh;">
                <h1>Ihre Auszahlung in Verfahren "{{ C.TOKEN_ADD_2D_NAME }}" wäre:</h1>
                <br><br>
                        <!-- Header 1 (always the same) New -->
                         <div class="row" style ="height: 60px !important;">

                                <!-- Header Text -->
                                <div class="col-6 A_roundandtext"></div>

                                <!-- Header Graph  -->
                                <div class="col-5 B"><h2>Einkommen pro Runde</h2></div>

                                <!-- Empty col -->
                                <div class = "col-lg-1 hidden-md"></div>
                        </div>

                        <!-- Text + Graph -->
                         <div class="row">

                                <!-- Text -->
                                <div class="col-6 A_roundandtext">
                                        <table>
                                            <tr>
                                                <th class = "lefttable">Ihr Einkommen pro Runde:</th>
                                                <th>{{ player.StartTokenPT|to2 }}&nbsp;Token </th>
                                            </tr>
                                            <tr style="border-bottom: 1px solid #cdd0d4;">
                                                <th class = "lefttable">Ihr Beitrag in den gemeinsamen Topf pro Runde:</th>
                                                <th>-{{ player.Taxes|to2 }}&nbsp;Token </th>
                                            </tr>
                                            <tr>
                                                <th class = "lefttable">Ihr Einkommen nach Abzug Ihres Beitrages:</th>
                                                <th>{{ player.StartToken|to2 }}&nbsp;Token </th>
                                            </tr>
                                            <tr style="border-bottom: 1px solid #cdd0d4;">
                                                <th class = "lefttable">Ihre Auszahlung aus dem gemeinsamen Topf pro Runde:</th>
                                                <th>{{ player.TokenAdd_2d|to2 }}&nbsp;Token</th>
                                            </tr>
                                            <tr >
                                                <th class = "lefttable">Ihr Gesamteinkommen pro Runde:</th>
                                                <th>{{ player.SumRoundIncome_2d|to2 }}&nbsp;Token</th>
                                            </tr>
                                            <tr style="border-bottom: 1px solid #cdd0d4;"    >
                                                <th class = "lefttable">Ihr Konsum pro Runde:</th>
                                                <th>-{{ player.Consumption_2d|to2 }}&nbsp;Token</th>
                                            </tr>
                                            <tr >
                                                <th class = "lefttable">{{ if player.Wealth_2d_1R > 0 }}
                                                Ihr Vermögen in jeder Runde nach Konsum von {{ player.Consumption_2d|to2 }}&nbsp;Token:
                                                {{ else }}
                                                Ihre Schulden in jeder Runde nach Konsum von {{ player.Consumption_2d|to2 }}&nbsp;Token:
                                                {{ endif }}
                                                </th>
                                                <th>{{ player.Wealth_2d_1R|to2 }}&nbsp;Token</th>
                                            </tr>
                                            <tr>
                                                <th class = "lefttable">{{ if player.Wealth_2d_1R > 0 }}
                                                    Ihr Vermögen nach 5 Runden:
                                                    {{ else }}
                                                    Ihre Schulden nach 5 Runden:
                                                    {{ endif }}
                                                </th>
                                                <th>{{ player.Wealth_2d_5R|to2 }}&nbsp;Token</th>
                                            </tr>
                                        </table>
                                        <br><br>
                                </div>


                                <!-- Graph  -->
                                <div id="chartd2_1" class="col-5 B ChartContainerFor2">
                                    {{ include 'acceptance/charts/Acc_Dis2_1.html' }}
                                </div>

                                <!-- Empty col -->
                                <div class = "col-lg-1 hidden-md"></div>
                        </div>

                <!-- Verweis auf nächste Seite mit Vermögensentwicklung (always the same) -->
                        <div style = "text-align: center;">
                                <br><br>
                                Auf der nächsten Seite sehen Sie, wie sich Ihr Vermögen und das Vermögen Ihrer Gruppenmitglieder über die 5 Runden entwickelt.
                        </div>

                <!-- Button-->
                        <!-- Make "buttonclassfixedposition" for lab experiments and "buttonclassonline" for online experiments -->
                        <div class ="buttonclassonline">
                            <div class="row">
                                <div class = "col-10"></div>
                                <div class = "col-1"><button class ="otree-btn-next btn btn-primary" type="button" onclick="OpenClose12()">Zurück</button></div>
                                <div class = "col-1"><button class ="otree-btn-next btn btn-primary" type="button" onclick="OpenClose22()">Weiter</button></div>
                            </div>
                        </div>
            </div>

            <!-- Part 2: Graphs one round and five rounds -->
            <div id="div2_2" align="center" style ="height: 100vh;">
                <h1>Ihre Auszahlung in Verfahren "{{ C.TOKEN_ADD_2D_NAME }}" wäre:</h1>
                <br><br>

                <!-- Header 2 (always the same) New -->
                     <div class="row" style ="height: 60px !important;">
                                <!-- Empty col -->
                                <div class = "col-lg-1 hidden-md"></div>

                                 <!-- Round 1 -->
                                <div class="col-5 A">
                                        <h2>Vermögen nach Runde 1</h2>
                                </div>

                                <!-- Round 5  -->
                                <div  class="col-5 B">
                                        <h2>Vermögen nach Runde 5</h2>
                                </div>

                                <!-- Empty col -->
                                <div class = "col-lg-1 hidden-md"></div>
                    </div>

                <!-- Graphs -->
                     <div class="row">
                                <!-- Empty col -->
                                <div class = "col-lg-1 hidden-md"></div>

                                 <!-- Round 1 -->
                                <div id="chartd2_3" class="col-5 A ChartContainerFor2">
                                        {{ include 'acceptance/charts/Acc_Dis2_3.html' }}
                                </div>

                                 <!-- Round 5 -->
                                <div id="chartd2_4" class="col-5 B ChartContainerFor2">
                                        {{ include 'acceptance/charts/Acc_Dis2_4.html' }}
                                </div>

                                <!-- Empty col -->
                                <div class = "col-lg-1 hidden-md"></div>
                    </div>

                <!-- Button-->
                    <!-- Make "buttonclassfixedposition" for lab experiments and "buttonclassonline" for online experiments -->
                    <div class ="buttonclassonline">
                        <div class="row">
                            <div class = "col-10"></div>
                            <div class = "col-1"><button class ="otree-btn-next btn btn-primary" type="button" onclick="OpenClose21()">Zurück</button></div>
                            <div class = "col-1"><button class ="otree-btn-next btn btn-primary" type="button" onclick="OpenClose31()">Weiter</button></div>
                        </div>
                    </div>
            </div>

    <!-- Distribution 3 -->

            <!-- Part 1 -->
            <div id="div3_1" align="center" style ="height: 100vh;">
                    <h1>Ihre Auszahlung in Verfahren "{{ C.TOKEN_ADD_3D_NAME }}" wäre:</h1>
                    <br><br>

                            <!-- Header 1 (always the same) New -->
                             <div class="row" style ="height: 60px !important;">

                                    <!-- Header Text -->
                                    <div class="col-6 A_roundandtext"></div>

                                    <!-- Header Graph  -->
                                    <div class="col-5 B"><h2>Einkommen pro Runde</h2></div>

                                    <!-- Empty col -->
                                    <div class = "col-lg-1 hidden-md"></div>

                            </div>

                            <!-- Text + Graph -->
                             <div class="row">

                                    <!-- Text -->
                                    <div class="col-6 A_roundandtext">
                                            <table>
                                                <tr>
                                                <th class = "lefttable">Ihr Einkommen pro Runde:</th>
                                                <th>{{ player.StartTokenPT|to2 }}&nbsp;Token </th>
                                                </tr>
                                                <tr style="border-bottom: 1px solid #cdd0d4;">

                                                <th class = "lefttable">Ihr Beitrag in den gemeinsamen Topf pro Runde:</th>
                                                <th>-{{ player.Taxes|to2 }}&nbsp;Token </th>
                                                </tr>
                                                <tr>

                                                <th class = "lefttable">Ihr Einkommen nach Abzug Ihres Beitrages:</th>
                                                <th>{{ player.StartToken|to2 }}&nbsp;Token </th>
                                                </tr>
                                                <tr style="border-bottom: 1px solid #cdd0d4;">

                                                <th class = "lefttable">Ihre Auszahlung aus dem gemeinsamen Topf pro Runde:</th>
                                                <th>{{ player.TokenAdd_3d|to2 }}&nbsp;Token</th>
                                                </tr>
                                                <tr>

                                                <th class = "lefttable">Ihr Gesamteinkommen pro Runde:</th>
                                                <th>{{ player.SumRoundIncome_3d|to2 }}&nbsp;Token</th>
                                                </tr>
                                                <tr style="border-bottom: 1px solid #cdd0d4;"    >

                                                <th class = "lefttable">Ihr Konsum pro Runde:</th>
                                                <th>-{{ player.Consumption_3d|to2 }}&nbsp;Token</th>
                                                </tr>
                                                <tr >
                                                <th class = "lefttable">{{ if player.Wealth_3d_1R > 0 }}
                                                Ihr Vermögen in jeder Runde nach Konsum von {{ player.Consumption_3d|to2 }}&nbsp;Token:
                                                {{ else }}
                                                Ihre Schulden in jeder Runde nach Konsum von {{ player.Consumption_3d|to2 }}&nbsp;Token:
                                                {{ endif }}
                                                </th>
                                                <th>{{ player.Wealth_3d_1R|to2 }}&nbsp;Token</th>
                                                </tr>
                                                <tr>
                                                <th class = "lefttable">{{ if player.Wealth_3d_1R > 0 }}
                                                Ihr Vermögen nach 5 Runden:
                                                {{ else }}
                                                Ihre Schulden nach 5 Runden:
                                                {{ endif }}
                                                </th>
                                                <th>{{ player.Wealth_3d_5R|to2 }}&nbsp;Token</th>
                                                </tr>
                                            </table>
                                            <br><br>
                                    </div>

                                    <!-- Graph  -->
                                    <div id="chartd3_1" class="col-5 B ChartContainerFor2">
                                        {{ include 'acceptance/charts/Acc_Dis3_1.html' }}
                                    </div>

                                    <!-- Empty col -->
                                    <div class = "col-lg-1 hidden-md"></div>
                            </div>

                    <!-- Verweis auf nächste Seite mit Vermögensentwicklung (always the same) -->
                            <div style = "text-align: center;">
                                    <br><br>
                                    Auf der nächsten Seite sehen Sie, wie sich Ihr Vermögen und das Vermögen Ihrer Gruppenmitglieder über die 5 Runden entwickelt.
                            </div>

                    <!-- Button-->
                            <!-- Make "buttonclassfixedposition" for lab experiments and "buttonclassonline" for online experiments -->
                            <div class ="buttonclassonline">
                                <div class="row">
                                    <div class = "col-10"></div>
                                    <div class = "col-1"><button class ="otree-btn-next btn btn-primary" type="button" onclick="OpenClose22()">Zurück</button></div>
                                    <div class = "col-1"><button class ="otree-btn-next btn btn-primary" type="button" onclick="OpenClose32()">Weiter</button></div>
                                </div>
                            </div>
            </div>

            <!-- Part 2 -->
            <div id="div3_2" align="center" style ="height: 100vh;">
                <h1>Ihre Auszahlung in Verfahren "{{ C.TOKEN_ADD_3D_NAME }}" wäre:</h1>
                <br><br>

                <!-- Header 2 (always the same) New -->
                     <div class="row" style ="height: 60px !important;">
                                    <!-- Empty col -->
                                    <div class = "col-lg-1 hidden-md"></div>

                                     <!-- Round 1 -->
                                    <div class="col-5 A" style = "margin-right: 15px;">
                                            <h2>Vermögen nach Runde 1</h2>
                                    </div>

                                    <!-- Round 5  -->
                                    <div  class="col-5 B">
                                            <h2>Vermögen nach Runde 5</h2>
                                    </div>

                                    <!-- Empty col -->
                                    <div class = "col-lg-1 hidden-md"></div>
                    </div>

                <!-- Graphs -->
                     <div class="row">
                        <div class = "col-lg-1 hidden-md"></div>
                        <div id="chartd3_3" class="col-5 A ChartContainerFor2" >
                            {{ include 'acceptance/charts/Acc_Dis3_3.html' }}
                        </div>
                        <div id="chartd3_4" class="col-5 B ChartContainerFor2">
                            {{ include 'acceptance/charts/Acc_Dis3_4.html' }}
                        </div>
                        <div class = "col-lg-1 hidden-md"></div>
                    </div>

                <!-- Button-->
                    <!-- Make "buttonclassfixedposition" for lab experiments and "buttonclassonline" for online experiments -->
                    <div class ="buttonclassonline">
                        <div class="row">
                            <div class = "col-9"></div>
                            <div class = "col-1"><button class ="otree-btn-next btn btn-primary" type="button" onclick="OpenClose31()">Zurück</button></div>
                            <div class = "col-2"><button class ="otree-btn-next btn btn-primary">Weiter zum Argument</button></div>
                        </div>
                    </div>
            </div>
    </div>



{{ endblock }}