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

{{ block scripts }}

    <script id="autoSubmit">
        let autoSubmitted = false;
        let timer = $(".otree-timer");
        let timeLeftCounter = $('.otree-timer__time-left');
        let secondsTimerIsShown = {{ secondsTimerIsShown | json }};  // How many seconds is the timer shown?
        timeLeftCounter.on('update.countdown', function (event) {
            let remainingSeconds = event.offset.totalSeconds;
            if (remainingSeconds <= secondsTimerIsShown) {
                timer.show();
                $('.page-header').hide();
            } else  {
                timer.hide();
            }
            if (remainingSeconds === secondsTimerIsShown) {
                 $(".ui-dialog-content").dialog("close");
                 $("#alert-one-minute-left").dialog("open");
            } else if (remainingSeconds === 1) {
                autoSubmitted = true;  // Wird im folgenden Script benutzt, damit die Popups nicht aufgehen.
            }
        });
    </script>

    <script id="userSubmit">
        $(document).ready(function () {
            $("form").on("submit", function (event) {
                // Das kommt erst bei der String-Argumenteeingabe zu tragen.

                let argument = $("#id_AVote_AckArg").val();

                if (!autoSubmitted && !argument) {
                    // Case: No Argument given
                    $("#alertArg").dialog("open");
                    event.preventDefault();
                    event.stopPropagation();
                } else if (!autoSubmitted && argument.length < {{ C.ARG_MIN_LENGHT|json }}) {
                    // Case: Argument too short
                    $("#alertLongArg").dialog("open");
                    event.preventDefault();
                    event.stopPropagation();
                }
            });
        });
    </script>

    <script id="countCharacters">

        // Info about argument length
        document.getElementById('id_AVote_AckArg').onkeyup = function () {
            document.getElementById('infoarg').innerHTML = (this.value.length);
            if (this.value.length < {{ C.ARG_MIN_LENGHT|json }}) {
                console.log("Not enough characters");
                document.getElementById('infoarg').style.color = "red";
            } else {
                console.log("Enough characters");
                document.getElementById('infoarg').style.color = "black";
            }
        };
    </script>


{{ endblock }}


{{ block content }}
    <style>
        .otree-form-errors {
            display: none;
        }
        .row {
            margin: 15px;
            padding: 15px;
        }
    </style>
    <style id="alert">
        .alert-warning{
            background-color:white;
            border-color:white;
        }
        .otree-timer__time-left{
            color: red;
            font-weight: normal;
        }
    </style>
    <div id="all">
        <!-- Text and input -->
        <div class="text-center">

            <!-- Text -->
            {{ if group.GroupAcknowledgement == 1 }}
                <h1>
                    Ihre Gruppe hat entschieden, {{ C.TokenAdd_1dArticle }} anzuerkennen! <br><br>
                    Bitte geben Sie ein gutes Argument <u>für die Anerkennung</u> des Verfahrens an.
                </h1>
            {{ else }}
                <h1>
                    Ihre Gruppe hat entschieden, {{ C.TokenAdd_1dArticle }} nicht anzuerkennen!<br><br>
                    Bitte geben Sie ein gutes Argument <u>gegen die Anerkennung</u> des Verfahrens an.
                </h1>
            {{ endif }}
            <br>
            Sie haben hierfür maximal {{ C.ARG_TIME |json }} Minuten Zeit. <br>
            Im Anschluss werden alle Argumente von den Gruppenmitgliedern bewertet und das beste Argument gewählt.
            <br><br>
            <br><br>

            <!-- Input -->
            <textarea rows="4" cols="50" id="id_AVote_AckArg" name="AVote_AckArg" maxlength="250"></textarea>
            <br><br>
            <div class="col-12 arg" style="margin-top: 4px; font-size:small">Verwendete Zeichen:
                <span id="infoarg" style="color:red">0</span>/{{ C.ARG_MAX_LENGHT|json }}
            </div>

            <!-- Button -->
            <!-- Make "buttonclassfixedposition" for lab experiments and "buttonclassonline" for online experiments -->
            <div class ="buttonclassonline">{{ next_button }}</div>


        </div>

        <!-- Alertboxes -->
        <div id="alertArg" style="display:none;">Bitte geben Sie ein Argument ein!</div>
        <div id="alertLongArg" style="display:none;">Bitte geben Sie mindestens {{ C.ARG_MIN_LENGHT|json }}
            Zeichen ein!
        </div>
        <div id="alert-one-minute-left" style="display:none;">Bitte geben Sie innerhalb der nächsten
            Minute Ihr Argument ein!<br>Läuft die Zeit ab, bevor Sie ein Argument eingegeben haben, wird der Inhalt
            des Antwortfeldes als Argument genutzt.
        </div>

    </div>



{{ endblock }}