<!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/rpcclient.js"></script>
  <script type="text/javascript" src="assets/markermgr.js"></script>
  <script type="text/javascript" src="assets/ownmap.js"></script>
  <script type="text/javascript" src="assets/main.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-1 text-left">
        <a href="#" onclick="goPrevious();" class="btn btn-primary" role="button">
          <span class="d-none d-sm-block">Previous</span>
          <span class="d-block d-sm-none"><span class="fas fa-arrow-left"></span></span>
        </a>
      </div>
      <div class="col-5 text-center">
        <div class="input-group input-daterange">
          <input type="date" class="form-control" value="" id="dateFrom"/>
          <span class="col-form-label">&nbsp;to&nbsp;</span>
          <input type="date" class="form-control" value="" id="dateTo"/>
        </div>
      </div>
      <div class="col-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="d-none d-sm-block">Config</span>
            <span class="d-block d-sm-none"><span class="fas fa-cog"></span></span>
          </a>
          <a href="#" onclick="resetZoom();" class="btn btn-default">
            <span class="d-none d-sm-block">Reset view</span>
            <span class="d-block d-sm-none"><span class="fas fa-crosshairs"></span></span>
          </a>
          <a href="#" onclick="gotoDate();" class="btn btn-default" style="display: inline-block;" id="todayButton">
            <span class="d-none d-sm-block">Today</span>
            <span class="d-block d-sm-none"><span class="fas fa-arrow-up"></span></span>
          </a>
          <a href="#" onclick="goNext();" class="btn btn-primary" style="display: inline-block;" id="nextButton">
            <span class="d-none d-sm-block">Next</span>
            <span class="d-block d-sm-none"><span class="fas fa-arrow-right"></span></span>
          </a>
        </div>
      </div>
    </div>
    <div class="collapse" id="configCollapse"><br/>
      <div class="well">
        <div class="row">
          <div class="col-2 text-left">
            <a href="#" onclick="showHideMarkers();" class="btn btn-default" id="show_markers">
              <span class="d-none d-sm-block">Show markers</span>
              <span class="d-block d-sm-none"><span class="fas fa-map-marker"></span></span>
            </a>
          </div>
          <div class="col-2 text-left">
            <a href="#" onclick="setLiveMap();" class="btn btn-default" id="livemap_on">
              <span class="d-none d-sm-block">Live map</span>
              <span class="d-block d-sm-none"><span class="fas fa-play-circle"></span></span>
            </a>
          </div>
          <div class="col-8 text-right">
            <form class="form-inline"><span class="d-none d-sm-block col-form-label">Accuracy: </span>
              <div class="input-group">
                <input type="number" size="4" class="form-control" id="accuracy" value="{{accuracy}}"/>
                <span class="col-form-label"><span class="d-none d-sm-block">&nbsp;metres&nbsp;</span><span class="d-block d-sm-none">&nbsp;m&nbsp;</span></span>
                <span class=""><button type="button" class="btn btn-default" id="accuracySubmit">OK</button></span>
              </div>
            </form>
          </div>
        </div>
        <div class="row">
          <div class="col-12 text-left">
            <div class="input-group">
              <div class="col-form-label">
                <span class="d-none d-sm-block">Tracker ID: </span>
                <span class="d-block d-sm-none"><span class="fas fa-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() {
        window.default_trackerID = '{{default_tracker_id}}';
        window.trackerID = '{{tracker_id}}';
        window.accuracy = {{accuracy}};

        initUI();
        window.rpc = new RpcClient('rpc.php?callback=?');
        window.markers = new MarkerMgr(window.rpc);
        window.mymap = new OwnMap(window.markers);
    });
  </script>
</body>
</html>
