<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
  <link rel="icon" href="img/favicon.ico"/>

  {{>index_assets}}

  <!-- our scripts -->
  <script type="text/javascript" src="assets/index.js"></script>
  <link rel="stylesheet" href="assets/style.css"/>
  <title>Your Own Tracks</title>
</head>
<body>
  <div class="container">
    <div class="row page-header">
      <div class="col-xs-1 text-left">
        <a href="#" onclick="gotoDate(datePrevFrom, datePrevTo);" class="btn btn-primary" role="button">
          <span class="hidden-xs">Previous</span>
          <span class="visible-xs"><span class="glyphicon glyphicon-arrow-left"></span></span>
        </a>
      </div>
      <div class="col-xs-5 text-center">
        <div class="input-group input-daterange">
          <input type="text" class="form-control" value="{{date_from}}" id="dateFrom"/>
          <span class="input-group-addon">to</span>
          <input type="text" class="form-control" value="{{date_to}}" id="dateTo"/>
        </div>
      </div>
      <div class="col-xs-6 text-right">
        <div class="btn-group" role="group">
          <a role="button" data-toggle="collapse" href="#configCollapse" class="btn btn-default" id="configButton">
            <span class="hidden-xs">Config</span>
            <span class="visible-xs"><span class="glyphicon glyphicon-cog"></span></span>
          </a>
          <a href="#" onclick="resetZoom();" class="btn btn-default">
            <span class="hidden-xs">Reset view</span>
            <span class="visible-xs"><span class="glyphicon glyphicon-screenshot"></span></span>
          </a>
          <a href="#" onclick="gotoDate();" class="btn btn-default" style="display: inline-block;" id="todayButton">
            <span class="hidden-xs">Today</span>
            <span class="visible-xs"><span class="glyphicon glyphicon-arrow-up"></span></span>
          </a>
          <a href="#" onclick="gotoDate(dateNextFrom, dateNextTo);" class="btn btn-primary" style="display: inline-block;" id="nextButton">
            <span class="hidden-xs">Next</span>
            <span class="visible-xs"><span class="glyphicon glyphicon-arrow-right"></span></span>
          </a>
        </div>
      </div>
    </div>
    <div class="collapse" id="configCollapse"><br/>
      <div class="well">
        <div class="row">
          <div class="col-xs-2 text-left">
            <a href="#" onclick="showHideMarkers();" class="btn btn-default" id="show_markers">
              <span class="hidden-xs">Show markers</span>
              <span class="visible-xs"><span class="glyphicon glyphicon-map-marker"></span></span>
            </a>
          </div>
          <div class="col-xs-2 text-left">
            <a href="#" onclick="setLiveMap();" class="btn btn-default" id="livemap_on">
              <span class="hidden-xs">Live map</span>
              <span class="visible-xs"><span class="glyphicon glyphicon-play-circle"></span></span>
            </a>
          </div>
          <div class="col-xs-8 text-right">
            <form class="form-inline"><span class="hidden-xs">Accuracy: </span>
              <div class="input-group">
                <input type="number" size="4" class="form-control" id="accuracy" value="{{accuracy}}"/>
                <span class="input-group-addon"><span class="hidden-xs">metres</span><span class="visible-xs">m</span></span>
                <span class="input-group-btn"><button type="button" class="btn btn-default" id="accuracySubmit">OK</button></span>
              </div>
            </form>
          </div>
        </div>
        <div class="row">
          <div class="col-xs-12 text-left">
            <div class="input-group">
              <div class="input-group-addon">
                <span class="hidden-xs">Tracker ID</span>
                <span class="visible-xs"><span class="glyphicon glyphicon-user"></span></span>
              </div>
              <select class="form-control" name="tracker_id" id="trackerID_selector">
                <option value="all">all</option>
              </select>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="container">
    <div id="mapid"></div>
  </div>
  <script type="text/javascript">
    $(document).ready(function() {
        var default_trackerID = '{{default_tracker_id}}';

        initUI('{{date_from}}', '{{date_to}}', {{accuracy}}, '{{tracker_id}}', '{{datepicker_language}}');
        initMap();
    });
  </script>
</body>
</html>