{% extends "global/Page.html" %}

{% block title %}Please select a school to apply{% endblock %}
{% block content %}
<link rel="stylesheet" href="{% static 'style/boxgraph.css' %}">
<link rel="stylesheet" href="{% static 'style/global_style.css' %}">
<link rel="stylesheet" href="{% static 'style/slider.css' %}">

     <style>
        table {
            width: 50%;
            border-collapse: collapse;
        }
        th, td {
            border: 1px solid black;
            text-align: center;
            padding: 4px; /* Adjust the padding for smaller cells */
            font-size: 12px; /* Adjust the font size for smaller text */
        }
        th {
            background-color: #f2f2f2;
        }
        .highlighted {
            background-color: red; /* Change the background color as desired */
        }
    </style>
    <p>This is round {{ player.round_number }}</p>
    <p>
    You are student {{ player.id_in_group }} <br>
    You and other students' score distribution is the following:
    </p>

     <table>
        <tr>
            <th>Student ID</th>
            <th colspan="3">Score Distribution</th>
        </tr>
        <tr>
            <td></td>
            <td>1/3 Chance</td>
            <td>1/3 Chance</td>
            <td>1/3 Chance</td>
        </tr>
        <tr>
            <td id="student-1">Student 1</td>
            <td>100</td>
            <td>90</td>
            <td>75</td>
        </tr>
        <tr>
            <td id="student-2">Student 2</td>
            <td>100</td>
            <td>90</td>
            <td>75</td>
        </tr>
        <tr>
            <td id="student-3">Student 3</td>
            <td>95</td>
            <td>80</td>
            <td>65</td>
        </tr>
        <tr>
            <td id="student-4">Student 4</td>
            <td>95</td>
            <td>80</td>
            <td>65</td>
        </tr>
        <tr>
            <td id="student-5">Student 5</td>
            <td>85</td>
            <td>70</td>
            <td>60</td>
        </tr>
        <tr>
            <td id="student-6">Student 6</td>
            <td>85</td>
            <td>70</td>
            <td>60</td>
        </tr>
    </table>


    {% formfields 'chosen_betJP'%}



        <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Replace "Student 1" with "YOU" based on player ID group
            // You can customize this logic for your player IDs
                var cell = document.getElementById('student-' + {{player.id_in_group}});
                if (cell) {
                    cell.textContent = 'student {{ player.id_in_group }} (YOU)';
                    cell.parentElement.classList.add('highlighted');
                }
            });
    </script>

    <p>{% next_button %}</p>


{% endblock %}