{% 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 class="px-3 py-1" colspan="2">Train</th>
            <th class="px-3 py-1">Heure</th>
            <th class="px-3 py-1">Destination</th>
        </tr>
        </thead>
        <tbody>
        {% for departure in next_departures %}
        <tr class="h-100">
            <td class="h-100">
                <div class="train-type d-flex h-100 align-items-center justify-content-center">
                    <div class="transilien-route d-flex align-items-center justify-content-center font-weight-bold small p-1 m-2 text-center text-wrap"
                         style="width: 4em; height: 4em; border-radius: 15%; background-color: #{{ departure.trip.color|default:"FFFFFF" }}; color: #{{ departure.trip.text_color|default:"000000" }};">
                        {{ departure.trip.train_type }}
                    </div>
                </div>
            </td>
            <td class="h-100">
                <div class="train-number d-flex align-items-center justify-content-center h-100">
                    <div>
                        {% if departure.trip.service.transport_type == "TN" %}
                            <div class="text-center">{{ departure.trip.headsign }}</div>
                        {% endif %}
                        <div>{{ departure.trip.train_number }}</div>
                    </div>
                </div>
            </td>
            <td>
                <div class="table-hour d-flex align-items-center justify-content-center text-warning font-weight-bold h-100">
                    {{ departure.pretty_departure_time }}
                </div>
            </td>
            <td>
                <h3 class="headline">{{ departure.trip.destination.name }}</h3>
                <span class="stops">
                    {% 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.stop != departure.trip.destination %}, {% endif %}{% endif %}{% endif %}{% endfor %}
                </span>
            </td>
        </tr>
        {% endfor %}
    </table>
</body>
</html>
