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

<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 %}#}

<div hx-get="/stop/{{ stop.id }}/table" hx-trigger="every 5s">
    {% call stop_table::stop_table(trips, current_time) %}
</div>