{% extends 'base.jinja' %}

{% set active_page = "/enter" %}
{% set active_user = none %}

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

{% block head_extra %}
    <link href="../static/style/draggable.css" rel="stylesheet">
    <script src="../static/script/draggable.js" defer></script>
{% endblock head_extra %}

{% block navbar_center %}
    {% if results | length > 0 %}
        <div class="dropdown">
            <button class="btn btn-outline-danger dropdown-toggle" type="button" data-bs-toggle="dropdown"
                    aria-expanded="false">
                {% if activeresult is not none %}{{ activeresult.race.grandprix }}{% else %}
                    {{ race.grandprix }}{% endif %}
            </button>
            <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="/enter/Current">{{ race.grandprix }}</a></li>
                <li>
                    <hr class="dropdown-divider">
                </li>
                {% for result in results %}
                    <li><a class="dropdown-item"
                           href="/enter/{{ result.race.grandprix }}">{{ result.race.grandprix }}</a>
                    </li>
                {% endfor %}
            </ul>
        </div>
    {% endif %}
{% endblock navbar_center %}

{% block body %}

    <div class="card shadow-sm" style="width: 450px;">
        <div class="card-body">
            <h5 class="card-title">{% if activeresult is not none %}{{ activeresult.race.grandprix }}{% else %}
                {{ race.grandprix }}{% endif %}</h5>

            <form action="/enterresult/
                    {% if activeresult is not none %}{{ activeresult.race.id }}{% else %}{{ race.id }}{% endif %}"
                  method="post">
                <ul id="columns" class="list-group list-group-flush">
                    {% if activeresult is not none %}
                        {% for driver in activeresult.pxxs.values() %}
                            <li class="list-group-item column p-1" draggable="true">
                                {{ driver.name }}

                                <div class="d-inline-block float-end">
                                    {# Driver DNFed #}
                                    <div class="form-check form-check-reverse d-inline-block">
                                        <input type="checkbox" class="form-check-input" value="{{ driver.name }}"
                                               id="dnf-{{ driver.name }}" name="dnf-drivers"
                                               {% if driver in activeresult.dnfs.values() %}checked{% endif %}>
                                        <label for="dnf-{{ driver.name }}"
                                               class="form-check-label text-muted">DNF</label>
                                    </div>

                                    {# Driver Excluded #}
                                    <div class="form-check form-check-reverse d-inline-block mx-2">
                                        <input type="checkbox" class="form-check-input" value="{{ driver.name }}"
                                               id="exclude-{{ driver.name }}" name="exclude-drivers"
                                               {% if driver in activeresult.excludes %}checked{% endif %}>
                                        <label for="exclude-{{ driver.name }}" class="form-check-label text-muted">Exclude</label>
                                    </div>
                                </div>

                                {# Standing order #}
                                <input type="hidden" name="pxxdrivers" value="{{ driver.name }}"></li>
                        {% endfor %}
                    {% else %}
                        {% for driver in drivers %}
                            <li class="list-group-item column p-1" draggable="true">
                                {{ driver.name }}

                                <div class="d-inline-block float-end">
                                    {# Driver DNFed #}
                                    <div class="form-check form-check-reverse d-inline-block">
                                        <input type="checkbox" class="form-check-input" value="{{ driver.name }}"
                                               id="dnf-{{ driver.name }}" name="dnf-drivers">
                                        <label for="dnf-{{ driver.name }}"
                                               class="form-check-label text-muted">DNF</label>
                                    </div>

                                    {# Driver Excluded #}
                                    <div class="form-check form-check-reverse d-inline-block mx-2">
                                        <input type="checkbox" class="form-check-input" value="{{ driver.name }}"
                                               id="exclude-{{ driver.name }}" name="exclude-drivers">
                                        <label for="exclude-{{ driver.name }}" class="form-check-label text-muted">Exclude</label>
                                    </div>
                                </div>

                                {# Standing order #}
                                <input type="hidden" name="pxxdrivers" value="{{ driver.name }}"></li>
                        {% endfor %}
                    {% endif %}
                </ul>

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

        </div>
    </div>

{% endblock body %}