{%- 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) %}
            {% endcall %}
        </div>
    {% endfor %}
</div>
<details>
    <summary>
        <p style="font-weight: bold; font-size: large;">Filters</p>
    </summary>
    <form hx-trigger="submit"
          hx-get="/stop/{{ stop.id }}/table"
          hx-target="#nta-table"
          hx-swap="outerHTML"
          hx-push-url="/stop/{{ stop.id }}">
        <div style="margin: 5px; padding: 10px; background-color: #eee;">
            <div style="display: flex; flex-wrap: wrap;">
                <fieldset style="flex-grow: 1;">
                    <legend>Route</legend>
                    {% for route in routes %}
                        {% for dir in route.directions %}
                            {% if let Some(fil) = filters && let Some(rts) = fil.routes %}
                                {% let route_filter_id = format!("{},{}", route.id, dir.direction) %}
                                <input type="checkbox"
                                       class="route-checkbox"
                                       name="routes"
                                       id="{{ route.id }},{{ dir.direction }}"
                                       value="{{ route.id }},{{ dir.direction }}"
                                       checked="{{ rts.contains(&*route_filter_id) }}">
                            {% else %}
                                <input type="checkbox"
                                       class="route-checkbox"
                                       name="routes"
                                       id="{{ route.id }},{{ dir.direction }}"
                                       value="{{ route.id }},{{ dir.direction }}"
                                       checked="true">
                            {% endif %}
                            <label for="{{ route.id }},{{ dir.direction }}">
                                <b>{{ route.short_name }}</b>: {{ dir.direction_destination }}
                            </label>
                            <br>
                        {% endfor %}
                    {% endfor %}
                    <input type="checkbox"
                           id="master"
                           hx-on:click="document.querySelectorAll('.route-checkbox').forEach(c => c.checked = this.checked)">
                    <label for="master">Select/Deselect All</label>
                </fieldset>
                <div style="flex-grow: 1;">
                    <fieldset>
                        <legend>Ride Options</legend>
                        {% if let Some(fil) = filters && let Some(lt) = fil.live_tracked %}
                            <input type="checkbox"
                                   name="live_tracked"
                                   id="live_tracked"
                                   value="true"
                                   checked="{{ lt }}">
                        {% else %}
                            <input type="checkbox"
                                   name="live_tracked"
                                   id="live_tracked"
                                   value="true"
                                   checked="true">
                        {% endif %}
                        <label for="live-tracked">Live Tracked</label>
                        <br>
                        {% if let Some(fil) = filters && let Some(sc) = fil.scheduled %}
                            <input type="checkbox"
                                   name="scheduled"
                                   id="scheduled"
                                   value="true"
                                   checked="{{ sc }}">
                        {% else %}
                            <input type="checkbox"
                                   name="scheduled"
                                   id="scheduled"
                                   value="true"
                                   checked="true">
                        {% endif %}
                        <label for="scheduled">Scheduled</label>
                        <br>
                    </fieldset>
                    <fieldset>
                        <legend>Crowding</legend>
                        {% for avail in SeatAvailability::iter() %}
                            {% if let Some(fil) = filters && let Some(crd) = fil.crowding %}
                                <input type="checkbox"
                                       name="crowding"
                                       id="{{ avail.to_string() }}"
                                       value="{{ avail.to_string() }}"
                                       checked="{{ crd.contains(&avail) }}">
                            {% else %}
                                <input type="checkbox"
                                       name="crowding"
                                       id="{{ avail.to_string() }}"
                                       value="{{ avail.to_string() }}"
                                       checked="true">
                            {% endif %}
                            <label for="{{ avail.to_string() }}">{{ avail.to_human_string() }}</label>
                            <br>
                        {% endfor %}
                        {% if let Some(fil) = filters && let Some(uc) = fil.unknown_crowding %}
                            <input type="checkbox"
                                   name="unknown_crowding"
                                   id="unknown_crowding"
                                   value="true"
                                   checked="{{ uc }}">
                        {% else %}
                            <input type="checkbox"
                                   name="unknown_crowding"
                                   id="unknown_crowding"
                                   value="true"
                                   checked="true">
                        {% endif %}
                        <label for="scheduled">Unknown</label>
                    </fieldset>
                </div>
            </div>
            <input type="submit" value="Apply">
        </div>
    </form>
</details>
<div style="overflow-x: scroll; max-width: 100%;">
    {% call stop_table::stop_table(trips, current_time, stop.id, query_str) %}
    {% endcall %}
</div>