{% extends 'base.html' %}

{% block title %} Area: {{ area.name }} {% endblock %}

{% block head %}
    <style type="text/css">
.has_point {
    color: #0f0;
}

.no_point {
    color: #f00;
}

a:hover {
    color: #00f;
}
    </style>

{% endblock %}

{% block body %}
    <div id="stopListWrapper" class="listColumn">
        <h4>Stops in {{ area.display_name }}:</h4>
        <input class="listFilterInput" placeholder="Filter..." />
        <ul id="stopList">
            {% for stop in stops %}
                <li>
                    <a href="{{ stop.get_absolute_url }}">{{ stop.display_name }}</a>
                </li>
            {% endfor %}
        </ul>
    </div>
    <div id="routeListWrapper" class="listColumn">
        <h4>Routes passing through {{ area.display_name }}:</h4>
        <input class="listFilterInput" placeholder="Filter..." />
            <ul id="routeList">
                {% for route in area.routes_passing %}
                <li>
                    <a href="{{ route.get_absolute_url }}">{{ route.alias }}</a>
                </li>

                {% endfor %}
            </ul>
    </div>
    <div id="areaListWrapper" class="listColumn">
        <h4>Nearby areas:</h4>
        <input class="listFilterInput" placeholder="Filter..." />
        <ul id="areaList">
            {% for area in area.nearby_areas %}
                <li>
                    <a href="{{ area.get_absolute_url }}">{{ area.display_name }}</a>
                </li>
            {% endfor %}

        </ul>
    </div>

    <div id="map"></div>

{% endblock %}