<!--
	Description: System design
	Copyright (c) 2016 by Cisco Systems, Inc.
	All rights reserved.
	-->
<div ng-controller="SystemCtrl" ng-init="init()">
	<div class="pageContent">
		<ul kendo-panel-bar="wssiPanel" class="panelbar"  id="myTabSys" ng-click="tabTog()">
			<li class="k-state-active">
				<span class="panelbar__header panel-gradient-blue clearfix">
					<div class="panelbar__open-icon">
						<i class="icon-chevron" name="wssiArrow"></i>
					</div>
					<div class="panelbar__title">
						{{'system_title' | translate}}
					</div>
				</span>
				<div>
					<div>
						<div class="well">
							<form name="timeSettingsForm" kendo-validator="systemValidator"
								  k-options="systemvalidations">
								<div class="row form-group">
									<div class="col-sm-3 col-sm-offset-2 webui-centerpanel-label">
										<span class="label">{{'system_current_date' | translate}}</span>
									</div>
									<div class="col-sm-5">
										<span class="label" ng-model="systemModel.currentDate">{{currentdate}}</span>
									</div>
								</div>

								<div class="row form-group">
									<div class="col-sm-3 col-sm-offset-2 webui-centerpanel-label">
										<span class="label">{{'system_time_source' | translate}}</span>
									</div>
									<div class="col-sm-5">
										<span class="label" ng-model="systemModel.timeSource">{{timesource}}</span>
									</div>
								</div>

								<div class="row form-group">
									<div class="col-sm-3 col-sm-offset-2 webui-centerpanel-label">
										<span class="label">{{'system_set_date' | translate}}</span>
									</div>
									<div class="col-sm-5">
										<input id="date" ng-change="disableApplyButton = false"
											   ng-model="systemModel.setDate" required
											   data-required-msg="{{'system_date_req_msg' | translate}}" />
									</div>
								</div>
								<div class="row form-group">
									<div class="col-sm-3 col-sm-offset-2 webui-centerpanel-label">
										<span class="label">{{'system_set_time' | translate}}</span>
									</div>
									<div class="col-sm-5">
										<input id="time" ng-change="disableApplyButton = false"
											   ng-model="systemModel.setTime" required
											   data-required-msg="{{'system_time_req_msg' | translate}}" />
									</div>
								</div>
								<div class="row form-group">
									<div class="col-sm-3 col-sm-offset-2 webui-centerpanel-label">
										<span class="label">{{'system_set_timezone' | translate}}</span>
									</div>
									<div class="col-sm-3">
										<select kendo-drop-down-list="Select"
												k-data-text-field="'timeZoneText'"
												k-data-value-field="'timeZoneValue'"
												k-data-source="timeZoneNameOptions"
												ng-model="systemModel.settimezoneName" id="settimezoneName"
												name="settimezoneName" ng-change="disableApplyButton = false"></select>
									</div>
								</div>
								<div class="row form-group">
									<div class="col-sm-3 col-sm-offset-2 webui-centerpanel-label">
						<span class="label">{{'system_set_offset_hours' |
							translate}}</span>
									</div>
									<div class="col-sm-3">
										<select kendo-drop-down-list="OffsetHours"
												ng-model="systemModel.setOffsetHours"
												k-data-source="offsetHoursDataSource"
												k-data-text-field="'offsetHoursText'"
												k-data-value-field="'offsetHoursValue'"
												ng-change="disableApplyButton = false"></select>
										<tooltip helptext="{{'help_time_set_offset_hours' | translate}}" position="top"></tooltip>
									</div>
								</div>
								<div class="row form-group">
									<div class="col-sm-3 col-sm-offset-2 webui-centerpanel-label">
						<span class="label">{{'system_set_offset_minutes' |
							translate}}</span>
									</div>
									<div class="col-sm-3">
										<select kendo-drop-down-list="OffsetMinutes"
												ng-model="systemModel.setOffsetMinutes"
												k-data-source="offsetMinutesDataSource"
												k-data-text-field="'offsetMinutesText'"
												k-data-value-field="'offsetMinutesValue'"
												ng-change="disableApplyButton = false"></select>
									</div>
								</div>
							</form>
						</div>
					</div>
					<div class="row form-group">
						<div class="col-sm-5 col-sm-offset-5">
							<button kendo-button="applyPeerBtn" class="btn btn-primary pl-apply"
									ng-click="apply()" ng-disabled="disableApplyButton">
								{{'com_apply' | translate}}</button>
							<button kendo-button="cancelPeerBtn" class="btn btn-primary pl-cancel"
									ng-click="cancel()">{{'com_cancel' | translate}}</button>
						</div>
					</div>
				</div>
			</li>
			<li>
				<span class="panelbar__header panel-gradient-blue clearfix">
					<div class="panelbar__open-icon">
						<i class="icon-chevron" name="wssiArrow"></i>
					</div>
					<div class="panelbar__title">
						{{'ntp_server' | translate}}
					</div>
				</span>
				<div>
					<div kendo-grid="ntpGrid" id="ntpGrid" name="ntpGrid"
						 k-options="ntpGridOptions"></div>
					<div class="gridActionButtons">
						<button kendo-button="addPeerBtn" class="btn btn-primary pl-add" ng-click="addNtpRow()">
							{{'com_add' | translate}}
						</button>
						<button kendo-button="deletePeerBtn" class="btn btn-primary pl-delete" ng-disabled="ntpDelBtn" ng-click="delNtpRow()">
							{{'com_delete' | translate}}
						</button>
						<div class="pull-right">
							<button kendo-button="applyPeerBtn" class="btn btn-primary pl-apply" ng-click="ntpApplyBtn()" ng-disabled="disNtpApplyBtn">
								{{'com_apply' | translate}}
							</button>
						</div>
					</div>
					<div class="editSection"  ng-show="ntpShowEditSection">
						<div class="title">
							{{'ntp_server' | translate}}
						</div>
						<form name="ntpForm" id="ntpForm" kendo-validator="ntpValidator" k-options="ntpValidations">
                           <div class="row form-group" ng-show="displayHostnameType">
								<div class="col-sm-6 fieldinput-right">
									<span class="label" for="ntpHostNameRadio">{{'ntp_host_type' | translate}}</span>
								</div>
								<div class="col-sm-6 custom-radio">
									<div class="col-sm-12 padding-left-zero">
										<input type="radio" name="ntpHostNameRadio" id="ntpHostNameRadio1" class="k-radio form-control" ng-model="ntpHostNameRadio" value="{{'ntp_word' | translate}}">
										<label class="k-radio-label" for="ntpHostNameRadio1">{{'ntp_word' | translate}}</label>
									</div>
									<div class="col-sm-12 padding-left-zero">
										<input type="radio" name="ntpHostNameRadio" id="ntpHostNameRadio2" class="k-radio form-control" ng-model="ntpHostNameRadio" value="{{'clients_ip' | translate}}">
										<label class="k-radio-label" for="ntpHostNameRadio2">{{'clients_ip' | translate}}</label>
									</div>
									<div class="col-sm-12 padding-left-zero">
										<input type="radio" name="ntpHostNameRadio" id="ntpHostNameRadio3" class="k-radio form-control" ng-model="ntpHostNameRadio" value="{{'portconfig_adv_ipv6label' | translate}}">
										<label class="k-radio-label" for="ntpHostNameRadio3">{{'portconfig_adv_ipv6label' | translate}}</label>
									</div>
								</div>
							</div>
							<div class="row form-group">
								<div class="col-sm-6 fieldinput-right">
									<span class="label pl-mandatory" for="ntpHostName">{{'portconfig_port_ipv4_host' | translate}}</span>
								</div>
								<div class="col-sm-6">
									<input class="k-textbox form-control" id="ntpHostName" name="ntpHostName" ng-model="ntpHostName"  required data-required-msg="{{'day0_wizard_hostname_req_msg' | translate}}"
										   placeholder="{{hostNamePlaceHolder}}"  data-duplicate="" data-duplicate-msg="{{'ntp_hostname_exist_msg' | translate}}" data-checkhost data-checkhost-msg="{{'day0_wizard_hostname_invalid_msg' | translate}}">
								</div>
							</div>
							<div class="row form-group" ng-show="showVRF && displayHostnameType">
								<div class="col-sm-6 fieldinput-right">
									<span class="label" for="ntpVRF">{{'ntp_vrf' | translate}}</span>
								</div>
								<div class="col-sm-6 custom-checkbox">
									<input type="checkbox" name="ntpVRF" id="ntpVRF" class="k-checkbox form-control" ng-model="ntpVRF" ng-disabled="vrfCheckbox">
									<label class="k-checkbox-label" for="ntpVRF"></label>
								</div>
							</div>
							<div class="row form-group" ng-show="showntpVRFName">
								<div class="col-sm-6 fieldinput-right">
									<span class="label" for="ntpVRFName">{{'ntp_vrf_name' | translate}}</span>
								</div>
								<div class="col-sm-6">
									<select kendo-drop-down-list="ntpVRFName"  ng-model="ntpVRFName"
											k-data-source="ntpVRFNameDataSource" id="ntpVRFName" name="ntpVRFName"
											k-data-text-field="'ntpVRFNameText'"
											k-data-value-field="'ntpVRFNameValue'">
									</select>
								</div>
							</div>
							<div class="row form-group" ng-show="showNtpSource">
								<div class="col-sm-6 fieldinput-right">
									<span class="label" for="ntpSource">{{'portconfig_general_interface' | translate}}</span>
								</div>
								<div class="col-sm-6 custom-radio">
									<div class="col-sm-12 padding-left-zero">
										<input type="radio" name="ntpSource" id="ntpSource1" class="k-radio form-control" ng-model="ntpSource" value="{{'ntp_none' | translate}}" checked>
										<label class="k-radio-label" for="ntpSource1">{{'ntp_none' | translate}}</label>
									</div>
									<div class="col-sm-12 padding-left-zero">
										<input type="radio" name="ntpSource" id="ntpSource2" class="k-radio form-control" ng-model="ntpSource" value="{{'menu_vlan' | translate}}">
										<label class="k-radio-label" for="ntpSource2">{{'menu_vlan' | translate}}</label>
									</div>
									<div class="col-sm-12 padding-left-zero">
										<input type="radio" name="ntpSource" id="ntpSource3" class="k-radio form-control" ng-model="ntpSource" value="{{'portconfig_general_interface' | translate}}">
										<label class="k-radio-label" for="ntpSource3">{{'portconfig_general_interface' | translate}}</label>
									</div>
								</div>
							</div>
							<div class="row form-group"  ng-hide="showVlan">
								<div class="col-sm-6 fieldinput-right">
									<span class="label" for="ntpVlan">{{'menu_vlan' | translate}}</span>
								</div>
								<div class="col-sm-6">
									<select kendo-drop-down-list="ntpVlan"  ng-model="ntpVlan"
											k-data-source="ntpVlanDataSource" id="ntpVlan" name="ntpVlan"
											k-data-text-field="'ntpVlanText'"
											k-data-value-field="'ntpVlanValue'"
											k-ng-delay="ntpVlan">
									</select>
								</div>
							</div>
							<div class="row form-group"  ng-hide="showInterface">
								<div class="col-sm-6 fieldinput-right">
									<span class="label" for="ntpInterface">{{'portconfig_general_interface' | translate}}</span>
								</div>
								<div class="col-sm-6">
									<select kendo-drop-down-list  
                            		ng-model="ntpInterfaceOptions"
									k-data-source="ntpInterfaceDataSource" id="ntpInterface" name="ntpInterface"
									k-data-text-field="'ntpInterfaceText'"
									k-data-value-field="'ntpInterfaceValue'"
									k-ng-delay="ntpInterfaceOptions"></select>
								</div>
							</div>
							<div class="row formActionButtons fieldinput-center">
								<button kendo-button="saveBtn" class="btn btn-primary pl-save" ng-click="saveNtpData()">
									{{'com_save' | translate}}
								</button>
								<button kendo-button="cancelBtn" class="btn btn-primary pl-cancel" ng-click="cancelNtpData();">
									{{'com_cancel' | translate}}
								</button>
							</div>
						</form>
					</div>
				</div>
			</li>
		</ul>
	</div>
</div>

