{%- import "route_symbol.html" as scope -%}
{% macro stop_table(trips, current_time, stop_id, query_str) %}
    <div id="nta-table"
         hx-get="/stop/{{ stop_id }}/table?{{ query_str }}"
         hx-trigger="every 5s"
         hx-swap="outer-html">
        <table class="train-direction-table">
            <tr>
                <th>ROUTE</th>
                <th>DESTINATION</th>
                <th>BOARDING AREA</th>
                <th>TIME</th>
                <th>VEHICLE</th>
                <th>TRIP</th>
                <th>CROWDING</th>
            </tr>
            {% for trip in trips %}
                <tr>
                    <td>
                        {% call scope::route_symbol(trip.trip.route) %}
                        {% endcall %}
                    </td>
                    <td>
                        <p>{{ trip.trip.direction.direction_destination }}</p>
                    </td>
                    <td>
                        <p>{{ trip.perspective_stop.platform.name }}</p>
                    </td>
                    {% if let Tracked(tracked_trip) = trip.trip.tracking_data %}
                        <td style="color: #008800">
                            <p style="font-size: small;">{{ &trip.perspective_stop.get_arrival_time(&tracked_trip) | format_time }}</p>
                            <p style="font-size: x-small;  font-style: italic;">
                                {{ ( trip.perspective_stop.get_arrival_time(&tracked_trip) - current_time) / 60 }} mins
                            </p>
                            <p style="font-size: x-small;  font-style: italic;">{{ tracked_trip.delay.round() }} late</p>
                        </td>
                    {% else %}
                        <td>
                            <p style="font-size: small;">{{ trip.perspective_stop.arrival_time | format_time }}</p>
                            <p style="font-size: x-small;  font-style: italic;">
                                {{ (trip.perspective_stop.arrival_time - current_time) / 60 }} mins
                            </p>
                        </td>
                    {% endif %}
                    {% if let Tracked(tracked_trip) = trip.trip.tracking_data %}
                        <td>{{ tracked_trip.vehicle_ids.join(", ") }}</td>
                    {% else %}
                        <td>-</td>
                    {% endif %}
                    <td>{{ trip.trip.trip_id }}</td>
                    {% if let Tracked(tracked_trip) = trip.trip.tracking_data %}
                        {% if let Some(seat_avail) = tracked_trip.seat_availability %}
                            <td>{{ seat_avail.to_human_string() }}</td>
                        {% else %}
                            <td>N/A</td>
                        {% endif %}
                    {% else %}
                        <td>-</td>
                    {% endif %}
                </tr>
            {% endfor %}
            <tr>
                <td colspan="7">
                    <p>Updated at: {{ current_time | format_time_with_seconds }}</p>
                </td>
            </tr>
        </table>
    </div>
{% endmacro %}