{%- import "route_symbol.html" as scope -%}

<style>
    .trip-desc  {
        display: flex;
        justify-content: start;
    }
</style>

<div style="display: flex; align-items: center;">
    <h1>{{ stop.name }}</h1>
</div>

<p>With service available on:</p>
<div style="display: flex; justify-content: start; padding-top: 5px; padding-bottom: 5px; flex-wrap: wrap; gap: 5px;">
    {% for route in routes %}
    <div style="margin-right: 5px">
        {% call scope::route_symbol(route) %}
    </div>
    {% endfor %}
</div>


{#{% if let libseptastic::stop::StopType::MultiPlatform(platforms) = stop.platforms %}
<div>
    <p>Platforms at this station:</p>
    {% for platform in platforms %}
    <p><a href="/stop/{{ platform.id }}">{{ platform.name }}</a></p>
    {% endfor %}
</div>
{% endif %}#}

<table class="train-direction-table">
    <tr>
        <th>ROUTE</th>
        <th>DESTINATION</th>
        <th>BOARDING AREA</th>
        <th>TIME</th>
        <th>VEHICLE</th>
    </tr>
{% for trip in trips %}
    <tr>
        <td>
            {% call scope::route_symbol(trip.trip.route) %}
        </td>
        <td>
            <p>{{ trip.trip.direction.direction_destination }}</p>
        </td>
        <td>
            <p>{{ trip.perspective_stop.platform.name }}</p>
        </td>
        {% if trip.is_tracked %}
        <td style="color: #008800">
        {% else %}
        <td>
        {% endif %}
            <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>
        {%  if let Tracked(tracked_trip) = trip.trip.tracking_data %}
            <td>
                {{  tracked_trip.vehicle_ids.join(", ") }}
            </td>
        {% else %}
            <td>
                -
            </td>
        {% endif %}
    </tr>
{% endfor %}
</table>