<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta name="description" content="MAVCesium">
    <meta name="author" content="Samuel Dudley">
    <meta name="license" content="GPL-3.0">
    <title>MAVCesium</title>
    
    <script>
        var bing_api_key = '{{ escape(bing_api_key) }}';
        var websocket = '{{ escape(websocket) }}';
        var app_prefix = '{{ escape(app_prefix) }}';
        if (!websocket || /null/.test(websocket) || /localhost/.test(websocket) || /0.0.0.0/.test(websocket)) {
            websocket = ("ws://" + window.location.hostname + ":" + window.location.port + "/" + app_prefix + "websocket/");
          }
    </script>
    
    <link rel="stylesheet" type="text/css" href="{{static_url("DST/css/cesium.css")}}"/>
    <link rel="stylesheet" type="text/css" href="{{static_url("DST/css/third_party/bootstrap.min.css")}}"/>
    <link rel="stylesheet" type="text/css" href="{{static_url("DST/css/third_party/font-awesome.min.css")}}"/>
    <link rel="stylesheet" type="text/css" href="{{static_url("DST/css/third_party/tether.min.css")}}"/>
    <link rel="stylesheet" type="text/css" href="{{static_url("Build/Cesium/Widgets/widgets.css")}}"/>
    <link rel="icon" href="{{static_url("DST/favicon-32x32.png")}}" sizes="32x32" />
    
    <script src="{{static_url("Build/Cesium/Cesium.js")}}" type="text/javascript"></script>
  </head>

  <body>
    <!-- Fixed navbar -->
    <nav class="navbar navbar-toggleable-sm navbar-light bg-faded fixed-top">
	    <ul class="navbar-nav mr-auto">
      		<li class="nav-item">
        		<a class="navbar-text" id = 'cursor_location'></a>
      		</li>
      		<li class="nav-item">
        		<a class="navbar-text" id = 'cursor_click'></a>
      		</li>
      		<li class="nav-item">
        		<a class="navbar-text" id = 'click_distance'></a>
      		</li>

	    </ul>
        <ul class="navbar-nav">
	        <li class="dropdown">
	          <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Camera<span class="caret"></span></a>
	          <ul class="dropdown-menu">
	            <li onclick="toggle_free_view(this, free_view)" id="free"><a class="dropdown-item" href="#">Free</a></li>
	            <li onclick="toggle_top_view(this, top_view)" id="top"><a class="dropdown-item" href="#">Top Down</a></li>
	            <li onclick="toggle_forward_view(this, forward_view)" id="forward"><a class="dropdown-item" href="#">Forward</a></li>
	            <li onclick="toggle_mount_view(this, mount_view)" id="mount"><a class="dropdown-item" href="#">Mount</a></li>
	          </ul>
	        </li>
	        
	        <li class='active' onclick="toggle_track_vehicle(this, track_vehicle)" id="track_vehicle">
	        	<a class="navbar-text" href="#" data-toggle="tooltip" data-placement="bottom" title="Track Vehicle">
	        		&nbsp<i class="fa fa-crosshairs fa-lg" aria-hidden="true"></i>&nbsp
	        	</a>
	        </li>
            <li data-toggle="modal" data-target=".bd-example-modal-lg">
	            <a class="navbar-text" href="#" data-toggle="tooltip" data-placement="bottom" title="Settings">
	            	&nbsp<i class="fa fa-cogs fa-lg" aria-hidden="true"></i>&nbsp
	            </a>
            </li>
         </ul>
    </nav>
    
    <!-- Begin page content -->
    <div class="container" id="cesium_container"></div>
    <div id="contextMenu" class="dropdown clearfix">
    	<!-- This div contains the context menu when activated -->
    </div>
    	{% include "settings_menu.html" %}
    
    <canvas id="hud"></canvas>
    
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="{{ static_url("DST/js/third_party/tether.min.js")}}" type="text/javascript"></script>
    <script src="{{ static_url("DST/js/third_party/jquery-3.2.1.min.js")}}" type="text/javascript"></script>
    <script src="{{ static_url("DST/js/third_party/bootstrap.min.js")}}" type="text/javascript"></script>
	<script src="{{ static_url("DST/js/cesium_setup.js")}}" type="text/javascript"></script>
	<script src="{{ static_url("DST/js/core.js")}}" type="text/javascript"></script>
	<script src="{{ static_url("DST/js/wp.js")}}" type="text/javascript"></script>
	<script src="{{ static_url("DST/js/context_menu.js")}}" type="text/javascript"></script>
	<script src="{{ static_url("DST/js/settings.js")}}" type="text/javascript"></script>
	<script src="{{ static_url("DST/js/hud.js")}}" type="text/javascript"></script>
	<script src="{{ static_url("DST/js/websocket.js")}}" type="text/javascript"></script>
  </body>
</html>