{% extends 'base.html' %}
{% load static %}

{% block Application_CSS_File %}
<link rel="stylesheet" type="text/css" href="{% static 'css/TimeSetting.css' %}">
{% endblock %}

{% block Application_JS_File %}
<script src="{% static 'js/TimeSetting.h.js' %}"></script>
<script src="{% static 'js/TimeSetting.jpp.js' %}"></script>
<script src="{% static 'js/TimeSetting.Click.js' %}"></script>
{% endblock %}

<!-- 上方內容 -->
{% block Main_Top-General %}
{% endblock %}

<!-- 當前網頁路徑 -->
{% block Main_Top-Path %}
{% endblock %}

<!-- 左方列表-->
{% block Main_Left-List %}
    {% include 'LeftList_SystemSetting.html' %}
{% endblock %}

<!-- 中央內容 -->
{% block Main_Center-Content %}
	<br>
	<!--日期顯示-->
	{{calendar}}
	<!--時間顯示-->
	<div class="Form" style="width:100%">
		<div id="CalendarTime" class="Row">
			<div class="LeftColumn" style="height:50px;">{{ lang.TimeSetting.CurrentTime }}</div>
        	<div class="RightColumn">
	            <input class="Text" style="width:50px" type="text" readonly="readonly"/><span class="Span">:</span>
	            <input class="Text" style="width:50px" type="text" readonly="readonly"/><span class="Span">:</span>
	            <input class="Text" style="width:50px" type="text" readonly="readonly"/>
        	</div>
		</div>
		<div class="Row">
			<div class="LeftColumn" style="height:50px;">Current time zone</div>
        	<div class="RightColumn" style="width:70%">
        		<input class="Text" style="width:210px" type="text" id="CurrentTimezone" readonly="readonly"/>
        	</div>
		</div>
	</div>

	<div class="FormTitle">{{ lang.TimeSetting.PcTimeSync }}</div>
	<div class="Form" style="width:100%">
		<!--日期-->
		<div class="Row">
			<div class="LeftColumn" style="height:50px;">{{ lang.TimeSetting.Date }}</div>
        	<div class="RightColumn" style="width:70%">
        		<input class="Text" style="width:50px" type="text" readonly="readonly"/><span class="Span">/</span>
				<input class="Text" style="width:50px" type="text" readonly="readonly"/><span class="Span">/</span>
				<input class="Text" style="width:50px" type="text" readonly="readonly"/>
				<div class="Message" style="width: 30%;float: left;padding-left: 5px">{{ lang.TimeSetting.NoEmpty }}</div>
        	</div>
		</div>
		<!--時間-->
		<div class="Row">
			<div class="LeftColumn" style="height:50px;">{{ lang.TimeSetting.Time }}</div>
        	<div class="RightColumn" style="width:70%">
				<input class="Text" style="width:50px" type="text" readonly="readonly"/><span class="Span">:</span>
				<input class="Text" style="width:50px" type="text" readonly="readonly"/><span class="Span">:</span>
				<input class="Text" style="width:50px" type="text" readonly="readonly"/>
				<div class="Message" style="width: 30%;float: left;padding-left: 5px">{{ lang.TimeSetting.NoEmpty }}</div>
			</div>
		</div>
        <!--時區-->
		<div class="Row">
			<div class="LeftColumn" style="height:50px;">{{ lang.TimeSetting.TimeZone }}</div>
        	<div class="RightColumn" style="width:70%">
        		<select class="Select" style="width:200px">
				<!--Africa-->
				<option disabled="disabled">----------Africa----------</option>
				<option value="Africa/Cairo">Cairo</option>
				<!--America-->
				<option disabled="disabled">----------America----------</option>
				<option value="America/Anchorage">Anchorage</option>
				<option value="America/Chicago">Chicago</option>
				<option value="America/Los_Angeles">Los_Angeles</option>
				<option value="America/Sao_Paulo">Sao_Paulo</option>
				<option value="America/Caracas">Caracas</option>
				<option value="America/Denver">Denver</option>
				<option value="America/New_York">New_York</option>
				<!--Asia-->
				<option disabled="disabled">----------Asia----------</option>
				<option value="Asia/Dhaka">Dhaka</option>
				<option value="Asia/Dubai">Dubai</option>
				<option value="Asia/Hong_Kong">Hong_Kong</option>
				<option value="Asia/Taipei">Taipei</option>
				<option value="Asia/Karachi">Karachi</option>
				<option value="Asia/Tokyo">Tokyo</option>
				<option value="Asia/Kolkata">Kolkata</option>
				<!--Australia-->
				<option disabled="disabled">----------Australia----------</option>
				<option value="Australia/Adelaide">Adelaide</option>
				<option value="Australia/Brisbane">Brisbane</option>
				<option value="Australia/Darwin">Darwin</option>
				<option value="Australia/Sydney">Sydney</option>
				<!--Pacific-->
				<option disabled="disabled">----------Pacific----------</option>
				<option value="Pacific/Honolulu">Honolulu</option>
				<option value="Pacific/Noumea">Noumea</option>
				<!--Europe-->
				<option disabled="disabled">----------Europe----------</option>
				<option value="Europe/London">London</option>
				<option value="Europe/Moscow">Moscow</option>
				<option value="Europe/Paris">Paris</option>
				<!--Etc-->
				<option disabled="disabled">----------Etc----------</option>
				<option value="Etc/GMT">GMT</option>
				<option value="Etc/GMT+12">GMT+12</option>
				<option value="Etc/GMT+6">GMT+6</option>
				<option value="Etc/GMT-1">GMT-1</option>
				<option value="Etc/GMT-14">GMT-14</option>
				<option value="Etc/GMT-6">GMT-6</option>
				<option value="Etc/Greenwich">Greenwich</option>
				<option value="Etc/GMT+0">GMT+0</option>
				<option value="Etc/GMT+2">GMT+2</option>
				<option value="Etc/GMT+7">GMT+7</option>
				<option value="Etc/GMT-10">GMT-10</option>
				<option value="Etc/GMT-2">GMT-2</option>
				<option value="Etc/GMT-7">GMT-7</option>
				<option value="Etc/UCT">UCT</option>
				<option value="Etc/GMT+1">GMT+1</option>
				<option value="Etc/GMT+3">GMT+3</option>
				<option value="Etc/GMT+8">GMT+8</option>
				<option value="Etc/GMT-11">GMT-11</option>
				<option value="Etc/GMT-3">GMT-3</option>
				<option value="Etc/GMT-8">GMT-8</option>
				<option value="Etc/UTC">UTC</option>
				<option value="Etc/GMT+10">GMT+10</option>
				<option value="Etc/GMT+4">GMT+4</option>
				<option value="Etc/GMT+9">GMT+9</option>
				<option value="Etc/GMT-12">GMT-12</option>
				<option value="Etc/GMT-4">GMT-4</option>
				<option value="Etc/GMT-9">GMT-9</option>
				<option value="Etc/Universal">Universal</option>
				<option value="Etc/GMT+11">GMT+11</option>
				<option value="Etc/GMT+5">GMT+5</option>
				<option value="Etc/GMT-0">GMT-0</option>
				<option value="Etc/GMT-13">GMT-13</option>
				<option value="Etc/GMT-5">GMT-5</option>
				<option value="Etc/GMT0">GMT0</option>
				<option value="Etc/Zulu">Zulu</option>
				</select>
			</div>
		</div>
		<div class="Row">
			<div class="LeftColumn" style="height:50px;"></div>
        	<div class="RightColumn" style="width:70%">
				<input class="Button" style="float:left;" type="button" value="{{ lang.TimeSetting.SaveButton }}" onclick="DesktopTimeSync_click(this)"/>
				<div class="Message" style="color:#227700;float: left;">{{ lang.TimeSetting.SaveSuccess }}</div>
                <div class="Message" style="color:#FF0000;float: left;">{{ lang.TimeSetting.SaveFailed }}</div>
                <div class="Message" style="color:#FF0000;float: left;">{{ lang.TimeSetting.CheckFormat }}</div>
			</div>
        </div>
	</div>

	<div class="FormTitle">{{ lang.TimeSetting.ManualTimeAdjustment }}</div>
	<div class="Form" style="width:100%">
		<!--日期-->
		<div class="Row">
			<div class="LeftColumn" style="height:50px;">{{ lang.TimeSetting.Date }}</div>
        	<div class="RightColumn" style="width:70%">
        		<input class="Text" type="text" id="datepicker" style="width: 210px" />
        		<div class="Message" style="width: 30%;float: left;padding-left: 5px">{{ lang.TimeSetting.NoEmpty }}</div>
        	</div>
		</div>
		<!--時間-->
		<div class="Row">
			<div class="LeftColumn" style="height:50px;">{{ lang.TimeSetting.Time }}</div>
        	<div class="RightColumn" style="width:70%">
        		<!--
				<input class="Text" style="width:50px" type="text"/><span class="Span">:</span>
				<input class="Text" style="width:50px" type="text"/><span class="Span">:</span>
				<input class="Text" style="width:50px" type="text"/>
				-->
				<select class="Select" style="width:60px" id="hourSelect"></select>
			    <span class="Span">:</span>

			    <select class="Select" style="width:60px" id="minuteSelect"></select>
			    <span class="Span">:</span>

			    <select class="Select" style="width:60px" id="secondSelect"></select>
				<div class="Message" style="width: 30%;float: left;padding-left: 5px">{{ lang.TimeSetting.NoEmpty }}</div>
			</div>
		</div>
		<!--時區-->
		<div class="Row">
			<div class="LeftColumn" style="height:50px;">{{ lang.TimeSetting.TimeZone }}</div>
        	<div class="RightColumn" style="width:70%">
        		<select class="Select" style="width:200px">
				<!--Africa-->
				<option disabled="disabled">----------Africa----------</option>
				<option value="Africa/Cairo">Cairo</option>
				<!--America-->
				<option disabled="disabled">----------America----------</option>
				<option value="America/Anchorage">Anchorage</option>
				<option value="America/Chicago">Chicago</option>
				<option value="America/Los_Angeles">Los_Angeles</option>
				<option value="America/Sao_Paulo">Sao_Paulo</option>
				<option value="America/Caracas">Caracas</option>
				<option value="America/Denver">Denver</option>
				<option value="America/New_York">New_York</option>
				<!--Asia-->
				<option disabled="disabled">----------Asia----------</option>
				<option value="Asia/Dhaka">Dhaka</option>
				<option value="Asia/Dubai">Dubai</option>
				<option value="Asia/Hong_Kong">Hong_Kong</option>
				<option value="Asia/Taipei">Taipei</option>
				<option value="Asia/Karachi">Karachi</option>
				<option value="Asia/Tokyo">Tokyo</option>
				<option value="Asia/Kolkata">Kolkata</option>
				<!--Australia-->
				<option disabled="disabled">----------Australia----------</option>
				<option value="Australia/Adelaide">Adelaide</option>
				<option value="Australia/Brisbane">Brisbane</option>
				<option value="Australia/Darwin">Darwin</option>
				<option value="Australia/Sydney">Sydney</option>
				<!--Pacific-->
				<option disabled="disabled">----------Pacific----------</option>
				<option value="Pacific/Honolulu">Honolulu</option>
				<option value="Pacific/Noumea">Noumea</option>
				<!--Europe-->
				<option disabled="disabled">----------Europe----------</option>
				<option value="Europe/London">London</option>
				<option value="Europe/Moscow">Moscow</option>
				<option value="Europe/Paris">Paris</option>
				<!--Etc-->
				<option disabled="disabled">----------Etc----------</option>
				<option value="Etc/GMT">GMT</option>
				<option value="Etc/GMT+12">GMT+12</option>
				<option value="Etc/GMT+6">GMT+6</option>
				<option value="Etc/GMT-1">GMT-1</option>
				<option value="Etc/GMT-14">GMT-14</option>
				<option value="Etc/GMT-6">GMT-6</option>
				<option value="Etc/Greenwich">Greenwich</option>
				<option value="Etc/GMT+0">GMT+0</option>
				<option value="Etc/GMT+2">GMT+2</option>
				<option value="Etc/GMT+7">GMT+7</option>
				<option value="Etc/GMT-10">GMT-10</option>
				<option value="Etc/GMT-2">GMT-2</option>
				<option value="Etc/GMT-7">GMT-7</option>
				<option value="Etc/UCT">UCT</option>
				<option value="Etc/GMT+1">GMT+1</option>
				<option value="Etc/GMT+3">GMT+3</option>
				<option value="Etc/GMT+8">GMT+8</option>
				<option value="Etc/GMT-11">GMT-11</option>
				<option value="Etc/GMT-3">GMT-3</option>
				<option value="Etc/GMT-8">GMT-8</option>
				<option value="Etc/UTC">UTC</option>
				<option value="Etc/GMT+10">GMT+10</option>
				<option value="Etc/GMT+4">GMT+4</option>
				<option value="Etc/GMT+9">GMT+9</option>
				<option value="Etc/GMT-12">GMT-12</option>
				<option value="Etc/GMT-4">GMT-4</option>
				<option value="Etc/GMT-9">GMT-9</option>
				<option value="Etc/Universal">Universal</option>
				<option value="Etc/GMT+11">GMT+11</option>
				<option value="Etc/GMT+5">GMT+5</option>
				<option value="Etc/GMT-0">GMT-0</option>
				<option value="Etc/GMT-13">GMT-13</option>
				<option value="Etc/GMT-5">GMT-5</option>
				<option value="Etc/GMT0">GMT0</option>
				<option value="Etc/Zulu">Zulu</option>
				</select>
			</div>
		</div>
		<div class="Row">
			<div class="LeftColumn" style="height:50px;"></div>
        	<div class="RightColumn" style="width:70%">
				<input class="Button" style="float:left;" type="button" value="{{ lang.TimeSetting.SaveButton }}" onclick="ManualCalibration_click(this)"/>
				<div class="Message" style="color:#227700;float: left;">{{ lang.TimeSetting.SaveSuccess }}</div>
                <div class="Message" style="color:#FF0000;float: left;">{{ lang.TimeSetting.SaveFailed }}</div>
                <div class="Message" style="color:#FF0000;float: left;">{{ lang.TimeSetting.CheckFormat }}</div>
			</div>
        </div>
	</div>

	<!--NTP校時-->
	<div class="FormTitle">{{ lang.TimeSetting.NTPTimeSynchronization }}</div>
	<div class="Form" style="width:100%">
		<div class="Row">
			<div class="LeftColumn" style="height:50px;">NTP service status</div>
        	<div class="RightColumn" style="width:70%">
        		{% if NtpServiceStatus == "active" %}
        			<div style="color:#227700;float: left;font-weight:bold">active</div>
        		{% else %}
        			<div style="color:#FF0000;float: left;font-weight:bold">inactive</div>
        		{% endif %}
        	</div>
		</div>
		<div class="Row">
			<div class="LeftColumn" style="height:50px;"></div>
        	<div class="RightColumn" style="width:70%">
				<label style="display: inline-block; margin-right: 20px; padding-top: 10px">
					<input type="radio" name="NtpMode" value="SelectNtpServer" onclick="SelectNtpServer_click(this)" checked> NTP server
				</label>
				<label style="display: inline-block; margin-right: 20px;">
					<input type="radio" name="NtpMode" value="CustomNtpServer" onclick="CustomNtpServer_click(this)">{{ lang.TimeSetting.CustomizeNTPserver }}
				</label>
			</div>
		</div>
		<!--選擇 NTP server清單-->
		<div class="Row">
			<div class="LeftColumn" style="height:50px;">NTP Server</div>
        	<div class="RightColumn" style="width:70%">
        		<select class="Select" style="width:200px">
        			<option disabled="disabled">Apple NTP server</option>
        			<option value="time.apple.com">time.apple.com</option>
        			<option value="time1.apple.com">time1.apple.com</option>
        			<option value="time2.apple.com">time2.apple.com</option>
        			<option value="time3.apple.com">time3.apple.com</option>
        			<option value="time4.apple.com">time4.apple.com</option>
        			<option value="time5.apple.com">time5.apple.com</option>
        			<option value="time6.apple.com">time6.apple.com</option>
        			<option value="time7.apple.com">time7.apple.com</option>
        			<option disabled="disabled">Facebook NTP</option>
        			<option value="time.facebook.com">time.facebook.com</option>
        			<option value="time1.facebook.com">time1.facebook.com</option>
        			<option value="time2.facebook.com">time2.facebook.com</option>
        			<option value="time3.facebook.com">time3.facebook.com</option>
        			<option value="time4.facebook.com">time4.facebook.com</option>
        			<option value="time5.facebook.com">time5.facebook.com</option>
        			<option disabled="disabled">Google Public NTP</option>
        			<option value="time.google.com">time.google.com</option>
        			<option value="time1.google.com">time1.google.com</option>
        			<option value="time2.google.com">time2.google.com</option>
        			<option value="time3.google.com">time3.google.com</option>
        			<option value="time4.google.com">time4.google.com</option>
        			<option disabled="disabled">Microsoft NTP server</option>
        			<option value="time.windows.com">time.windows.com</option>
        			<option disabled="disabled">National Time and Frequency Standards Laboratory</option>
        			<option value="tick.stdtime.gov.tw">tick.stdtime.gov.tw</option>
        			<option value="tock.stdtime.gov.tw">tock.stdtime.gov.tw</option>
        			<option value="time.stdtime.gov.tw">time.stdtime.gov.tw</option>
        			<option value="clock.stdtime.gov.tw">clock.stdtime.gov.tw</option>
        			<option value="watch.stdtime.gov.tw">watch.stdtime.gov.tw</option>
        		</select>
        	</div>
		</div>
		<!--手動設定 NTP server-->
		<div class="Row" style="display: none;">
			<div class="LeftColumn" style="height:50px;">NTP Server</div>
        	<div class="RightColumn" style="width:70%">
        		<input class="Text" type="text" value="">
        	</div>
		</div>
		<!--時區-->
		<div class="Row">
			<div class="LeftColumn" style="height:50px;">{{ lang.TimeSetting.TimeZone }}</div>
        	<div class="RightColumn" style="width:70%">
        		<select class="Select" style="width:200px">
				<!--Africa-->
				<option disabled="disabled">----------Africa----------</option>
				<option value="Africa/Cairo">Cairo</option>
				<!--America-->
				<option disabled="disabled">----------America----------</option>
				<option value="America/Anchorage">Anchorage</option>
				<option value="America/Chicago">Chicago</option>
				<option value="America/Los_Angeles">Los_Angeles</option>
				<option value="America/Sao_Paulo">Sao_Paulo</option>
				<option value="America/Caracas">Caracas</option>
				<option value="America/Denver">Denver</option>
				<option value="America/New_York">New_York</option>
				<!--Asia-->
				<option disabled="disabled">----------Asia----------</option>
				<option value="Asia/Dhaka">Dhaka</option>
				<option value="Asia/Dubai">Dubai</option>
				<option value="Asia/Hong_Kong">Hong_Kong</option>
				<option value="Asia/Taipei">Taipei</option>
				<option value="Asia/Karachi">Karachi</option>
				<option value="Asia/Tokyo">Tokyo</option>
				<option value="Asia/Kolkata">Kolkata</option>
				<!--Australia-->
				<option disabled="disabled">----------Australia----------</option>
				<option value="Australia/Adelaide">Adelaide</option>
				<option value="Australia/Brisbane">Brisbane</option>
				<option value="Australia/Darwin">Darwin</option>
				<option value="Australia/Sydney">Sydney</option>
				<!--Pacific-->
				<option disabled="disabled">----------Pacific----------</option>
				<option value="Pacific/Honolulu">Honolulu</option>
				<option value="Pacific/Noumea">Noumea</option>
				<!--Europe-->
				<option disabled="disabled">----------Europe----------</option>
				<option value="Europe/London">London</option>
				<option value="Europe/Moscow">Moscow</option>
				<option value="Europe/Paris">Paris</option>
				<!--Etc-->
				<option disabled="disabled">----------Etc----------</option>
				<option value="Etc/GMT">GMT</option>
				<option value="Etc/GMT+12">GMT+12</option>
				<option value="Etc/GMT+6">GMT+6</option>
				<option value="Etc/GMT-1">GMT-1</option>
				<option value="Etc/GMT-14">GMT-14</option>
				<option value="Etc/GMT-6">GMT-6</option>
				<option value="Etc/Greenwich">Greenwich</option>
				<option value="Etc/GMT+0">GMT+0</option>
				<option value="Etc/GMT+2">GMT+2</option>
				<option value="Etc/GMT+7">GMT+7</option>
				<option value="Etc/GMT-10">GMT-10</option>
				<option value="Etc/GMT-2">GMT-2</option>
				<option value="Etc/GMT-7">GMT-7</option>
				<option value="Etc/UCT">UCT</option>
				<option value="Etc/GMT+1">GMT+1</option>
				<option value="Etc/GMT+3">GMT+3</option>
				<option value="Etc/GMT+8">GMT+8</option>
				<option value="Etc/GMT-11">GMT-11</option>
				<option value="Etc/GMT-3">GMT-3</option>
				<option value="Etc/GMT-8">GMT-8</option>
				<option value="Etc/UTC">UTC</option>
				<option value="Etc/GMT+10">GMT+10</option>
				<option value="Etc/GMT+4">GMT+4</option>
				<option value="Etc/GMT+9">GMT+9</option>
				<option value="Etc/GMT-12">GMT-12</option>
				<option value="Etc/GMT-4">GMT-4</option>
				<option value="Etc/GMT-9">GMT-9</option>
				<option value="Etc/Universal">Universal</option>
				<option value="Etc/GMT+11">GMT+11</option>
				<option value="Etc/GMT+5">GMT+5</option>
				<option value="Etc/GMT-0">GMT-0</option>
				<option value="Etc/GMT-13">GMT-13</option>
				<option value="Etc/GMT-5">GMT-5</option>
				<option value="Etc/GMT0">GMT0</option>
				<option value="Etc/Zulu">Zulu</option>
				</select>
			</div>
		</div>
		<div class="Row">
			<div class="LeftColumn" style="height:50px;">{{ lang.TimeSetting.SyncInterval }}</div>
        	<div class="RightColumn" style="width:70%">
				<select class="Select" id="syncIntervalNumber" style="width:100px">
				</select>
				<select class="Select" id="syncIntervalUnit" style="width:100px">
					<option value="1">{{ lang.TimeSetting.Seconds }}</option>
					<option value="60">{{ lang.TimeSetting.Minutes }}</option>
					<option value="3600">{{ lang.TimeSetting.Hours }}</option>
				</select>
			</div>
        </div>
		<!--儲存按鈕-->
		<div class="Row">
			<div class="LeftColumn" style="height:50px;"></div>
        	<div class="RightColumn" style="width:70%">
				<input class="Button" style="float:left;" type="button" value="{{ lang.TimeSetting.SaveButton }}" onclick="SetNtpServer_click(this)"/>
				<div class="Message" style="color:#227700;float: left;">{{ lang.TimeSetting.SaveSuccess }}</div>
                <div class="Message" style="color:#FF0000;float: left;">{{ lang.TimeSetting.SaveFailed }}</div>
                <div class="Message" style="color:#FF0000;float: left;">{{ lang.TimeSetting.CheckFormat }}</div>
			</div>
        </div>
	</div>
{% endblock %}

<!-- 下方資訊-->
{% block Main_Bottom-Information %}
{% endblock %}