<!DOCTYPE html>
<html>
<head>
	<title>Auton Universal Viewer</title>
	<link rel="apple-touch-icon" sizes="180x180" href="{{rootWebPath}}/img/favicons/apple-touch-icon.png">
	<link rel="icon" type="image/png" sizes="32x32" href="{{rootWebPath}}/img/favicons/favicon-32x32.png">
	<link rel="icon" type="image/png" sizes="16x16" href="{{rootWebPath}}/img/favicons/favicon-16x16.png">
	<!--<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">-->
	<!--<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">-->
	<link href="{{rootWebPath}}/css/third-party/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T">
	<link href="{{rootWebPath}}/css/third-party/datatables.min.css" rel="stylesheet" integrity="sha384-KC2M2csluGU+5yxnumKLILVCDw1CjJOLHBJjPaiHRW5TgI2MhHC+k26XMZr8feup">
	<link href="{{rootWebPath}}/css/third-party/font-awesome.min.css" rel="stylesheet" integrity="8B4QL3ax8+m5Vc/PXmmBD9HBpekV4TWVTJBt4zIG5NDlKUCYKoE7gCDjO8l/LZ/K(">
	<link href="{{ rootWebPath }}/js/vueDist/app.css" rel="stylesheet"/>
	<link href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css" rel="stylesheet" />
	{% block css %}{% endblock %}

	<!-- Styles for Flask-User -->
	<style>
        hr { border-color: #cccccc; margin: 0; }
        .no-margins { margin: 0px; }
        .with-margins { margin: 10px; }
		.col-centered { float: none; margin: 0 auto; }
    </style>

</head>
<body>

{% block body %}

<div id="vueapp">
<nav class="navbar fixed-top navbar-expand-sm navbar-light bg-light mb-4">
	<a class="navbar-brand" style="padding: 0;" href="{{rootWebPath}}/"><img src="{{rootWebPath}}/img/auv_logo.png" style="height: 30px; margin-right: 4px;"> Auton Universal Viewer<span style="display: none;" id="realtimeTitle"> &ndash; Realtime Mode</span>
		<h5 style="display:inline-block; padding-left: 40px; color: #4D4D4D">{{project_name}}</h5>
	</a>
	<!-- <div id="navbar-top">
		<div id="projectAndFileSelection">
			<h6 style="display:inline-block; padding-left: 52px; padding-top: 20px; color: #4D4D4D;">Files</h6>
			<div class="form-group" style="display:inline-block">
				<select class="form-control form-control-sm selectpicker bs-width-correction" data-title="Select file" data-live-search="true" id="file_selection" onchange="globalStateManager.loadFile();">
				</select>
			</div>
		<div id="plot-graphs">
			<h6 style="display: inline-block;">Plot</h6>
			<button type="button" class="btn btn-sm btn-light" style="margin-left: 10px;" onclick="globalStateManager.currentFile ? globalStateManager.currentFile.plotControl.show() : null;">Show/Hide Graphs</button><br></div>
		</div>
		<div id="zoomControl">
			<h6 style="display: inline-block;">Zoom Control</h6>
			<div id="zoom-buttons">
				<button onclick="globalStateManager.currentFile && globalStateManager.currentFile.zoomTo(21600000);" title="6 hours">6hr</button>
				<button onclick="globalStateManager.currentFile && globalStateManager.currentFile.zoomTo(7200000);" title="2 hours">2hr</button>
				<button onclick="globalStateManager.currentFile && globalStateManager.currentFile.zoomTo(3600000);" title="1 hour">1hr</button>
				<button onclick="globalStateManager.currentFile && globalStateManager.currentFile.zoomTo(600000);" title="10 minutes">10m</button>
				<button onclick="globalStateManager.currentFile && globalStateManager.currentFile.zoomTo(60000);" title="1 minute">1m</button>
				<button onclick="globalStateManager.currentFile && globalStateManager.currentFile.zoomTo(10000);" title="10 seconds">10s</button>
				<button onclick="globalStateManager.currentFile && globalStateManager.currentFile.zoomTo(1000);" title="1 second">1s</button>
				<button onclick="globalStateManager.currentFile && globalStateManager.currentFile.resetZoomToOutermost();" title="Reset zoom to see all data">All</button>
				<button onclick="globalStateManager.currentFile && globalStateManager.currentFile.zoomBy(0, .1);" title="Zoom out by 10%">-</button>
				<button onclick="globalStateManager.currentFile && globalStateManager.currentFile.zoomBy(1, .1);" title="Zoom in by 10%">+</button>
			</div>
		</div>
	</div> -->
	<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
		<span class="navbar-toggler-icon"></span>
	</button>

	{% block menu %}
	{% if call_or_get(current_user.is_authenticated) %}
	<div class="collapse navbar-collapse" id="navbarCollapse">
		<ul class="navbar-nav mr-auto"></ul>
		<ul class="navbar-nav">
			<li class="nav-item">
				<a class="nav-link" href="#" data-toggle="modal" data-target="#interactionsModal">
					<i class="fa fa-info-circle fa-lg"></i>
				</a>
			</li>
			<li class="nav-item dropdown">
				<a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fa fa-user fa-lg" aria-hidden="true"></i></a>
				<div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdown01">
					<a class="dropdown-header">{{ call_or_get(current_user.email) }}</a>
					<div class="dropdown-divider"></div>
					<a class="dropdown-item" href="{{ url_for('user.change_password') }}">Change Password</a>
					{% if current_user.has_roles('admin') %}
					<a class="dropdown-item" href="{{ url_for('user.invite') }}">Invite User</a>
					{% endif %}
					<a class="dropdown-item" href="{{ url_for('user.logout') }}">Sign Out</a>
				</div>
			</li>
		</ul>
	</div>
	{% endif %}
	{% endblock %}

</nav>

{# One-time system messages called Flash messages #}
{% block flash_messages %}
	{%- with messages = get_flashed_messages(with_categories=true) -%}
		{% if messages %}
			<div style="position: absolute; top: 12px; right: 12px; z-index: 9999">
			{% for category, message in messages %}
				{% set msgclass = category %}
				{% if msgclass=='error' %}
					{% set msgclass='danger' %}
				{% endif %}
<!--				<div class="alert alert-{{category}}" role="alert">{{ message|safe }}</div>-->
				<div class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-delay="12000">
					<div class="toast-header">
						<strong class="mr-auto">AUView <span class="badge badge-{{ msgclass }}">{{ category.title() }}</span></strong>
						<small class="text-muted">just now</small>
						<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
							<span aria-hidden="true">&times;</span>
						</button>
					</div>
					<div class="toast-body">{{ message|safe }}</div>
				</div>
			{% endfor %}
			</div>
		{% endif %}
	{%- endwith %}
{% endblock %}

{% block main %}{% block content %}{% endblock %}{% endblock %}

{% endblock %}

<!-- Interactions Information Modal -->
<div class="modal fade" id="interactionsModal" tabindex="-1" role="dialog" aria-labelledby="interactionsModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="interactionsModalLabel">Interactions</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <table>
	        <tr>
		        <td><i class="fa fa-mouse-pointer"></i> &amp; drag</td>
		        <td>Move/pan the graph</td>
	        </tr>
	        <tr>
		        <td>Double <i class="fa fa-mouse-pointer"></i></td>
		        <td>Reset zoom</td>
	        </tr>
	        <tr>
		        <td>Shift + <i class="fa fa-mouse-pointer"></i></td>
		        <td>Zoom to section</td>
	        </tr>
	        <tr>
		        <td>Shift + <i class="fa fa-circle-o-notch"> (scrollwheel)</i></td>
		        <td>Zoom in/out</td>
	        </tr>
	        <tr>
		        <td>Shift + <i class="fa fa-hand-o-up"> (pinch)</i></td>
		        <td>Zoom in/out</td>
	        </tr>
	        <tr>
		        <td>Alt + <i class="fa fa-mouse-pointer"></i></td>
		        <td>Annotate section</td>
	        </tr>
	        <tr>
		        <td><i class="fa fa-mouse-pointer"></i> on <span style="text-decoration: underline; text-decoration-color: #f7a438;">Pattern</span></td>
		        <td>Create annotation from pattern</td>
	        </tr>
	        <tr>
		        <td><i class="fa fa-mouse-pointer"></i> on <span style="text-decoration: underline; text-decoration-color: #0048B6;">Annotation</span></td>
		        <td>Edit annotation</td>
	        </tr>
        </table>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

<!-- vue end div -->
</div>
<!-- Bootstrap & dependencies (popper required for dropowns) -->
<!--<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>-->
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>-->
<!--<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>-->
<script src="{{ rootWebPath }}/js/third-party/jquery-3.6.0.min.js" integrity="sha384-vtXRMe3mGCbOeY7l30aIg8H9p3GdeSe4IFlP6G8JMa7o7lXvnz3GFKzPxzJdPfGK"></script>
<script src="{{ rootWebPath }}/js/third-party/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"></script>
<script src="{{ rootWebPath }}/js/third-party/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"></script>
<script src="{{ rootWebPath }}/js/third-party/datatables.min.js" integrity="sha384-iFpc0UoZhi3BiRRiaQh4zLNRjx68UW/oRSbq+qqVYUpMU6wykQS7vJLDKaK5fYU9"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>

<script type="text/javascript">
	// Display any initial toast messages
	$('div.toast').toast('show');
</script>

<!-- <script src="{{ rootWebPath }}/js/dist/js/chunk-vendors.js" ></script> -->
<script src="{{ rootWebPath }}/js/vueDist/app.js" ></script>

{% block js %}{% endblock %}

</body>
</html>