{% extends "base.html" %}
{% block content %}
<div class="starter-template">
	{% if !mute %}
	<audio id="buzzer" src="/static/alert.ogg" type="audio/ogg"></audio>
	{% else %}
	<span id="buzzer"></span>
	{% endif %}
	<div class="alert alert-danger hide" id="msg_box"><span class="glyphicon glyphicon-exclamation-sign"></span>
		<translate>Could not connect to the NanoDLP. Please check your network connection.</translate>
	</div>
	<div class="row">
		<div class="col-md-12">
			<div class="panel panel-default dashboard">
				<div class="panel-heading">
					<h3 class="panel-title">
						<div class="controls">
							<a class="ask pause-obj" href="/printer/stop" data-ask="stop-confirm"><span class="glyphicon glyphicon-stop text-danger"></span></a>
							<a class="pause-obj" href="/printer/unpause"><span class="glyphicon glyphicon-play text-success"></span></a>
							<a class="ask resume-obj" href="/printer/resume" data-ask="resume-confirm"><span class="glyphicon glyphicon-play text-warning"></span></a>
							{% if arch=="arm" %}
							<a class="idle-obj ajax" href="/printer/off" name="type" data-confirm="poweroff-confirm"><span class="glyphicon glyphicon-off text-danger"></span></a>
							<a class="idle-obj ajax" href="/printer/restart" name="type" data-confirm="restart-confirm"><span class="glyphicon glyphicon-repeat text-danger"></a>
							{% endif %}
						</div>
						<span class="glyphicon glyphicon-file"></span>
						<span class="val last_path printing-obj"></span>
						<a class="idle-obj" href="/plates" translate>The 3D printer is idle. Click on 'Plates' menu to start printing.</a>
					</h3>
				</div>
				<div class="panel-body layer_details printing-obj">
					<div class="row">
						<div class="col-md-5">
							<div class="embed-responsive embed-responsive-16by9 shadow" id="image_wrapper">
								<div class="image_enlarge embed-responsive-item"></div>
							</div>
						</div>
						<div class="col-md-3">
							<span class="glyphicon glyphicon-align-left text-success"></span>
							<translate class="key">Layer</translate>
							<div class="val last_location"></div>
							<br>

							<span class="glyphicon glyphicon-resize-vertical text-success"></span>
							<translate class="key">Height</translate>
							<div class="val last_height"></div>
							<br>

							<span class="glyphicon glyphicon-hourglass text-success"></span>
							<translate class="key">Remaining</translate>
							<div class="val last_remaining"></div>
							<br>

						</div>
						<div class="col-md-4">
							<span class="glyphicon glyphicon-time text-success"></span>
							<translate class="key">ETA</translate>
							<div class="val last_eta"></div>
							<br>

							<span class="glyphicon glyphicon-eye-open text-success"></span>
							<translate class="key">Action</translate>
							<div class="val last_action"></div>

							<div id="preview3d"></div>
						</div>
					</div>
					<div class="progress progress-striped printing-obj">
						<div style="width: 0%" class="progress-bar progress-bar-warning"></div>
					</div>
					<div class="stat-bar progress printing-obj">
						<div class="part" id="MoveTo" style="background-color:rgba(174,77,86,255);" translate>To Layer</div>
						<div class="part" id="GcodeBefore" style="background-color:rgba(176,116,132,255);" translate>Gcode Before</div>
						<div class="part" id="WaitBefore" style="background-color:rgba(103,164,117,255);" translate>Wait Before</div>
						<div class="part" id="DisplayLayer" style="background-color:rgba(48,120,93,255);" translate>Cure Layer</div>
						<div class="part" id="WaitAfter" style="background-color:rgba(188,174,56,255);" translate>Wait After</div>
						<div class="part" id="GcodeAfter" style="background-color:rgba(18,143,149,255);" translate>Gcode After</div>
						<div class="part" id="MoveToWait" style="background-color:rgba(146,153,196,255);" translate>Lift</div>
						<div class="part" id="WaitAfterLift" style="background-color:rgba(158,142,87,255);" translate>Lift Wait</div>
					</div>
				</div>
				<div class="panel-heading printing-obj cont">
					<h3 class="panel-title">
						<div class="controls">
							<a class="ask printing-obj" href="/printer/stop" data-ask="stop-confirm"><span class="glyphicon glyphicon-stop text-danger"></span></a>
							<a class="ask pause-obj" href="/printer/stop" data-ask="stop-confirm"><span class="glyphicon glyphicon-stop text-danger"></span></a>
							<a class="pause-obj" href="/printer/unpause"><span class="glyphicon glyphicon-play text-success"></span></a>
							<a class="printing-obj" href="/printer/pause"><span class="glyphicon glyphicon-pause text-warning"></span></a>
							<a class="ask resume-obj" href="/printer/resume" data-ask="resume-confirm"><span class="glyphicon glyphicon-play text-warning"></span></a>
						</div>
						&nbsp;
					</h3>
				</div>				
			</div>
		</div>
	</div>
</div>
<div class="row">
	<div class="col-md-12">
	</div>
</div>

<div class="row">
	<div class="col-md-6">
		<div class="printing-obj">
			{% if autoShutdown %}
			<a class="btn btn-success" href="/printer/auto-shutdown/disable" alt="Disable shutdown after job completion"
			 translate>Disable Auto Shutdown</a>
			{% else %}
			<a class="btn btn-warning" href="/printer/auto-shutdown/enable" alt="Enable shutdown after job completion" translate>Enable
				Auto Shutdown</a>
			{% endif %}
		</div>
		<div class="idle-obj">
			{% if cast==false %}
			<a class="btn btn-success ask" href="/printer/cast" data-ask="display-confirm" translate>Start Display</a>
			&nbsp; &nbsp; &nbsp;
			{% endif %}

			{% if projectorPowerCycle==1 %}
			<a class="ajax btn btn-warning" href="/projector/off" name="type" data-confirm="projectoroff-confirm" translate>Projector
				Off</a>
			&nbsp; &nbsp; &nbsp;
			{% endif %}

		</div>
		<div id="camera">
			<a class="btn btn-success" href="/camera/take" translate>Take Photo</a>
		</div>
		<translate class="hide" id="stop-confirm">Are you sure you want to stop printing? It will stop after the current
			layer is completed. If you want to abort the current layer, go to the `Setup` page, click on `Tools` tab and click
			the `Force Stop` button.</translate>
		<translate class="hide" id="poweroff-confirm">Are you sure you want to power off the printer?</translate>
		<translate class="hide" id="projectoroff-confirm">Are you sure you want to power off the projector?</translate>
		<translate class="hide" id="display-confirm">Are you sure you want to start the display? It will automatically select
			the second display.</translate>
		<translate class="hide" id="restart-confirm">Are you sure you want to restart the printer?</translate>
		<translate class="hide" id="resume-confirm">Are you sure you want to resume the previous print?</translate>
		{{ buttonsView(buttons,"/") }}
	</div>
	<div class="col-md-6">
		{% if os=="linux" %}
		<table id="stat">
			<tr>
				<td width="60px" translate>CPU</td>
				<td width="40px" id="proc">{{stat.Proc}}</td>
				<td width="60px" translate>Proc</td>
				<td width="40px" id="proc_numb">{{stat.ProcNumb}}</td>
				<td width="60px" translate>Temp</td>
				<td width="40px" id="temp">{{stat.Temp}}</td>
			</tr>
			<tr>
				<td colspan=2 id="proc_chart" class="spark"><canvas></canvas></td>
				<td colspan=2 id="proc_numb_chart" class="spark"><canvas></canvas></td>
				<td colspan=2 id="temp_chart" class="spark"><canvas></canvas></td>
			</tr>
			<tr>
				<td translate>Disk</td>
				<td id="disk">{{stat.Disk}}</td>
				<td translate>Memory</td>
				<td id="mem">{{stat.Mem}}</td>
				<td translate>Uptime</td>
				<td id="uptime">{{stat.Up}}</td>
			</tr>
			<tr>
				<td colspan=2 id="disk_chart" class="spark"><canvas></canvas></td>
				<td colspan=2 id="mem_chart" class="spark"><canvas></canvas></td>
				<td colspan=2 id="" class="spark"><canvas></canvas></td>
			</tr>
		</table>
		{% endif %}
	</div>
</div>
<h1>
	<translate>Application Log</translate> <a id="toggle_log" class="label label-default">
		<span class="glyphicon glyphicon-eye-open"></span> / <span class="glyphicon glyphicon-eye-close"></span></a>
</h1>
<div id="console_wrapper">
	<div id="console">
		<table class="search_target table table-striped table-hover">
			<tr>
				<th translate>Level</th>
				<th translate>Layer</th>
				<th translate>Time</th>
				<th translate>Module</th>
				<th translate>Details</th>
			</tr>
		</table>
	</div>
</div>
<br>

<div class="shadow" id="photo_wrapper">	
	<div class="image_enlarge embed-responsive-item"></div>
</div>

<div class="row nanodlp-content">
</div>
</div>
{% endblock %}