{% extends 'base.jinja' %}

{% set active_page = "/race/" ~ activeuser.name | default("Everyone") %}
{% set active_user = activeuser %}

{% 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">
            {% if activeuser is not none %}{{ activeuser.name }}{% else %}Everyone{% endif %}
        </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 shadow-sm">
        <thead>
        <tr>
            <th scope="col" rowspan="2" class="text-center" style="width: 200px;">Race</th>

            {% if activeuser is none %}
                <th scope="col" colspan="{{ users | length }}" class="text-center">Call</th>
            {% else %}
                <th scope="col" class="text-center">Call</th>
            {% endif %}

            <th scope="col" rowspan="2" class="text-center" style="width: 200px;">Result</th>
        </tr>
        </thead>

        <tbody>

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

            {% if activeuser is none %}
                {% for user in users %}
                    <td class="text-center text-nowrap" style="min-width: 100px;">{{ user.name }}</td>
                {% endfor %}
            {% else %}
                <td class="text-center text-nowrap" style="min-width: 100px;">{{ activeuser.name }}</td>
            {% endif %}

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

        {# Current Result, only displayed for all users overview #}
        {% if activeuser is none %}
            <tr class="table-danger">
                <td class="text-nowrap">
                    <span class="fw-bold">{{ currentrace.id }}:</span> {{ currentrace.grandprix }}<br>
                    <small><span class="fw-bold">Guess:</span> P{{ currentrace.pxx }}</small>
                </td>

                {% for user in users %}
                    <td class="text-center text-nowrap">
                        {% if (currentrace.id in guesses) and (user.name in guesses.get(currentrace.id)) %}
                            {% set pxx = guesses.get(currentrace.id).get(user.name).pxx.abbr %}
                            {% set dnf = guesses.get(currentrace.id).get(user.name).dnf.abbr %}

                            <ul class="list-group list-group-flush">
                                <li class="list-group-item" style="background-color: inherit;">P{{ currentrace.pxx }}: {{ pxx }}</li>
                                <li class="list-group-item" style="background-color: inherit;">DNF: {{ dnf }}</li>
                            </ul>
                        {% endif %}
                    </td>
                {% endfor %}

                <td>&nbsp;</td>
            </tr>
        {% endif %}

        {# Enter Guess, only displayed for single user focused view #}
        {% if activeuser is not none %}
            <tr class="table-danger">
                <td class="text-nowrap">
                    <span class="fw-bold">{{ currentrace.id }}:</span> {{ currentrace.grandprix }}<br>
                    <small><span class="fw-bold">Guess:</span> P{{ currentrace.pxx }}</small>
                </td>

                <td>
                    <form action="/guessrace/{{ currentrace.id }}/{{ activeuser.name }}" method="post">
                        {# Driver PXX Select #}
                        {{ driver_select_with_preselect(guesses.get(currentrace.id).get(activeuser.name).pxx.abbr if (currentrace.id in guesses and activeuser.name in guesses.get(currentrace.id)) else "",
                                                        "pxxselect", "P" ~ currentrace.pxx ~ ":") }}

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

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

                <td>&nbsp;</td>
            </tr>
        {% endif %}

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

                {% if activeuser is not none %}{% set users = [activeuser] %}{% endif %}
                {% for user in users %}
                    <td class="text-center text-nowrap">
                        {% if (raceresult.race_id in guesses) and (user.name in guesses.get(raceresult.race_id)) %}
                            {% set pxx = guesses.get(raceresult.race_id).get(user.name).pxx.abbr %}
                            {% set dnf = guesses.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 %}

        </tbody>
    </table>

{% endblock body %}