{{ 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' }}">
    <!-- Importiert Schalter-spezifische Stile -->
    <link rel="stylesheet" href="{{ static 'global/switches_neu.css' }}">
{{ endblock }}

{{ block title }}
<!-- Title Block: Definiert den Seitentitel für die Anwendung -->
    Anweisungen
{{ endblock }}

{{ block content }}
<!-- Content Block: Hier wird der Hauptinhalt der Seite, wie Texte, Formulare und andere Elemente, eingefügt -->
<table id="instruction-payoff-matrix">
    <tr>
        <th class="first-column"></th>
        {% for i in range(3, 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-3" name="level" value="3" required>
                <span class="slider round"></span>
            </label>
        </th>
        <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>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>50</td>
    </tr>
</table>

{{ next_button }}
{{ endblock }}