{{ block styles }}
    {{ super() }}
    <!-- Importiert allgemeine Hilfsstile -->
    <link rel="stylesheet" href="{{ static 'global/utilities.css' }}">
    <!-- Importiert Tabellen-spezifische Stile -->
    <link rel="stylesheet" href="{{ static 'global/tables.css' }}">
    <!-- Stil für das Auge -->
    <link rel="stylesheet" href="{{ static 'global/eye.css' }}">
    <!-- Importiert Schalter-spezifische Stile -->
    <link rel="stylesheet" href="{{ static 'global/switches_neu.css' }}">
{{ endblock }}

{{ block title }}
    <!-- Progress Bar Block: Zeigt den Fortschritt über 20 Runden diskret an -->
    <div style="margin-left: 156px; position: relative; margin-top: 20px;">
        <!-- Fortschrittsleiste -->
        <div style="background-color: rgba(240, 240, 240, 0.7); border-radius: 10px; padding: 1px; width: 100%; box-sizing: border-box; display: flex; position: relative;">
            {% for i in range(1, 21) %}
            <div style="flex-grow: 1; border: 1px solid rgba(221, 221, 221, 0.7); margin: 1px;
                        background-color: {% if player.round_number > i %}rgba(187, 187, 187, 0.7){% elif player.round_number == i %}rgba(136, 136, 136, 0.7){% else %}rgba(221, 221, 221, 0.7){% endif %};
                        color: {% if player.round_number > i %}rgba(0, 0, 0, 0.5){% elif player.round_number == i %}black{% else %}rgba(0, 0, 0, 0.7){% endif %};
                        font-weight: {% if player.round_number == i %}bold{% else %}normal{% endif %};
                        display: flex; align-items: center; justify-content: center;">
                {% if player.round_number == i %}
                    <span style="font-size: 0.3em; margin-right: 3px;">Runde</span>
                {% endif %}
                <span style="font-size: 0.3em;">{{ i }}</span>
            </div>
            {% endfor %}
        </div>
        <!-- Horizontaler Strich direkt unterhalb der Zahlen -->
        <hr style="border: 0; height: 2px; background-color: black; margin-top: 0px;">
    </div>
{{ endblock }}


{{ block content }}
<!-------------- JAVA-SCRIPT  ------------------>
<div id="other_players_predictions" style="display: none;">{{ other_players_predictions_json }}</div>
<div id="is_experimental_group" style="display: none;">{{ is_experimental_group_json }}</div>

<script type="text/javascript">
function updatePredictionSymbols(predictionCounts) {
    // Löscht den aktuellen Inhalt
    document.querySelectorAll('.prediction-column-container').forEach(container => {
        container.innerHTML = '';
    });

    Object.keys(predictionCounts).forEach(function(predictedValue) {
        const count = predictionCounts[predictedValue];
        // Findet den Container für die aktuelle Spalte
        const columnContainer = document.querySelector('.prediction-column-container[data-column="' + predictedValue + '"]');

        // Erstellt und fügt die Auge-Symbole basierend auf der Anzahl hinzu
        for (let i = 0; i < count; i++) {
            const eyeSymbol = document.createElement('div');
            eyeSymbol.className = 'prediction-eye'; // Verwendet die oben definierte CSS-Klasse
            columnContainer.appendChild(eyeSymbol);
        }
    });
}

document.addEventListener('DOMContentLoaded', function() {
    const isExperimentalGroup = JSON.parse(document.getElementById('is_experimental_group').textContent);
    const totalColumns = 10; // Gesamtanzahl der Spalten in der Tabelle

    function resetCellColors() {
        // Setzt den Hintergrund aller Zellen zurück, außer der ersten Spalte
        document.querySelectorAll('#payoff-matrix-10x10 tr td:not(:first-child)').forEach(function(cell) {
            cell.style.backgroundColor = '';
        });
    }

    function highlightPredictedColumns() {
        if (!isExperimentalGroup) {
            return;
        }

        var predictionsData = document.getElementById('other_players_predictions').textContent;
        var otherPlayersPredictions = JSON.parse(predictionsData);
        var predictionCounts = {};

        // Zählt, wie oft jede Vorhersage gemacht wurde
        otherPlayersPredictions.forEach(function(predictedValue) {
            if (!predictionCounts[predictedValue]) {
                predictionCounts[predictedValue] = 0;
            }
            predictionCounts[predictedValue] += 1;
        });

        // Wendet Schattierungen basierend auf der Anzahl der Vorhersagen an
        Object.keys(predictionCounts).forEach(function(predictedValue) {
            var count = predictionCounts[predictedValue];
            var columnIndex = totalColumns - predictedValue + 1; // Passt den Index an
            var color = ''; // Standardfarbe, wird basierend auf der Anzahl aktualisiert
            switch(count) {
                case 1: color = '#add8e6'; break;
                case 2: color = '#89c2d9'; break;
                case 3: color = '#5390d9'; break;
                case 4: color = '#0a58ca'; break;
            }

            document.querySelectorAll('#payoff-matrix-10x10 tr').forEach(function(row) {
                var cell = row.cells[columnIndex];
                if (cell) {
                    cell.style.backgroundColor = color;
                }
            });
        });
        // Innerhalb der Funktion highlightPredictedColumns, nachdem die predictionCounts berechnet wurden
        updatePredictionSymbols(predictionCounts);
    }


    function highlightRow(rowIndex) {
        var selectedRow = document.querySelector('#payoff-matrix-10x10 tr:nth-child(' + rowIndex + ')');
        if (selectedRow) {
            Array.from(selectedRow.querySelectorAll('td:not(:first-child)')).forEach(function(cell) {
                cell.style.backgroundColor = '#90ee90';
            });
        }
    }

    // Hervorhebung der vorhergesagten Spalten beim Laden der Seite, falls Experimentalgruppe
    highlightPredictedColumns();

    // Initialisiert die Zeilenhervorhebung, wenn eine Auswahl bereits getroffen wurde
    var checkedRadio = document.querySelector('input[type="radio"][name="level"]:checked');
    if (checkedRadio) {
        var selectedValue = parseInt(checkedRadio.value, 10);
        var rowIndex = 12 - selectedValue;
        highlightRow(rowIndex); // Zeile hervorheben nachdem die Spalten hervorgehoben wurden
    }

    // Event-Listener für Radiobuttons, um Zeilenhervorhebung für beide Gruppen zu ermöglichen
    document.querySelectorAll('input[type="radio"][name="level"]').forEach(function(radio) {
        radio.addEventListener('change', function() {
            var selectedValue = parseInt(this.value, 10);
            var rowIndex = 12 - selectedValue;

            resetCellColors(); // Setzt die Farben zurück
            highlightPredictedColumns(); // Hervorheben der vorhergesagten Spalten, falls Experimentalgruppe
            highlightRow(rowIndex); // Hervorheben der ausgewählten Zeile nachdem die Spalten hervorgehoben wurden

            var buttonText = "Auswahl " + selectedValue + " bestätigen";
            var nextButton = document.querySelector('.otree-btn-next');
            nextButton.textContent = buttonText;
            nextButton.classList.remove('hidden');
        });
    });
});
</script>
<!---------------------------------------------->

<!-------------- CSS --------------------------->
<style>
/* CSS für den übergeordneten Container der Vorhersage-Symbole */
#predictions-symbols-container {
    display: flex;
    justify-content: flex-start; /* Startet die Ausrichtung am Anfang des Containers */
    width: calc(100% - 156px); /* Angepasst, um die Breite der ersten Spalte zu berücksichtigen */
    margin-left: 156px; /* Verschiebt den Container um die Breite der ersten Spalte */
}


/* CSS für die Container der Vorhersage-Symbole */
.prediction-column-container {
    width: 50px; /* Gleiche Breite wie die Zellen der unteren Tabelle */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: auto; /* Dies stellt sicher, dass die flex-Basis nicht die Breite beeinflusst */
    box-sizing: border-box;
    /* border: 1px solid red;  /* Temporäre visuelle Hilfe, um die Container zu sehen */
}

/* CSS für die Augensymbole klein */
.prediction-eye {
    position: relative;
    display: inline-block;
    width: 15px; /* Gesamtbreite des Auges */
    height: 7.5px; /* Gesamthöhe des Auges */
    background-color: #000;
    border-radius: 50%; /* Kreisförmige Form für das äußere Auge */
    clip-path: ellipse(50% 41% at 50% 50%); /* Angepasste Ellipse für das kleinere Auge */
    margin: 0 1px; /* Abstand zwischen den Symbolen */
}

.prediction-eye::before {
    content: '';
    position: absolute;
    top: 50%; /* Zentriert vertikal */
    left: 50%; /* Zentriert horizontal */
    transform: translate(-50%, -50%); /* Verschiebung um die eigene Größe für perfekte Zentrierung */
    width: 60%; /* Prozentuale Größe relativ zur Breite des Auges */
    height: 80%; /* Prozentuale Größe relativ zur Höhe des Auges */
    background-color: #fff;
    border-radius: 50%; /* Runde Form für die Iris */
}

.prediction-eye::after {
    content: '';
    position: absolute;
    top: 50%; /* Zentriert vertikal */
    left: 50%; /* Zentriert horizontal */
    transform: translate(-50%, -50%); /* Verschiebung um die eigene Größe für perfekte Zentrierung */
    width: 20%; /* Prozentuale Größe relativ zur Breite des Auges */
    height: 40%; /* Prozentuale Größe relativ zur Höhe des Auges */
    background-color: #000;
    border-radius: 50%; /* Runde Form für die Pupille */
}

.prediction-display {
    flex: 1;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.prediction-eye-container {
    margin-bottom: 7px; /* Abstand zwischen Auge und Zahl */
}

.prediction-number-container {
    border: 2px solid #000; /* Schwarzer Rand */
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 35px;
    padding-right: 35px;
    width: 46px; /* Breite des Containers */
    height: 54px; /* Höhe des Containers */
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff; /* Weißer Hintergrund */
    font-size: 200%; /* Größe der Zahl */
    font-weight: bold; /* Fettgedruckte Zahl */
}

</style>
<!---------------------------------------------->

<div style="margin-left: 156px;">  <!-- Container um den Content nach rechts zu verschieben -->
    <!-- Titel -->
    <h2>Ihre Wahl von X</h2>
    <p>Bitte wählen Sie jetzt Ihren Wert für X, indem Sie auf den entsprechenden Regler links von der Tabelle klicken.</p>
    <p>Sobald Sie auf einen Regler klicken, werden Ihre potenziellen Auszahlungen in dieser Runde in der Tabelle mit <span style="background-color: #90ee90; padding: 2px; border-radius: 2px;">grün</span> markiert.</p>

    {{ if group.experimental }}
        <div style="margin-bottom: 40px; padding: 10px; border: 1px solid #ddd; background-color: #cce2ee;">
            <p>Die anderen vier Teilnehmenden in Ihrer Gruppe sagten vorher, dass der kleinste Wert von X, der jetzt gewählt werden kann wie folgt sein wird: </p>
            <ul style="padding: 0; list-style: none; display: flex; justify-content: space-around; margin: 0; margin-bottom: 20px;">
                {{ for prediction in player.other_players_predictions() }}
                    <li class="prediction-display">
                        <div class="prediction-eye-container">
                            <!-- Auge mit blauer Farbe -->
                            <span class="prediction-eye-large"></span>
                        </div>
                        <div class="prediction-number-container">
                            {{ prediction }}
                        </div>
                    </li>
                {{ endfor }}
            </ul>
            <p> Diese Vorhersagen sind in der Tabelle mit blau und zusätzlich mit einem kleinen Augensymbol markiert. </p>
        </div>
    {{ endif }}


    <p style="font-weight: bold;">Zur Erinnerung: </p>
    {{ if group.experimental }}
        <p>Welche der grün markierten Auszahlungen Sie gleich erhalten werden, hängt davon ab, welcher kleinste Wert von X <strong>jetzt</strong> von den anderen vier Teilnehmenden gewählt werden wird und <strong>nicht</strong> von den blau markierten Vorhersagen.</p>
    {% else %}
        <p>Welche der grün markierten Auszahlungen Sie gleich erhalten werden, hängt davon ab, welcher kleinste Wert von X <strong>jetzt</strong> von den anderen vier Teilnehmenden gewählt werden wird.</p>
    {% endif %}

</div>




<!------------------------------------------ Tabelle ---------------------------------------------->
<!-- Container für die horizontale Achsenbeschriftung mit zusätzlicher Klasse für Feinabstimmung -->
<style>
/* Anpassung der vertikalen Achsenbeschriftung */
.vertical-label {
    writing-mode: tb-rl; /* Schreibt von top nach bottom, rechts nach links */
    transform: rotate(-90deg) translateY(70%); /* Dreht den Text wieder in die richtige Leserichtung */
    white-space: nowrap; /* Verhindert Umbrüche innerhalb des Achsentextes */
    font-weight: bold; /* Fett gedruckter Text */
    display: flex; /* Verwendet Flexbox für die innere Zentrierung */
    flex-direction: column; /* Stapelt die Kinder vertikal */
    justify-content: center; /* Zentriert die Kinder vertikal im Container */
    align-items: center; /* Zentriert die Kinder horizontal im Container */
}

/* Spezifische Klasse für den Container der horizontalen Beschriftung */
.horizontal-label-container {
    text-align: left; /* Text links ausrichten, um die Verschiebung nach rechts zu ermöglichen */
    padding-left: 20%; /* Passt die Position nach rechts an */
}

.horizontal-label {
    font-weight: bold; /* Fett gedruckter Text */
    display: block; /* Stellt sicher, dass die Breite des Inhalts berücksichtigt wird */
    margin-bottom: 15px; /* Fügt Abstand unter dem Text hinzu */
    text-align: center; /* Zentriert den Text im Block */
}
</style>

<div class="horizontal-label-container">
    <div class="horizontal-label">Kleinster gewählter Wert von X</div>
</div>

<!-- Container für Vorhersage-Symbole, positioniert über der Tabelle -->
<div id="predictions-symbols-container" style="display: flex; justify-content: center; margin-bottom: 3px;">
    <!-- Einzelne Container für jede Spalte der Tabelle -->
    {{ for i in range(10, 0, -1) }}
    <div class="prediction-column-container" data-column="{{ i }}" style="flex-grow: 1; text-align: center;">
        <!-- Symbole werden hier dynamisch eingefügt -->
    </div>
    {{ endfor }}
</div>

<!-- Tabelle und vertikale Beschriftung Container -->
<div style="display: flex; align-items: center;">

    <!-- Vertikale Beschriftung, in Spans aufgeteilt für Zeilenumbrüche -->
    <div class="vertical-label">
        <span>Ihre</span>
        <span>Wahl</span>
        <span>von</span>
        <span>X</span>
    </div>



    <table id="payoff-matrix-10x10">
        <tr>
            <th class="first-column"></th>
            {{ for i in range(10, 0, -1) }}
                <td class="header-cell">{{ i }}</td>
            {{ endfor }}
        </tr>

        <tr>
            <th class="first-column">
                <label class="switch">
                    <input class="form-check-input" type="radio" id="id_level-10" name="level" value="10" required>
                    <span class="slider round"></span>
                </label>
            </th>
                <td>95</td>
                <td>85</td>
                <td>75</td>
                <td>65</td>
                <td>55</td>
                <td>45</td>
                <td>35</td>
                <td>25</td>
                <td>15</td>
                <td>5</td>
        </tr>

        <tr>
             <th class="first-column">
                 <label class="switch">
                    <input class="form-check-input" type="radio" id="id_level-9" name="level" value="9" required>
                    <span class="slider round"></span>
                </label>
            </th>
            <td class="impossible-value"></td>
            <td>90</td>
            <td>80</td>
            <td>70</td>
            <td>60</td>
            <td>50</td>
            <td>40</td>
            <td>30</td>
            <td>20</td>
            <td>10</td>
        </tr>

        <tr>
             <th class="first-column">
                 <label class="switch">
                    <input class="form-check-input" type="radio" id="id_level-8" name="level" value="8" required>
                    <span class="slider round"></span>
                </label>
            </th>
            <td class="impossible-value"></td>
            <td class="impossible-value"></td>
            <td>85</td>
            <td>75</td>
            <td>65</td>
            <td>55</td>
            <td>45</td>
            <td>35</td>
            <td>25</td>
            <td>15</td>
        </tr>

        <tr>
            <th class="first-column">
                <label class="switch">
                    <input class="form-check-input" type="radio" id="id_level-7" name="level" value="7" required>
                    <span class="slider round"></span>
                </label>
            </th>
            <td class="impossible-value"></td>
            <td class="impossible-value"></td>
            <td class="impossible-value"></td>
            <td>80</td>
            <td>70</td>
            <td>60</td>
            <td>50</td>
            <td>40</td>
            <td>30</td>
            <td>20</td>
        </tr>

        <tr>
             <th class="first-column">
                <label class="switch">
                    <input class="form-check-input" type="radio" id="id_level-6" name="level" value="6" required>
                    <span class="slider round"></span>
                </label>
            </th>
            <td class="impossible-value"></td>
            <td class="impossible-value"></td>
            <td class="impossible-value"></td>
            <td class="impossible-value"></td>
            <td>75</td>
            <td>65</td>
            <td>55</td>
            <td>45</td>
            <td>35</td>
            <td>25</td>
        </tr>

        <tr>
             <th class="first-column">
                <label class="switch">
                    <input class="form-check-input" type="radio" id="id_level-5" name="level" value="5" required>
                    <span class="slider round"></span>
                </label>
            </th>
            <td class="impossible-value"></td>
            <td class="impossible-value"></td>
            <td class="impossible-value"></td>
            <td class="impossible-value"></td>
            <td class="impossible-value"></td>
            <td>70</td>
            <td>60</td>
            <td>50</td>
            <td>40</td>
            <td>30</td>
        </tr>

        <tr>
             <th class="first-column">
                <label class="switch">
                    <input class="form-check-input" type="radio" id="id_level-4" name="level" value="4" required>
                    <span class="slider round"></span>
                </label>
            </th>
            <td class="impossible-value"></td>
            <td class="impossible-value"></td>
            <td class="impossible-value"></td>
            <td class="impossible-value"></td>
            <td class="impossible-value"></td>
            <td class="impossible-value"></td>
            <td>65</td>
            <td>55</td>
            <td>45</td>
            <td>35</td>
        </tr>

        <tr>
             <th class="first-column">
                <label class="switch">
                    <input class="form-check-input" type="radio" id="id_level-3" name="level" value="3" required>
                    <span class="slider round"></span>
                </label>
            </th>
            <td class="impossible-value"></td>
            <td class="impossible-value"></td>
            <td class="impossible-value"></td>
            <td class="impossible-value"></td>
            <td class="impossible-value"></td>
            <td class="impossible-value"></td>
            <td class="impossible-value"></td>
            <td>60</td>
            <td>50</td>
            <td>40</td>
        </tr>

        <tr>
             <th class="first-column">
                <label class="switch">
                    <input class="form-check-input" type="radio" id="id_level-2" name="level" value="2" required>
                    <span class="slider round"></span>
                </label>
            </th>
            <td class="impossible-value"></td>
            <td class="impossible-value"></td>
            <td class="impossible-value"></td>
            <td class="impossible-value"></td>
            <td class="impossible-value"></td>
            <td class="impossible-value"></td>
            <td class="impossible-value"></td>
            <td class="impossible-value"></td>
            <td>55</td>
            <td>45</td>
        </tr>

        <tr>
             <th class="first-column">
                <label class="switch">
                    <input class="form-check-input" type="radio" id="id_level-1" name="level" value="1" required>
                    <span class="slider round"></span>
                </label>
            </th>
            <td class="impossible-value"></td>
            <td class="impossible-value"></td>
            <td class="impossible-value"></td>
            <td class="impossible-value"></td>
            <td class="impossible-value"></td>
            <td class="impossible-value"></td>
            <td class="impossible-value"></td>
            <td class="impossible-value"></td>
            <td class="impossible-value"></td>
            <td>50</td>
        </tr>
    </table>

</div>

<!-- Button, anfangs versteckt -->
<style>
.hidden {
    display: none;
}
</style>

<!-- Button-Container -->
<div style="margin-top: 20px; margin-left: 450px;">
    <button class="otree-btn-next btn btn-primary hidden">Wählen Sie ein Wert für X</button>
</div>

{{ endblock }}