{% 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 body %}

    <div class="card shadow-sm" style="width: 450px;">
        <div class="card-body">
            <h5 class="card-title">{{ race.grandprix }}</h5>

            <form action="/enterresult" method="post">
                <ul id="columns" class="list-group list-group-flush">
                    {% 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 %}
                </ul>

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

        </div>
    </div>

{% endblock body %}