{{ 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 }}
<div style="margin-left: 156px;">
    Anweisungen
</div>
{{ endblock }}


{{ block content }}
<!-------------- 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 -->
    <p>Bitte wählen Sie jetzt Ihren Wert für X, indem Sie auf den entsprechenden Schieberegler links von der Tabelle klicken.</p>
    <p>Sobald Sie auf einen Schieberegler 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>
</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 }}