{% extends 'otree/WaitPage.html' %}
{% load otree %}

{% block styles %}
    <style>
        #waiting-text-wrapper {
            padding: 0 0.5rem;
            text-align: center;
        }
        .progress {
            visibility: hidden;
        }
        #waiting-text-wrapper .progress {
            visibility: visible;
        }
        #text-wrapper {
            text-align: left;
        }
        #text-wrapper #hoover-box {
            margin: 0.5rem 0 2rem;
        }
        #text-wrapper #hoover-box button {
            font-size: 0.75rem;
            float: right;
            position: relative;
            bottom: 0.2rem;
            margin-left: 0.5rem;
        }
        #text-wrapper #instructions,
         #text-wrapper #story {
            font-size: 0.85rem;
            margin: 0 3rem;
            padding: 1rem 2rem;
            border-top: solid black 1px;
            display: none;
        }
        #text-wrapper table {
            text-align: center;
            margin-top: 1rem;
            width: 100%;
            border-top: solid black 1px;
        }
        #text-wrapper thead {
            background-color: #F7F7F7;
        }
        #text-wrapper thead th {
            padding: 0.5rem 0.25rem;
        }
        #text-wrapper td {
            font-size: 0.9rem;
            padding: 0 0 0.5rem;
        }
        #text-wrapper .fixed-argument {
            padding: 0 0.1rem;
            max-width: 18.25rem;
            overflow: hidden;
            text-align: justify;
        }#text-wrapper .top {
            vertical-align: top;
        }
        #text-wrapper .bottom {
            vertical-align: bottom;
        }
        #text-wrapper .left {
            text-align: left;
        }
        .border-top-black {
            border-top: solid black 1px;
        }
        .bold {
            font-weight: bold;
        }
    </style>
{% endblock %}

{% block title %}
    Bitte warten!
{% endblock %}

{% block content %}
    <div id="waiting-text-wrapper">
        Bitte warten Sie, bis alle Mitglieder Ihrer Gruppe die Geschichte gelesen haben.
        <br><br>
        <div class="progress">
            <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar"></div>
        </div>
        <br>
        Es geht gleich weiter.
        <br><br><br>
        <div id="text-wrapper">
        <div id="hoover-box">
            <span class="bold">Argumente-Sammlung</span>
            <button type="button" name="show-story" class="story-button btn btn-primary">
                Blick in die Geschichte
            </button>
            <button type="button" name="show-instructions" class="instructions-button btn btn-primary">
                Blick in die Instruktionen
            </button>
        </div>
        <div id="instructions">
            <span class="bold">Instruktionen</span>
            <br><br>
            Im folgenden Experiment präsentieren wir Ihnen eine Geschichte,
            in der eine Person in einer Zwickmühle steckt.
            <br><br>
            Ihr Trainingsprogramm besteht darin, in Gruppenarbeit gemeinsam Pro- und Contra-Argumente für die
            Entscheidung des Protagonisten zu sammeln.
            Hierfür hat Ihre Gruppe 20 Minuten Zeit.
            Erst nach Ablauf der Zeit geht es automatisch weiter im Experiment.
            Sammeln Sie bitte so viele starke Argumente
            wie möglich. Bitte sammeln Sie dabei mindestens drei Argumente jeweils auf der Pro- und Contra-Seite.
            <br><br>
            Die Gruppenarbeit findet ausschließlich schriftlich auf elektronischem Weg statt.
            Sie sehen im Anschluss an die Geschichte eine Pro- und Contra-Tabelle,
            in der Sie alle Ihre Argumente elektronisch eintragen können.
            <br><br>
            In der Gruppe sind Sie nacheinander an der Reihe und können jeweils
            <span class="bold">immer nur ein Argument</span> einbringen,
            danach ist der Nächste Ihrer Gruppe dran. Sie können aber auch „Weiter“ klicken, wenn Ihnen gerade kein
            weiteres Argument einfällt, dann ist auch erstmal wieder der Nächste an der Reihe.
            So wird das reihum gehen, bis Sie wieder dran sind.
            <br><br>
            Sie müssen sich jede Runde neu entscheiden, ob Sie ein Pro- oder ein Contra-Argument einbringen wollen.
            <br><br>
            Versuchen Sie die Argumente so verständlich wie möglich, d.h. in kurzen Sätzen und Stichpunkten zu sammeln,
            sodass die gesamte Gruppe Ihren Gedanken verstehen kann und es jedem in der Gruppe möglich ist,
            auf die Argumente der anderen Gruppenteilnehmer Bezug zu nehmen.
            <br><br>
            Die Eingabe Ihres Arguments sollte 2 Minuten nicht überschreiten,
            damit die anderen in der Gruppenarbeit nicht zu lange auf Ihren Einsatz warten müssen.
            Sollten Sie nicht innerhalb von 2 Minuten Ihr Argument eingetragen und abgesendet oder „Weiter“
            geklickt haben, ist automatisch der Nächste an der Reihe.
            <br><br>
            Einmal erfasste (abgesendete) Argumente können nicht mehr geändert oder gelöscht werden.
            <br><br>
            Achten Sie bei der Sammlung der Argumente möglichst auf Ausgeglichenheit bezüglich der Anzahl der Argumente
            (ausgeglichene Anzahl an Pro- und Contra-Argumenten).
            <br><br>
            Bei der Sammlung ist jedes Argument zulässig, aber kein Teilnehmer (und auch kein anderer Mensch)
            darf angegriffen oder bewertet werden – auch nicht positiv.
            <br><br>
            Sowohl diese Instruktionen als auch die Geschichte kann während der Bearbeitung per Klick auf den Button
            „Blick in die Geschichte“ und „Blick in die Instruktionen“ immer wieder aufgerufen werden.
        </div>
        <div id="story">
            <span class="bold">Geschichte: Führungskraft in Not</span>
            <br><br>
            Herr Müller leitet erfolgreich seit einigen Jahren ein kleines Team von fünf Personen.
            Er ist sehr zufrieden mit den Leistungen seines Teams.
            In letzter Zeit gibt es allerdings Schwierigkeiten mit einer Mitarbeiterin.
            <br><br>
            Diese langjährige, gute Mitarbeiterin seines Teams kommt in letzter Zeit häufig zwischen 15 und 75 Minuten
            zu spät, sodass der betriebliche Ablauf erheblich gestört wird.
            Schon mehrfach haben sich wichtige Großkunden und Kollegen beschwert,
            dass die Mitarbeiterin nicht oder zu spät zu einem Termin kam und nicht erreichbar war.
            Die betroffene Mitarbeiterin wurde vor kurzem von ihrem Lebensgefährten verlassen und muss sich nun allein
            um ihre zwei kleinen Kinder kümmern. Außerdem leidet sie unter dem Druck,
            den Kredit für das Haus jetzt allein abbezahlen zu müssen.
            <br><br>
            Herr Müller hat bereits mehrfach mit ihr über das Problem gesprochen.
            Trotzdem musste die Mitarbeiterin aufgrund der vielen Verspätungen mehrfach ermahnt und auch einmal
            schriftlich abgemahnt werden.
            <br><br>
            Nachdem sie wiederholt 15 Minuten zu spät zu einem Termin an ihrem Arbeitsplatz erschienen ist,
            verlangt die Unternehmensleitung von Herrn Müller,
            dass er das Problem endgültig und schnellstmöglich lösen muss.
            Auf die daraufhin wieder eingegangene Kundenbeschwerde muss schnell reagiert werden.
            Er soll dringend darüber nachdenken, seiner Mitarbeiterin zu kündigen.
            Hierfür setzt ihm die Unternehmensleitung eine Frist von 3 Tagen.
            Herr Müller erhält vom Justiziar eine juristische Beratung mit der Aussage,
            dass eine Kündigung zumindest arbeitsrechtlich möglich ist. Herr Müller ist unsicher, was er machen soll.
            Er muss schnell handeln. Er ist auch sehr verärgert über das Verhalten der Mitarbeiterin,
            hat aber dennoch „Bauchschmerzen“, wenn er daran denkt sie zu kündigen.
        </div>
        <table>
            <thead>
                <tr>
                    <th>Nr.</th>
                    <th>Pro Kündigung</th>
                    <th>Absenden</th>
                    <th>Nr.</th>
                    <th>Contra Kündigung</th>
                    <th>Absenden</th>
                </tr>
            </thead>
            <tbody>
            {% for i, argument in arguments_table %}
            {% if participant.vars.pro_argument_counter >= i or participant.vars.con_argument_counter >= i %}
                <tr class="border-top-black">
                    <td></td>
                    <td>
                    {% if participant.vars.pro_argument_is_empty_error and participant.vars.pro_argument_counter == i %}
                        <div class="error-message">
                            Bitte tragen Sie hier zunächst ein Argument ein!
                        </div>
                    {% endif %}
                    </td>
                    <td></td>
                    <td></td>
                    <td>
                    {% if participant.vars.con_argument_is_empty_error and participant.vars.con_argument_counter == i %}
                        <div class="error-message">
                            Bitte tragen Sie hier zunächst ein Argument ein!
                        </div>
                    {% endif %}
                    </td>
                    <td></td>
                </tr>
                <tr>
                    <td class="bold top">{{ argument.number.0 }}</td>
                    <td class="left top">
                    {% if participant.vars.pro_argument_counter > i %}
                        <div class="fixed-argument">
                            {{ argument.pro }}
                        </div>
                    {% endif %}
                    </td>
                    <td class="bottom">
                    </td>
                    <td class="bold top">{{ argument.number.1 }}</td>
                    <td class="left top">
                    {% if participant.vars.con_argument_counter > i %}
                        <div class="fixed-argument">
                            {{ argument.con }}
                        </div>
                    {% endif %}
                    </td>
                    <td class="bottom">
                    </td>
                </tr>
            {% endif %}
            {% endfor %}
            </tbody>
        </table>
        </div>
    </div>
{% endblock %}

{% block app_scripts  %}
    <script>
        $( document ).ready(function() {
            $( ".instructions-button" ).click(function() {
                if( $( this ).text().trim() == 'Blick in die Instruktionen' ) {
                    $( this ).text('Instruktionen schließen');
                } else {
                    $( this ).text('Blick in die Instruktionen');
                }
                $( "#instructions" ).slideToggle(500);
            });
            $( ".story-button" ).click(function() {
                if( $( this ).text().trim() == 'Blick in die Geschichte' ) {
                    $( this ).text('Geschichte schließen');
                } else {
                    $( this ).text('Blick in die Geschichte');
                }
                $( "#story" ).slideToggle(500);
            });
        });
    </script>
{% endblock %}