{% extends 'base.jinja' %}

{% set active_page = "race" %}

{% block title %}Formula 10 - Race{% endblock title %}

{% block navbar_center %}
    <div class="dropdown">
        <button class="btn btn-outline-danger dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
            {{ chosenusername }}
        </button>
        <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="/race/Everyone">Everyone</a></li>
            <li><hr class="dropdown-divider"></li>
            {% for user in users %}
                <li><a class="dropdown-item" href="/race/{{ user.name }}">{{ user.name }}</a></li>
            {% endfor %}
        </ul>
    </div>
{% endblock navbar_center %}

{% block body %}

    <table class="table table-bordered table-sm table-responsive">
        <thead>
        <tr>
            <th scope="col" rowspan="2" class="text-center" style="width: 200px;">Race</th>
            <th scope="col" colspan="{{ chosenusers | length }}" class="text-center">Call</th>
            <th scope="col" rowspan="2" class="text-center" style="width: 200px;">Result</th>
        </tr>
        </thead>

        <tbody>

        {# Users List #}
        <tr>
            <td>&nbsp;</td>

            {% for user in chosenusers %}
                <td class="text-center text-nowrap">{{ user.name }}</td>
            {% endfor %}

            <td>&nbsp;</td>
        </tr>

        {# Next Race Guess #}
        {% if nextrace is not none %}
            <tr class="table-light">
                <td class="text-nowrap"><span class="fw-bold">{{ nextrace.id }}:</span> {{ nextrace.grandprix }}</td>

                {% for user in chosenusers %}
                    <td>
                        <form action="/guessrace/{{ nextrace.id }}/{{ user.name }}" method="post">
                            {# Driver PXX Select #}
                            {{ driver_select_with_preselect(currentselection.get(user.name).pxx.abbr if user.name in currentselection else "",
                                                            "pxxselect", "P" ~ nextrace.pxx ~ ":") }}

                            {# Driver DNF Select #}
                            <div class="mt-2">
                                {{ driver_select_with_preselect(currentselection.get(user.name).dnf.abbr if user.name in currentselection else "",
                                                                "dnfselect", "DNF:") }}
                            </div>

                            <input type="submit" class="btn btn-danger mt-2 w-100" value="Save">
                        </form>
                    </td>
                {% endfor %}

                {# Enter Race Result #}
                <td>
                    <form action="/enterresult/{{ nextrace.id }}" method="post">
                        {# Driver PXX Select #}
                        {{ driver_select("pxxselect", "P" ~ nextrace.pxx ~ ":") }}

                        {# Driver DNF Select #}
                        <div class="mt-2">
                            {{ driver_select("dnfselect", "DNF:") }}
                        </div>

                        <input type="submit" class="btn btn-danger mt-2 w-100" value="Save">
                    </form>
                </td>
            </tr>

            {# Race Results #}
            {% for raceresult in raceresults %}
                <tr>
                    <td class="text-nowrap"><span
                            class="fw-bold">{{ raceresult.race.id }}:</span> {{ raceresult.race.grandprix }}</td>

                    {% for user in chosenusers %}
                        <td class="text-center text-nowrap">
                            {% if (raceresult.race_id in pastguesses) and (user.name in pastguesses.get(raceresult.race_id)) %}
                                {% set pxx = pastguesses.get(raceresult.race_id).get(user.name).pxx.abbr %}
                                {% set dnf = pastguesses.get(raceresult.race_id).get(user.name).dnf.abbr %}
                                <ul class="list-group list-group-flush">
                                    <li class="list-group-item {% if pxx == raceresult.pxx.abbr %}text-success fw-bold{% endif %}">
                                        P{{ raceresult.race.pxx }}: {{ pxx }}</li>
                                    <li class="list-group-item {% if dnf == raceresult.dnf.abbr %}text-success fw-bold{% endif %}">
                                        DNF: {{ dnf }}</li>
                                </ul>
                            {% endif %}
                        </td>
                    {% endfor %}

                    <td class="text-center text-nowrap">
                        <ul class="list-group list-group-flush">
                            <li class="list-group-item">P{{ raceresult.race.pxx }}: {{ raceresult.pxx.abbr }}</li>
                            <li class="list-group-item {% if raceresult.dnf.abbr == 'NON' %}text-muted{% endif %}">
                                DNF: {{ raceresult.dnf.abbr }}</li>
                        </ul>
                    </td>
                </tr>
            {% endfor %}
        {% endif %}

        </tbody>
    </table>

{% endblock body %}