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

{{ block scripts }}
    <script id="timer-chat_dis">
        // Create Variables
            var duration = {{ C.CHAT_TIME_ACK | json }}*60*1000;
            var start = {{ player.BVote_ChatStart | json }}*1000;
            console.log("Start ", start);
            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>

{{ endblock }}

{{ block content }}

    <style>
        /* oTree ELEMENTS */
            .otree-body {
                all: unset !important;
            }
            .page-header{
                display: none;
            }
            .otree-timer {
                display: none;
            }
            /*MY ELEMENTS*/
            .row {
                margin-right: 5px;
                margin-left: 5px;
            }
            .col-4 {
                min-height: 50%;
                border-style: none;
                font-size: 0.8em;
            }
            .chatrow{
                border-style: solid;
            }
            .otree-chat__messages{
                height: {{ C.CHAT_HEIGHT|json }}px !important;
            }
            .otree-chat{
                padding: 10px !important;
                border: 1px solid !important;;
            }

    </style>
    <div id="all" class = "all">
        <div  class="ChatPageContainer" style = "margin-top: 1.2em;">

        <!-- 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 -->
            <h1>Gruppendiskussion</h1><br><br>
            <div id="allowed" align = "center">
                {{ if session.vars.do_arguments_redistribution }}
                        Im letzten Schritt haben Sie gesehen, wie sich die anderen Gruppenmitglieder individuell entschieden haben
                        und welche Argumente sie vorgelegt haben.
                        <br><br>
                        Gibt es noch weitere Argumente für oder gegen "{{ C.TOKEN_ADD_1D_NAME }}"?
                        <br>
                        Diskutieren Sie mit Ihren Gruppenmitgliedern, ob das Verfahren anerkannt werden soll oder nicht anerkannt werden soll.
                        <br><br>
                        Geben Sie hierfür Ihre Argumente in das untere, blaue Feld ein und klicken Sie auf "Senden".
                        <br>
                        Nach dem Chat müssen Sie gemeinsam entscheiden.
                        {{ C.TokenAdd_1dArticle2 }} gilt nur dann als anerkannt, wenn alle <b>einstimmig</b> für die Anerkennung stimmen.
                        <br><br>
                 {{ else }}
                        Diskutieren Sie mit Ihren Gruppenmitgliedern, ob das Verfahren anerkannt werden soll oder nicht anerkannt werden soll.
                        <br>
                        Geben Sie hierfür Ihre Argumente in das untere, blaue Feld ein und klicken Sie auf "Senden".
                        <br>
                        Nach dem Chat müssen Sie gemeinsam entscheiden.
                        {{ C.TokenAdd_1dArticle2 }} gilt nur dann als anerkannt, wenn alle <b>einstimmig</b> für die Anerkennung stimmen.
                        <br><br>
                {{ endif }}


            </div>

        <!-- Argumente und Chat hier Höhe einstellen (im Chat dann auch noch mal)-->
            {{ if session.vars.do_arguments_redistribution }}
                <div class="row chatrow">
                <!-- Argumente der Player -->
                    <div class = "col-4 chatsideargs" style = "padding-top: 15px;">
                            {{ for p in group.get_players }}
                                    <b>Player {{ p.GroupRank }}:</b>&nbsp{{ p.YesNoArg_BVote }}
                                    <br><br>
                            {{ endfor }}
                    </div>

                <!--Chat -->
                    <div class = "col-8" id="ChatFenster">
                   {{ chat nickname=player.Nickname channel=player.group.Channel_Ack }}
                    </div>
                </div>
            {{ else }}
                <div class="row chatrow">
                <!--Chat -->
                    <div class = "col-12 ChatFenster">
                   {{ chat nickname=player.Nickname channel=player.group.Channel_Ack }}
                    </div>
                </div>
            {{ endif }}
        </div>
    </div>
    <div id ="ChatFensterErsatz"></div>


{{ endblock }}