{{ extends "rejection/WaitPage.html" }}

{{ block scripts }}
    <script id="timer-chat_dis_corr2">

        //Create Variables
            var duration = {{ C.CHAT_TIME_DISTRIBUTION_CORR | json }} * 60 * 1000;
            var start =  {{ player.Rej1corr_ChatStart | json }}*1000;
            var end = start + duration + 3000;
            var difference = (end-(new Date()).getTime()) / 1000 | 0;   //  "| 0; steht für keine kommazahlen"

        // Measure Time
             measureTime(difference, end, duration);

    </script>
    <script id = changeNickColor>
      $(document).ready(function () {
           colors = ["darkorange", "red", "green", "brown", "dimgray"];
           random = {{ participant.vars.randomnicknamecolors|json }};
           $('.otree-chat__messages').bind("DOMSubtreeModified", function () {
                    $("span.otree-chat__nickname:contains('1')").css("color", colors[random[0]]);
                    $("span.otree-chat__nickname:contains('2')").css("color", colors[random[1]]);
                    $("span.otree-chat__nickname:contains('3')").css("color", colors[random[2]]);
                    $("span.otree-chat__nickname:contains('4')").css("color", colors[random[3]]);
                    $("span.otree-chat__nickname:contains('5')").css("color", colors[random[4]]);
                    $("span.otree-chat__nickname:contains({{ player.GroupRank|json }})").css("color", "blue");
           });
      });
    </script>
    <script id="showBody">
      // Show content when everything is loaded.
          $(document).ready(function() {
            console.log("Show everything!");
            $("body").show();
          });
    </script>
{{ endblock }}

{{ block content }}
    <style>
        body {
            background-color: white !important;
            display: none;
        }

        /* oTree ELEMENTS */
        .otree-timer {
            display: none;  <!--Diesen Teil hier braucht man, weil sonst der neue Timer überlagert wird. -->
        }
        .otree-wait-page__body{
            display: none;
        }
        .otree-body {
            all: unset !important;
        }
        .container{   /*oTree container*/
            max-width: 90%;
        }
        .otree-wait-page {
           all: unset;
        }
        .page-header{
            display: none;
        }
        .card{ /* Der Textteil der Waitpage. Ist ein Unterteil von .container*/
            margin: auto;
            box-shadow: none;
            border: none;
            }
        .card-header{
            display: none;
        }
        .card-body{
            margin-top: 0px  !important;  /* Damit es gleich aussieht wie bei normal page */
            padding-top: 25px !important; /* Damit es gleich aussieht wie bei normal page */
        }
        .progress{
            display: none;
        }
        /*MY ELEMENTS*/
        .row {
            overflow: hidden;
            margin-right: 5px;
            margin-left: 5px;
            padding: 5px;
            border-style: solid;
        }
        .col-4 {
            min-height: 50%;
            border-style: none;
            font-size: 0.8em;
        }
        .col-8 {
            border-style: none;
        }
        .ArgAndChat{
            min-height: {{ C.CHAT_HEIGHT|json }}px;
        }
        .otree-chat__messages{
                height: {{ C.CHAT_HEIGHT|json }}px !important;
        }
        .assignments {
            margin: auto;  // center vertically
        }
    </style>


    <div id="all" class="ChatPageContainer" >
        <!-- Time -->
        <div class="Zeit">
            Verbleibende Zeit (in Sek.):
            <span id="minutes" style="color: red; "></span><span id="seconds" style="color: red; "></span>
         </div>
        <!-- Heading and explanation of site -->
        <div style="text-align:center" >
            <h1>Abstimmung über eine neue Verteilung der {{ C.TOKEN_ADD_TOTAL|to0 }}&nbsp;Token</h1><br>
            <div>
                Da weniger als 3 Personen in Ihrer Gruppe die gleiche Verteilung eingegeben haben,
                haben Sie nun {{ C.CHAT_TIME_DISTRIBUTION_CORRSEK }} Sekunden Zeit,
                sich gegebenenfalls noch einmal umzuentscheiden.
                <br><br>
                Zur Erinnerung: Konsumquote: 90%, Sparquote: 10%, Mindestkonsum: {{ C.NEEDS| to0 }}&nbsp;Token - pro Runde und Person.
                <br><br>
            </div>
        </div>
        <!-- Argumente und Chat-->

            {{ if session.vars.do_arguments_rejection }}
                <div class="row ArgAndChat">
                <!-- Argumente der Player -->
                    <div class = "col-4 chatsideargs" style = "padding-top: 15px;">
                        {{ for p in group.get_players }}
                            {{ if p.iTokenAddSuggestion_1 == -99 }}
                                <b>Player {{ p.GroupRank }} </b>(-/-/-/-/-): {{ p.Rej_Arg }}<br><br>
                            {{ else }}
                                 <b>Player {{ p.GroupRank }}</b>
                                ({{ p.iTokenAddSuggestion_1|to2 }}/{{ p.iTokenAddSuggestion_2|to2 }}/{{ p.iTokenAddSuggestion_3|to2 }}/{{ p.iTokenAddSuggestion_4|to2 }}/{{ p.iTokenAddSuggestion_5|to2 }}):
                                {{ p.Rej_Arg }}<br><br>
                            {{ endif }}
                        {{ endfor }}
                    </div>

                <!--Chat -->
                    <div class = "col-8" id="ChatFenster1">

                        <!-- CAUTION: Never leave spaces between arguments and their values! -->
                        {{ chat nickname=player.Nickname channel=group.Channel_DisProcedureCorr }}
                    </div>

                <!--Ersatztext Chatfenster-->
                    <div class = "col-8" id="ChatFensterErsatz1" style="margin:auto; text-align: center;">
                        <b>Bitte warten Sie, bis Ihre Gruppenmitglieder die Verteilung eingegeben haben!</b>
                    </div>
                </div>
            {{ else }}
                <div class="row ArgAndChat">
                <!--Chat -->
                    <div class = "col-12" id="ChatFenster2">
                        <!-- CAUTION: Never leave spaces between arguments and their values! -->
                        {{ chat nickname=player.Nickname channel=group.Channel_DisProcedureCorr }}
                    </div>

                <!--Ersatztext Chatfenster-->
                    <div class = "col-12" id="ChatFensterErsatz2" style="margin:auto; text-align: center;">
                        <b>Bitte warten Sie, bis Ihre Gruppenmitglieder die Verteilung eingegeben haben!</b>
                    </div>
                </div>
            {{ endif }}

        <!-- Container Token assignment -->
        <div id="DIS_Container">

            <!-- Container Token assignment heading -->
            <div class="HeadingEnter" >
                <b>Die von Ihnen gewählte Verteilung:<br></b>
                <span class = "starttokeninfo_indiscontainer">(In den Klammern sehen Sie das Startkapital der Player{{ if group.REDIS == 1 }} nach Abzug ihrer Beiträge) {{ else }}){{ endif }}</span>
                <br>
            </div>

            <!-- Container Verteilungsausgabe-->
            <div class="row">


                {{ for p in group.get_players }}
                <div class = "col-1">
                    Player {{ p.GroupRank|to0 }}<br>
                    <span class = "starttokeninfo_indiscontainer">({{ p.StartToken|to0 }}&nbsp;Token)</span>
                </div>
                <div class = "col-1 assignments">
                    {{ if p.GroupRank == 1 }}
                        {{ player.iTokenAddVoteFor_corr_1|to2 }}
                    {{ elif p.GroupRank == 2 }}
                        {{ player.iTokenAddVoteFor_corr_2|to2 }}
                    {{ elif p.GroupRank == 3 }}
                        {{ player.iTokenAddVoteFor_corr_3|to2 }}
                    {{ elif p.GroupRank == 4 }}
                        {{ player.iTokenAddVoteFor_corr_4|to2 }}
                    {{ elif p.GroupRank == 5 }}
                        {{ player.iTokenAddVoteFor_corr_5|to2 }}
                    {{ endif }}
                </div>
                {{ endfor }}
            </div>
        </div>


    </div>


{{ endblock }}