{% extends 'base.html' %}
{% block content %}
<div class="container-fluid mt-4">
    <h1 class="h3 mb-4 text-gray-800">Course : {{ course.nom }} ({{ course.date }})</h1>
    <div class="row">
        <div class="col-lg-8 mx-auto">
            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">Gestion de la course</h6>
                </div>
                <div class="card-body">
                    <form method="post">
                        {% csrf_token %}
                        {% if not is_started %}
                            <button type="submit" name="start" class="btn btn-success">Départ</button>
                        {% elif not is_finished %}
                            <button type="submit" name="finish" class="btn btn-danger">Fin course</button>
                        {% else %}
                            <span class="badge badge-secondary">Course terminée</span>
                        {% endif %}
                    </form>
                </div>
            </div>
            <div class="card shadow mb-4">
                <div class="card-header py-3 d-flex justify-content-between align-items-center">
                    <h6 class="m-0 font-weight-bold text-primary">Arrivées</h6>
                    <div>
                        <a href="{% url 'export_csv' course.id %}" class="btn btn-outline-primary btn-sm mr-2">Export CSV</a>
                        <a href="{% url 'export_pdf' course.id %}" class="btn btn-outline-danger btn-sm">Export PDF</a>
                    </div>
                </div>
                <div class="card-body">
                    <table class="table table-striped" id="arriveesTable">
                        <thead>
                            <tr>
                                <th>Rang</th>
                                <th>Nom</th>
                                <th>Classe</th>
                                <th>Temps</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for a in arrivees %}
                            <tr>
                                <td>{{ a.rang }}</td>
                                <td>{{ a.coureur.nom }}</td>
                                <td>{{ a.coureur.classe }}</td>
                                <td>{{ a.temps }}</td>
                            </tr>
                            {% empty %}
                            <tr><td colspan="4">Aucun coureur arrivé.</td></tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}
{% block extra_js %}
<script>
const courseId = "{{ course.id }}";
const wsScheme = window.location.protocol === "https:" ? "wss" : "ws";
const wsUrl = `${wsScheme}://${window.location.host}/ws/course/${courseId}/`;
const socket = new WebSocket(wsUrl);

socket.onmessage = function(e) {
    // Recharge juste le tbody via AJAX
    fetch(window.location.href, { headers: { 'X-Requested-With': 'XMLHttpRequest' } })
        .then(response => response.text())
        .then(html => {
            const table = document.getElementById('arriveesTable').getElementsByTagName('tbody')[0];
            table.innerHTML = html;
        });
};
</script>
{% endblock %}