{% extends 'base.html' %}

{% block head %}
<link rel="stylesheet" href="/static/css/editstops.css" />
<script type="text/javascript" src="/static/js/editstops.js"></script>
<script type="text/javascript" src="http://openlayers.org/dev/OpenLayers.js"></script>
<script src='http://maps.google.com/maps?file=api&amp;v=2&amp;key=AIzaSyBbz_Bjqtf5U9qGZw4xoS5PxLDadHsC0AA'></script>

{% endblock %}


{% block body %}
    <div id="listCol">
        <div id="tabButtons">
            <div id="areasTabBtn" class="tabButton" data-name="areas">
                Areas
            </div>
            <div id="routesTabBtn" class="tabButton" data-name="routes">
                Routes
            </div>
            <div class="clear"></div>
        </div>
        <div id="listsWrapper">
            <div id="areas" class="listWrapper">
                <input type="text" id="areasSearch" class="listSearch" />
                <div id="areasList" class="list">
                </div>
            </div>
            <div id="routes" class="listWrapper">
                <input type="text" id="routesSearch" class="listSearch" />
                <div id="routesList" class="list">
                </div>
            </div>
        </div>
    </div>
    <div id="mapCol">
        
    </div>
    <div id="formCol">

    </div>

{% endblock %}
