{{ block styles }}
    {{ super() }}
    <link rel="stylesheet" href="{{ static 'global/eye.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  ------------------>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        // Event-Listener für die Zellen, nicht für die Radio-Buttons
        document.querySelectorAll('.prediction-cell').forEach(function (cell) {
            cell.addEventListener('click', function () {
                // Entferne die 'selected' Klasse von allen Zellen
                document.querySelectorAll('.prediction-cell').forEach(function (c) {
                    c.classList.remove('selected');
                });
                // Füge die 'selected' Klasse zur angeklickten Zelle hinzu
                cell.classList.add('selected');

                // Wähle den zugehörigen Radio-Button aus
                var radio = cell.querySelector('input[type="radio"]');
                radio.checked = true;
                updateButtonText(radio.value);

                // Anzeigen des Buttons zur Bestätigung der Vorhersage
                document.querySelector('.otree-btn-next').classList.remove('hidden');
            });
        });

        // Funktion um Button-Text zu verändern, wenn eine Vorhersage getroffen wurde
        function updateButtonText(predictionValue) {
            var buttonText = "Vorhersage " + predictionValue + " bestätigen";
            document.querySelector('.otree-btn-next').textContent = buttonText;

            // Verstecken aller Augensymbole
            document.querySelectorAll('.prediction-eye-large').forEach(function (eye) {
                eye.classList.remove('visible');
            });
            // Anzeigen und Animieren des Augensymbols für die gewählte Vorhersage
            document.querySelector('#eye' + predictionValue).classList.add('visible');
        }
    });
</script>
<!---------------------------------------------->
<!-------------- CSS --------------------------->
<style>
    .prediction-cell {
        position: relative; /* Damit das Auge relativ zu dieser Zelle positioniert werden kann */
        border: none;
        text-align: center;
        padding: 1px;
        width: 10%;
    }

    /* Versteckt die Radio-Buttons selbst */
    .prediction-cell input[type="radio"] {
        display: none;
    }

    /* Stil für die Zelle, wenn sie ausgewählt ist */
    .prediction-cell.selected {
        border: 2px solid #000000; /* Dunkler Rand für das ausgewählte Element */
    }

    /* Stil für die Nummer in der Zelle, um Klickbarkeit anzuzeigen */
    .prediction-cell label {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100%;
    }

    .prediction-cell label span {
        font-weight: bold;
        font-size: 200%;
        color: #000; /* Farbe der Zahlen */
    }

    .prediction-eye-large {
        position: absolute; /* Das Auge absolut positionieren */
        top: -45px; /* Position über der Zelle */
        left: 50%;
        transform: translateX(-50%); /* Zentrieren des Auges */
        visibility: hidden; /* Anfangs unsichtbar machen */
    }

    /* Styles für die Vorhersagezahlen */
    .prediction-cell label {
        background-color: #f8f8f8; /* Hintergrundfarbe für die Zellen */
        cursor: pointer; /* Cursor zum Klicken anzeigen */
        transition: background-color 0.3s; /* Animation für Hover-Effekt */
    }

    .prediction-cell label:hover {
        background-color: #e0e0e0; /* Farbänderung beim Hover */
    }

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



<div style="margin-left: 156px;">  <!-- Container um den Content nach rechts zu verschieben -->
    <!-- Titel -->
    <h2>Vorhersage</h2>
    {{ if player.round_number == 1 }}
    <p>Auf der nächsten Seite werden Sie und die anderen Teilnehmenden in ihrer Gruppe einen Wert für X wählen, der 10,
        9, 8, 7, 6, 5, 4, 3, 2 oder 1 sein kann.</p>
    {{ else }}
    <p>Auf der nächsten Seite werden Sie und die anderen Teilnehmenden in ihrer Gruppe wieder einen Wert für X wählen,
        der 10, 9, 8, 7, 6, 5, 4, 3, 2 oder 1 sein kann.</p>
    {{ endif }}

    <div style="margin-bottom: 20px; padding: 10px; border: 1px solid #ddd; background-color: #cce2ee;">
        <p style="font-weight: bold;">In Bezug auf die anderen Teilnehmenden:</p>
        <p>Was glauben Sie ist der kleinste Wert für X, der von den vier anderen Teilnehmenden gewählt werden wird?</p>

        <p style="margin-bottom: 60px;">Ich glaube, dass der <strong>kleinste gewählte Wert für X der anderen vier Teilnehmenden</strong> auf der nächsten Seite... </p>

        <form>
            <table style="border-collapse: collapse; width: 100%; table-layout: fixed;">
                <tr>
                    {% for value in range(10, 0, -1) %}
                    <td class="prediction-cell">
                        <label for="prediction{{ value }}" style="display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%;">
                            <span style="font-weight: bold; font-size: 200%;">{{ value }}</span>
                            <input type="radio" id="prediction{{ value }}" name="prediction" value="{{ value }}">
                            <!-- Auge hier eingefügt, Klasse für Sichtbarkeit geändert -->
                            <span class="prediction-eye-large" id="eye{{ value }}"></span>
                        </label>
                    </td>
                    {% endfor %}
                </tr>
            </table>
        </form>


        <br>
        <p>...sein wird. </p>




        <p style="font-weight: bold;">Zur Erinnerung: </p>
        <p> Wenn Ihre Vorhersage richtig ist, bekommen Sie <span style="font-weight: bold; background-color: #D4AF37; padding: 5px; border-radius: 5px;">100 Punkte,</span> die zu Ihrem Rundengewinn dazugerechnet werden.</p>


        {{ if group.experimental }}
            <div style="margin-bottom: 20px; padding: 10px; border: 1px solid #ddd; background-color: #f9f9f9;">
                <p>Bevor die anderen vier Teilnehmenden auf der nächsten Seite Ihre tatsächliche Entscheidung treffen, wird den anderen vier Teilnehmenden Ihre Vorhersage die Sie jetzt treffen mitgeteilt. Genauso werden Sie über die Vorhersage der anderen vier Teilnehmenden informiert, bevor Sie Ihre Entscheidung treffen.</p>
            </div>
        {{ endif }}

    </div>
</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">Bitte treffen Sie eine Vorhersage</button>
</div>



{{ endblock }}