{% load static %}

<!doctype html>
<html lang="fr">
<head>
    <meta charset="utf-8">
    <title>Horaires en gare de {{ stop.name }}</title>

    <link title="Dark mode" rel="stylesheet" href="{% static "bootstrap-sncf.darkmode.min.css" %}">

    <script src="{% static "bootstrap-sncf.min.js" %}"></script>
</head>

<body>
    <h1>Horaires en gare de {{ stop.name }}</h1>

    <form>
        <div class="row">
            <div class="col-auto">
                <label for="date">Afficher le tableau à un autre moment</label>
            </div>
            <div class="col-auto">
                <input name="date" type="date" class="form-control" value="{{ query_date|date:"Y-m-d" }}">
            </div>
            <div class="col-auto">
                <input name="time" type="time" class="form-control form-inline" value="{{ query_time|time:"H:i" }}">
            </div>
            <div class="col-auto">
                <input type="submit" class="form-control form-inline">
            </div>
        </div>
    </form>

    <table class="table table-striped table-hover">
        <thead>
        <tr>
            <th>Heure</th>
            <th>Destination</th>
        </tr>
        </thead>
        <tbody>
        {% for departure in next_departures %}
        <tr>
            <td>{{ departure.departure_time }}</td>
            <td>
                <h3>{{ departure.trip.destination }}</h3>
                {% for trip_stop in departure.trip.stop_times.all %}{% if trip_stop.stop_sequence > departure.stop_sequence %}{% if trip_stop.drop_off_type == 0 %}{{ trip_stop.stop.name }}{% if trip_stop.pickup_type == 0 %}, {% endif %}{% endif %}{% endif %}{% endfor %}
            </td>
        </tr>
        {% endfor %}
    </table>
</body>
</html>
