{% extends 'base.html' %}

{% block css %}
<link rel="stylesheet" href="{{ rootWebPath }}/css/third-party/bootstrap-select.min.css">
<link rel='stylesheet' href='{{ rootWebPath }}/css/third-party/dygraph.css'/>
<link rel='stylesheet' href='{{ rootWebPath }}/css/third-party/webix.min.css'/>
<!--<link rel="stylesheet" href="https://cdn.webix.com/materialdesignicons/5.8.95/css/materialdesignicons.min.css?v=8.1.5" type="text/css" charset="utf-8">-->
<!--<link rel="stylesheet" href="//cdn.materialdesignicons.com/5.4.55/css/materialdesignicons.min.css">-->
<link rel="stylesheet" href="/css/third-party/materialdesignicons.min.css">
<link rel='stylesheet' href='{{ rootWebPath }}/css/app.css'/>
{% endblock %}

{% block js %}

<!-- Backend initial payload -->
<script type="application/javascript">
	const payload = JSON.parse({{payload|safe}});
	console.log('Initial project payload', payload);

	// TEMP FOR FEATURIZERS
    const featurizersPayload = JSON.parse({{featurizersJSONPayload|safe}});
	console.log('Initial featurizers payload', featurizersPayload);
</script>

<script src="{{ rootWebPath }}/js/third-party/bootstrap-select.min.js"></script>

<!-- Dygraphs & Synchronizer -->
<script src="{{ rootWebPath }}/js/third-party/dygraph.js"></script>
<script src="{{ rootWebPath }}/js/third-party/synchronizer.js"></script>

<!-- Webix -->
<script src="{{ rootWebPath }}/js/third-party/webix.min.js"></script>

<!-- Random color generator -->
<script src="{{ rootWebPath }}/js/third-party/random_color.js"></script>

<!-- Config -->
<script src="{{ rootWebPath }}/js/config.js"></script>

<!-- Classes -->
<script src="{{ rootWebPath }}/js/classes/annotation.js"></script>
<script src="{{ rootWebPath }}/js/classes/annotationset.js"></script>
<script src="{{ rootWebPath }}/js/classes/assignmentsmanager.js"></script>
<script src="{{ rootWebPath }}/js/classes/file.js"></script>
<script src="{{ rootWebPath }}/js/classes/globalstatemanager.js"></script>
<script src="{{ rootWebPath }}/js/classes/graph.js"></script>
<script src="{{ rootWebPath }}/js/classes/project.js"></script>
<script src="{{ rootWebPath }}/js/classes/requesthandler.js"></script>
<script src="{{ rootWebPath }}/js/classes/templatesystem.js"></script>

<!-- Function Libraries -->
<script src="{{ rootWebPath }}/js/event_handlers.js"></script>
<script src="{{ rootWebPath }}/js/helpers.js"></script>

<!-- App Main -->
<script src="{{ rootWebPath }}/js/app.js"></script>

{% endblock %}

{% block content %}
<div id="controls">
<!-- 
	<div id="projectAndFileSelection">

		<h5>{{project_name}}</h5>

		<h6>Files</h6>

		<div class="form-group">
			<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> -->

	<!-- <h6>Plot</h6>
	<button type="button" class="btn btn-sm btn-light" style="margin-bottom: 18px;" onclick="globalStateManager.currentFile ? globalStateManager.currentFile.plotControl.show() : null;">Show/Hide Graphs</button><br> -->

	<div id="assignmentPanelArea">
		<h6>My Assignments</h6>
	</div>
	<input id="assignmentFocusOption" type="checkbox" style="display: none;" onclick="if (globalStateManager.currentFile) { globalStateManager.currentFile.triggerRedraw(); }" checked><label for="assignmentFocusOption" style="font-size: 12px; margin-left: 6px;" title="Hide other patterns & annotations">Assignment focus</label>

	<!--	<span class="clickable" onclick="globalStateManager.currentFile.annotationWorkflowPrevious();">&lt; Prev</span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="clickable" onclick="globalStateManager.currentFile.annotationWorkflowNext();">Next &gt;</span>-->
	<!--	<div id="annotationWorkflowSubtext"></div>-->

<!--	<h6>Annotations</h6>-->
<!--	<button type="button" class="btn btn-sm btn-light" data-toggle="modal" data-target="#annotationsListModal" style="margin-bottom: 3px;">View File Annotations</button><br>-->
<!--	<button type="button" class="btn btn-sm btn-light" data-toggle="modal" data-target="#allAnnotationsListModal">View Project Annotations</button>-->
<!--	<br><br>-->

	<!-- <h6>Zoom Control</h6>
	<div id="zoomControl">
		<div>
			<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>
		</div>
		<div>
			<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>
		</div>
		<div>
			<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> -->

    <h6>Playback Control</h6>
    <div id="playbackControl">
        <div>
            <button onclick="globalStateManager.currentFile.play(document.getElementById('playbackSpeedSlider').value);" title="Play">Play</button>
            <button onclick="globalStateManager.currentFile.stop();" title="Stop">Stop</button>
        </div>
        <div>
            <button onclick="globalStateManager.currentFile.play(.5);" title="Stop">0.5x</button>
            <button onclick="globalStateManager.currentFile.play(1);" title="Stop">1x</button>
            <button onclick="globalStateManager.currentFile.play(2);" title="Stop">2x</button>
            <button onclick="globalStateManager.currentFile.play(4);" title="Stop">4x</button>
        </div>
        <div>
            <input type="range" list="tickmarks" id="playbackSpeedSlider" value="1" min="0" max="64" step=".25" oninput="globalStateManager.currentFile.play(this.value);" onchange="globalStateManager.currentFile.playback_currently_loaded_ds_left = 0; globalStateManager.currentFile.playback_currently_loaded_ds_right = 0;">
            <datalist id="tickmarks">
            <option value="0.25"></option>
            <option value="0.5" label="0.5x"></option>
            <option value="0.75"></option>
            <option value="1" label="1x"></option>
            <option value="2" label="2x"></option>
            <option value="4" label="4x"></option>
            <option value="8"></option>
            <option value="16"></option>
            <option value="32"></option>
            <option value="64" label="64x"></option>
            </datalist>
            <div style="display: inline-block; border-bottom: 1px; margin-left: 6px; margin-top: 4px; width: 24px;" id="currentSpeedOutput">1x</div>
        </div>
    </div>

	<h6>Annotations</h6>

	<table id="annotation_sets_cp_table" class="table table-sm table-hover control-panel-table">
		<thead>
		<tr>
			<th scope="col"></th>
			<th scope="col">Annotation Set</th>
			<th scope="col" style="width: 35px;">Color</th>
			<th scope="col" style="width: 35px;">Count</th>
		</tr>
		</thead>
		<tbody>
<!--		<tr>-->
<!--			<td><input type="checkbox"></td>-->
<!--			<td>General</td>-->
<!--			<td><div class="color-square" style="background-color: #881111;"></div></td>-->
<!--			<td>25</td>-->
<!--		</tr>-->
<!--		<tr>-->
<!--			<td><input type="checkbox"></td>-->
<!--			<td>Initial CRI Real v Art Annotation</td>-->
<!--			<td><div class="color-square" style="background-color: #281372;"></div></td>-->
<!--			<td>32</td>-->
<!--		</tr>-->
		</tbody>
	</table>

	<h6>Patterns</h6>

	<table id="pattern_sets_cp_table" class="table table-sm table-hover control-panel-table">
		<thead>
		<tr>
			<th scope="col"></th>
			<th scope="col">Annotation Set</th>
			<th scope="col" style="width: 35px;">Color</th>
			<th scope="col" style="width: 35px;">Count</th>
		</tr>
		</thead>
		<tbody>
<!--		<tr>-->
<!--			<td><input type="checkbox"></td>-->
<!--			<td>Initial CRI Real v Art Annotation</td>-->
<!--			<td><div class="color-square" style="background-color: #881111;"></div></td>-->
<!--			<td>25</td>-->
<!--		</tr>-->
<!--		<tr>-->
<!--			<td><input type="checkbox"></td>-->
<!--			<td>HR CRI Exceedance Thresholds</td>-->
<!--			<td><div class="color-square" style="background-color: #281372;"></div></td>-->
<!--			<td>32</td>-->
<!--		</tr>-->
		</tbody>
	</table>

<!--	<div id="patternDetectionPanel">-->

<!--		<h6>Exceedance Detection</h6>-->

<!--		<span style="font-size: 0.9em;"><i class="fa fa-plus-circle"></i>New</span>-->

<!--		<div class="form-group row" style="margin-bottom: 0.3rem">-->
<!--			<label for="alert_gen_type_field" class="col-sm-5 col-form-label col-form-label-sm">Pattern Type</label>-->
<!--			<div class="col-sm-7">-->
<!--				<select class="form-control form-control-sm" id="alert_gen_type_field">-->
<!--					<option value="patterndetection">Exceedance Detection</option>-->
<!--					<option value="correlation">Correlation Pattern</option>-->
<!--				</select>-->
<!--			</div>-->
<!--		</div>-->
<!--		<div class="form-group row" style="margin-bottom: 0.3rem">-->
<!--			<label for="alert_gen_series_field" class="col-sm-5 col-form-label col-form-label-sm">Series</label>-->
<!--			<div class="col-sm-7">-->
<!--				<select class="form-control form-control-sm selectpicker" data-title="Select series" data-live-search="true" id="alert_gen_series_field">-->
<!--				</select>-->
<!--			</div>-->
<!--		</div>-->
<!--		<div class="form-group row" style="margin-bottom: 0.3rem">-->
<!--			<label for="alert_gen_threshold_high_field" class="col-sm-5 col-form-label col-form-label-sm">Threshold<sub>High</sub></label>-->
<!--			<div class="col-sm-7">-->
<!--				<input class="form-control form-control-sm" type="text" id="alert_gen_threshold_high_field" placeholder="e.g. 200" />-->
<!--			</div>-->
<!--		</div>-->
<!--		<div class="form-group row" style="margin-bottom: 0.3rem">-->
<!--			<label for="alert_gen_threshold_low_field" class="col-sm-5 col-form-label col-form-label-sm">Threshold<sub>Low</sub></label>-->
<!--			<div class="col-sm-7">-->
<!--				<input class="form-control form-control-sm" type="text" id="alert_gen_threshold_low_field" placeholder="e.g. 70" />-->
<!--			</div>-->
<!--		</div>-->
<!--		<div class="form-group row" style="margin-bottom: 0.3rem">-->
<!--			<label for="alert_gen_duration_field" class="col-sm-5 col-form-label col-form-label-sm">Duration (s)</label>-->
<!--			<div class="col-sm-7">-->
<!--				<input class="form-control form-control-sm" type="text" id="alert_gen_duration_field" placeholder="e.g. 60" />-->
<!--			</div>-->
<!--		</div>-->
<!--		<div class="form-group row" style="margin-bottom: 0.3rem">-->
<!--			<label for="alert_gen_dutycycle_field" class="col-sm-5 col-form-label col-form-label-sm" style="white-space: nowrap;">Persistence (%)</label>-->
<!--			<div class="col-sm-7">-->
<!--				<input class="form-control form-control-sm" type="text" id="alert_gen_dutycycle_field" placeholder="e.g. 70" />-->
<!--			</div>-->
<!--		</div>-->
<!--		<div class="form-group row" style="margin-bottom: 0.3rem">-->
<!--			<label for="alert_gen_maxgap_field" class="col-sm-5 col-form-label col-form-label-sm">Max Gap (s)</label>-->
<!--			<div class="col-sm-7">-->
<!--				<input class="form-control form-control-sm" type="text" id="alert_gen_maxgap_field" placeholder="e.g. 60" />-->
<!--			</div>-->
<!--		</div>-->
<!--		<div class="form-group row">-->
<!--			<div class="col-sm-12 text-right">-->
<!--				<button onclick="if (confirm('Are you sure you want to clear patterns?\n\nNote: This will only clear the patterns from your current browsing session. Memorized pattern detection will re-run upon reload.')) { globalStateManager.currentFile.clearPatterns(); }" class="btn btn-secondary btn-sm">Clear</button>-->
<!--				<button onclick="globalStateManager.currentFile.detectPatternsFromForm();" class="btn btn-primary btn-sm">Generate</button>-->
<!--			</div>-->
<!--		</div>-->

<!--	</div>-->

	<div id="control_footer">

{#		<p id="enterrealtime" onclick="globalStateManager.enterRealtimeMode();">Switch to Realtime</p>#}
{#		<p id="exitrealtime" onclick="globalStateManager.exitRealtimeMode();">Exit Realtime</p>#}

	</div>

</div>
<div id="graphs">

<!--	<video controls>-->
<!--		<source src="js/sample.webm" type="video/webm">-->
<!--		Your browser does not support the video tag.-->
<!--	</video>-->

</div>

<!-- Annotation Modal -->
<div class="modal fade" id="annotationModal" tabindex="-1" role="dialog" aria-labelledby="annotationModalTitle" aria-hidden="true" data-keyboard="false">
	<div class="modal-dialog modal-lg" role="document">
		<div class="modal-content" style="width: 75%;">
			<div class="modal-header">
				<h6 class="modal-title" id="annotationModalTitle">Annotation</h6>
				<button type="button" class="close cancelButton" aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
			</div>
			<div class="modal-body">
				<annotationmodalvue />
			<!--	 <form>
					<div class="form-group"> 
						<label for="annotationLabel">Label</label>
						<select class="form-control" id="annotationLabel" name="annotationLabel">
							<option value="Real">Real</option>
							<option value="Artifact">Artifact</option>
						</select>
					</div>
					<div class="form-group" id="annotationIDContainer">
						<label for="annotationID">Annotation ID</label>
						<div style="font-weight: bold;" id="annotationID"></div>
					</div>
					<div class="form-group">
						<label for="annotationFile">File</label>
						<input type="text" id="annotationFile" class="form-control" disabled>
					</div>
					<div class="form-group">
						<label for="annotationSeries">Series</label>
						<input type="text" id="annotationSeries" class="form-control" disabled>
					</div>
					<div class="form-group">

						<label>Confidence</label><br>
						<div class="form-check form-check-inline">
							<input class="form-check-input" type="radio" name="annotationConfidence" id="inlineRadio-n3" value="-3">
							<label class="form-check-label" for="inlineRadio-n3">-3</label>
						</div>
						<div class="form-check form-check-inline">
							<input class="form-check-input" type="radio" name="annotationConfidence" id="inlineRadio-n2" value="-2">
							<label class="form-check-label" for="inlineRadio-n2">-2</label>
						</div>
						<div class="form-check form-check-inline">
							<input class="form-check-input" type="radio" name="annotationConfidence" id="inlineRadio-n1" value="-1">
							<label class="form-check-label" for="inlineRadio-n1">-1</label>
						</div>
						<div class="form-check form-check-inline">
							<input class="form-check-input" type="radio" name="annotationConfidence" id="inlineRadio-0" value="0">
							<label class="form-check-label" for="inlineRadio-0">0</label>
						</div>
						<div class="form-check form-check-inline">
							<input class="form-check-input" type="radio" name="annotationConfidence" id="inlineRadio-1" value="1">
							<label class="form-check-label" for="inlineRadio-1">+1</label>
						</div>
						<div class="form-check form-check-inline">
							<input class="form-check-input" type="radio" name="annotationConfidence" id="inlineRadio-2" value="2">
							<label class="form-check-label" for="inlineRadio-2">+2</label>
						</div>
						<div class="form-check form-check-inline">
							<input class="form-check-input" type="radio" name="annotationConfidence" id="inlineRadio-3" value="3">
							<label class="form-check-label" for="inlineRadio-3">+3</label>
						</div>
					</div>
					<div class="form-group">
						<label for="annotationNotes">Notes</label>
						<textarea class="form-control" id="annotationNotes" rows="3"></textarea>
					</div>
					<div class="form-group">
						<label for="patternNotes">Pattern Notes</label>
						<textarea class="form-control" id="patternNotes" rows="3" disabled></textarea>
					</div>
					<div class="form-row">
						<div class="col">
							<label for="annotationStartTime" style="font-family:LatoBold; font-size: 14px;color: #4D4D4D;">Start Time</label>
							<input type="date" class="form-control" id="annotationStartDate"><input type="time" step=".001" class="form-control" id="annotationStartTime" step="1">
						</div>
						<div class="col">
							<label for="annotationEndTime" style="font-family:LatoBold; font-size: 14px;color: #4D4D4D;">End Time</label>
							<input type="date" class="form-control" id="annotationEndDate"><input type="time" step=".001" class="form-control" id="annotationEndTime" step="1">
						</div>
					</div>
				</form> -->
					</div>
			<!-- <div class="modal-footer">
				<button type="button" class="btn btn-danger mr-auto deleteButton">Delete</button>
				<button type="button" class="btn btn-secondary cancelButton" data-dismiss="modal">Cancel</button>
				<button type="button" class="btn btn-primary saveButton">Save</button>
			</div> -->
		</div>
	</div>
</div>

<!-- Annotation List Modal -->
<div id="annotationsListModal" class="modal bd-example-modal-lg" tabindex="-1" role="dialog" aria-hidden="true">
	<div class="modal-dialog mw-100 w-75">
		<div class="modal-content" style="overflow-x: scroll;">
			<div class="modal-header">
				<h5 class="modal-title">File Annotations</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 class="table table-sm table-hover">
					<thead>
					<tr>
						<th scope="col">ID</th>
						<th scope="col">Begin</th>
						<th scope="col">End</th>
						<th scope="col">Annotation</th>
					</tr>
					</thead>
					<tbody></tbody>
				</table>
			</div>
		</div>
	</div>
</div>

<!-- All Annotation List Modal -->
<div id="allAnnotationsListModal" class="modal bd-example-modal-lg" tabindex="-1" role="dialog" aria-hidden="true">
	<div class="modal-dialog mw-100 w-75">
		<div class="modal-content" style="overflow-x: scroll;">
			<div class="modal-header">
				<h5 class="modal-title">Annotations for All Project Files</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 class="table table-sm table-hover">
					<thead>
					<tr>
						<th scope="col">ID</th>
						<th scope="col">File</th>
						<th scope="col">Begin</th>
						<th scope="col">End</th>
						<th scope="col">Annotation</th>
					</tr>
					</thead>
					<tbody></tbody>
				</table>
				<button type="button" class="btn btn-light" onclick="globalStateManager.currentProject.getAnnotations(populateAllAnnotationsModal);">Refresh</button>
			</div>
		</div>
	</div>
</div>
<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.resetZoomToOutermost();" title="Reset zoom to see all data">All</button>
				<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.zoomBy(0, .1);" title="Zoom out by 10%">-</button>
				<button onclick="globalStateManager.currentFile && globalStateManager.currentFile.zoomBy(1, .1);" title="Zoom in by 10%">+</button>
				<button style="margin-left:100px" title= "Show/Hide the side navigation bar" onclick="collapse()">Show/Hide Sidebar</button>
			</div>
		</div>
	</div>


{% endblock %}