<!DOCTYPE html>
<html>
    <head>
        <title>Reactive Search Properties</title>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
    </head>
    <body>
        <div class="container">
            <!-- busy spinner -->
            <div class="page-header">
                <h1><img id="spinner" alt="loading" class="pull-right" src="images/spinner.gif" style="display: none;" width="32" height="32">Reactive Search</h1>
            </div>

            <div class="row">
                <!-- visualizer -->
                <!-- <div class="col-md-7"> -->
                <!--     <div class="panel panel-default"> -->
                <!--         <div class="panel-heading"> -->
                <!--             <big>Visualizer</big> -->
                <!--         </div> -->
                <!--         <div class="panel-body"> -->
                <!--             <svg id="svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="500"></svg> -->
                <!--         </div> -->
                <!--     </div> -->
                <!-- </div> -->

                <!-- query -->
                <!-- <div class="col-md-5"> -->
                <!--     <div class="panel panel-default"> -->
                <!--         <div class="panel-heading"> -->
                <!--             <big>Query</big> -->
                <!--         </div> -->
                <!--         <div class="panel-body"> -->
                <!--             <div class="form-group"> -->
                <!--                 <label for="walkingDist">Walking distance (km)</label> -->
                <!--                 <input class="form-control" type="number" step="0.1" min="0.1" value="1.0" id="walkingDist"> -->
                <!--             </div> -->
                <!--             <div class="form-group"> -->
                <!--                 <label for="minScore">Minimum score</label> -->
                <!--                 <input class="form-control" type="number" step="0.01" value="0.25" id="minScore"> -->
                <!--             </div> -->
                <!--             <div class="form-group"> -->
                <!--                 <label for="hintSteps">Hint steps</label> -->
                <!--                 <input class="form-control" type="number" value="20" min="1" id="hintSteps"> -->
                <!--             </div> -->
                <!--             <div class="form-group"> -->
                <!--                 <label for="maxResults">Max results</label> -->
                <!--                 <input class="form-control" type="number" value="100" id="maxResults"> -->
                <!--             </div> -->
                <!--             <div class="checkbox"> -->
                <!--                 <label><input type="checkbox" id="useLocalScale" checked="checked">Use local scale</label> -->
                <!--             </div> -->
                <!--             <div class="checkbox"> -->
                <!--                 <label><input type="checkbox" id="useRelativeScale" checked="checked">Use relative scale</label> -->
                <!--             </div> -->
                <!--         </div> -->
                <!--     </div> -->
                <!-- </div> -->
            </div>

            <!-- result listing -->
            <!-- <div class="panel panel-default" style="display: none;" id="resultPanel"> -->
            <!--     <div class="panel-heading"> -->
            <!--         <big>Results (<span id="resultCount"></span>)</big> -->
            <!--     </div> -->
            <!--     <div class="panel-body"> -->
            <!--         <script id="template" type="text/x-handlers-template"> -->
            <!--             {{#if results}} -->
            <!--             <table class="table table-striped table-condensed"> -->
            <!--             <thead> -->
            <!--                 <tr> -->
            <!--                     <th>Id</th> -->
            <!--                     <th>Name</th> -->
            <!--                     <th>Distance to user</th> -->
            <!--                     <th>Closest station</th> -->
            <!--                     <th>Distance to station</th> -->
            <!--                     <th>Score</th> -->
            <!--                 </tr> -->
            <!--             </thead> -->
            <!--             {{#each results}} -->
            <!--                 <tr> -->
            <!--                     <td>{{id}}</td> -->
            <!--                     <td><a href="{{url}}">{{name}}</a></td> -->
            <!--                     <th>{{distanceToUser}} km</th> -->
            <!--                     <th>{{closestStn}}</th> -->
            <!--                     <th>{{distanceToStn}} km</th> -->
            <!--                     <td>{{score}}</td> -->
            <!--                 </tr> -->
            <!--             {{/each}} -->
            <!--             </table> -->
            <!--             {{/if}} -->
            <!--         </script> -->
            <!--         <div id="results"></div> -->
            <!--     </div> -->
            <!-- </div> -->

        </div>
        <script src="bower_components/jquery/dist/jquery.js"></script>
        <script src="bower_components/handlebars/handlebars.js"></script>
        <script src="bower_components/underscore/underscore.js"></script>
        <script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
    </body>
</html>