{% extends 'base.html' %}

{% block title %}
    Routes
{% endblock %}

{% block head %}
    <script type="text/javascript">
$(function() {
    $('#searchFilter').keyup(function() {
        var val = $(this).val().toLowerCase();
        $('.listItem').each(function() {
            var txt = $(this).text().toLowerCase();
            if (txt.indexOf(val) != -1) {
                $(this).show();
            } else {
                $(this).hide();
            }
        });
    });
});

    </script>
{% endblock %}

{% block body %}
    Filter: <input id="searchFilter" />
    <ul id="routesList">
        {% for r in routes %}
        <li class="route listItem">
            <a href="{{r.get_absolute_url}}" title="view stops for route">{{ r.alias }}</a> - {{ r.from_stop.name }} to {{ r.to_stop.name }}
        </li>
        {% endfor %}
    </ul>    

{% endblock %}
