<div>
	<!--
	Description: HTTP and SNMP Page design
	Copyright (c) 2016 by Cisco Systems, Inc.
	All rights reserved.
	-->
	<div class="pageContent">
		<ul kendo-panel-bar="wssiPanel" class="panelbar"  id="myTabStrip" 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">
						{{'menu_http' | translate}}
					</div> </span>					
				<div>
<!-- Http/https page code -->					
	<div class="pull-right">
		<button kendo-button="applyBtn" class="btn btn-primary pl-apply" ng-click="httpApply()" ng-disabled="disableApplyhttpBtn">
			{{'com_apply' | translate}}
		</button>
		<button kendo-button="cancelBtn" class="btn btn-primary pl-cancel" ng-click="resethttpFunction()">
			{{'com_cancel' | translate}}
		</button>
	</div>
			<div class="container">
				<div class="row well">
					<div class="col-lg-12 col-lg-offset-1">
						<form name="httpConfig" id="httpConfig" kendo-validator="httpValidator"
						k-options="httpValidations">
								<div class="webui-centerpanel-subtitle col-sm-9">
									{{'management_http_access_config' | translate}}
								</div>
								<div class="row form-group">
									<div class="col-sm-4 webui-centerpanel-label">
										<span class="label">{{'management_http_access' | translate}}</span>
									</div>
									<div class="col-sm-3">
										<toggle-button button-options="{{'com_enable' | translate}},{{'com_disable' | translate}}"
										ng-model="http.access" ng-change="enableApplyhttpBtn()"></toggle-button>
									</div>
								</div>
								<div class="row form-group" ng-hide="http.access == 'Disable'">
									<div class="col-sm-4 webui-centerpanel-label">
										<span class="label">{{'management_http_port' | translate}}</span>
									</div>
									<div class="col-sm-3">
										<input kendo-masked-text-box ng-model="http.port"
										ng-disabled="http.access == 'Disable'" name="httpPort"
										id="httpPort" class="form-control"
										ng-model="http.port"
										data-httpvalidports="65535" 
										data-httpvalidports-msg="{{'management_http_port_valid' | translate}}" ng-keyup="enableApplyhttpBtn()">
										<tooltip helptext="{{'help_HTTP_port' | translate}}" position="top"></tooltip>
									</div>
								</div>
								<div class="row form-group">
									<div class="col-sm-4 webui-centerpanel-label">
										<span class="label">{{'management_https_access' | translate}}</span>
									</div>
									<div class="col-sm-3">
										<toggle-button button-options="{{'com_enable' | translate}},{{'com_disable' | translate}}"
										ng-model="https.access" ng-change="enableApplyhttpBtn()"></toggle-button>
									</div>
								</div>
								<div class="row form-group" ng-hide="https.access == 'Disable'">
									<div class="col-sm-4 webui-centerpanel-label">
										<span class="label">{{'management_https_port' | translate}}</span>
									</div>
									<div class="col-sm-3">
										<input kendo-masked-text-box ng-model="https.port"
										ng-disabled="https.access == 'Disable'" name="httpsPort"
										id="httpsPort" class="form-control"
										data-httpsvalidports="65535"
										data-httpsvalidports-msg="{{'management_https_port_valid' | translate}}"
										ng-keyup="enableApplyhttpBtn()">
										<tooltip helptext="{{'help_HTTPS_port' | translate}}" position="top"></tooltip>
									</div>
								</div>

								<div class="webui-centerpanel-subtitle col-sm-9">
									{{'management_http_trust_config' | translate}}
								</div>
								<div class="row form-group">
									<div class="col-sm-4 webui-centerpanel-label">
										<span class="label">{{'management_http_trust_enable' | translate}}</span>
									</div>
									<div class="col-sm-3">
										<span class="toggleClass">
										<toggle-button button-options="{{'com_enable' | translate}},{{'com_disable' | translate}}"
										ng-model="trustpoint.status" ng-change="enableApplyhttpBtn()"></toggle-button></span>
										<tooltip helptext="{{'help_HTTPS_enable_trustpoint' | translate}}" position="top"></tooltip>
									</div>
								</div>
								<div class="row form-group" ng-hide="trustpoint.status == 'Disable'">
									<div class="col-sm-4 webui-centerpanel-label">
										<span class="label">{{'management_http_trust_points' | translate}}</span>
									</div>
									<div class="col-sm-3 checkbox-styled">
										<select kendo-drop-down-list="httpTrustPointDropDown" name="httpTrustpoint" id="httpTrustpoint"
										ng-model="trustpoint.trustPoint"
										k-data-source="trustPoints"
										ng-change="handleTrustPoint()"></select>
									</div>
								</div>
								<div ng-if="false" class="row form-group">
									<div class="col-sm-4 webui-centerpanel-label">
										<span class="label">{{'management_http_ip_device_tracking' | translate}}</span>
									</div>
									<div class="col-sm-3">
										<toggle-button button-options="{{'com_enable' | translate}},{{'com_disable' | translate}}"
										ng-init="ip_device_tracking='Enable'"
										ng-model="ip_device_tracking"
										ng-change="enableApplyButton()"></toggle-button>
									</div>
								</div>
								<div ng-if="false" class="row form-group">
									<div class="col-sm-4 webui-centerpanel-label">
										<span class="label">{{'management_http_timeout_policy' | translate}}</span>
									</div>
									<div class="col-sm-3">
										<toggle-button button-options="Enable,Disable"
										ng-init="ip_device_tracking='Enable'"
										ng-model="ip_device_tracking"
										ng-change="enableApplyhttpBtn()"></toggle-button>
									</div>
								</div>
								<div class="webui-centerpanel-subtitle col-sm-9">
									{{'management_http_timeout_policy_config' | translate}}
								</div>
								<div class="row form-group">
									<div class="col-sm-4 webui-centerpanel-label">
										<span class="label">{{'management_http_timeout_policy' | translate}}</span>
									</div>
									<div class="col-sm-3">
										<input kendo-masked-text-box name="httpTimeout" id="httpTimeout"
										ng-model="timeoutPolicy.httpTimeout"
										class="form-control"							
										data-numericcheck
										data-numericcheck-msg="{{'management_http_timeout' | translate}}"
										data-maximum="600" data-maximum-msg="{{'management_http_timeoutsec' | translate}}"
										data-minimum="1" data-minimum-msg="{{'management_http_timeoutsec' | translate}}"
										ng-keyup="enableApplyhttpBtn()">
										<tooltip helptext="{{'help_HTTP_timeout' | translate}}" position="top"></tooltip>
									</div>
								</div>
								<div class="row form-group">
									<div class="col-sm-4 webui-centerpanel-label">
										<span class="label">{{'management_http_server_lifetime' | translate}}</span>
									</div>
									<div class="col-sm-3">
										<input kendo-masked-text-box name="httpServerLifetime"
										id="httpServerLifetime"
										ng-model="timeoutPolicy.serverLifeTime"
										class="form-control"
										data-numericcheck
										data-numericcheck-msg="{{'management_http_timeout' | translate}}"
										data-maximum="86400" data-maximum-msg="{{'management_http_lifetime' | translate}}"
										data-minimum="1" data-minimum-msg="{{'management_http_lifetime' | translate}}"
										ng-keyup="enableApplyhttpBtn()">
									</div>
								</div>
								<div class="row form-group">
									<div class="col-sm-4 webui-centerpanel-label">
										<span class="label">{{'management_http_max_request' | translate}}</span>
									</div>
									<div class="col-sm-3">
										<input kendo-masked-text-box name="maxRequest" id="maxRequest"
										ng-model="timeoutPolicy.maxRequest"
										class="form-control"
										data-numericcheck
										data-numericcheck-msg="{{'management_http_timeout' | translate}}"
										data-maximum="86400" data-maximum-msg="{{'management_http_lifetime' | translate}}"
										data-minimum="1" data-minimum-msg="{{'management_http_lifetime' | translate}}"
										ng-keyup="enableApplyhttpBtn()">

									</div>
								</div>

						</form>

					</div>
				</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">
						{{'menu_snmp' | translate}}
					</div> </span>
				
				<div>
<!-- SNMP Page code -->					
	
	<div>
		<div class="globalActionButton">
			<div class="pull-right margin-right-10" style="z-index : 1000; position: relative; margin-top: 0.7em">
				<button class="btn btn-primary " kendo-button="applyBtn" ng-click="apply()" ng-disabled="disableApplyButton">
					<span class="fa pl-apply"></span> {{'com_apply' | translate}}
				</button>
			</div>
		</div>
	</div>

	<div id="snmpTabTrip" kendo-tab-strip="snmpTabStrip" name="snmpTabStrip"
	ng-model="snmpTab">
		<ul>
			<li class="k-state-active" ng-init="snmpTab = 'General'" name="snmpGeneralTab" ng-click="disableApply()">
				{{'management_snmp_gen' | translate}}	
			</li>
			<li ng-hide="snmpModel.displayAllGrid === 'Disable' || snmpModel.status === 'Disable' " name="snmpCommunityTab" ng-click="disableApplyCommunity()">
				{{'management_snmp_community' | translate}}	
			</li>
			<li ng-hide="snmpModel.displayAllGrid === 'Disable' || snmpModel.status === 'Disable'" name="snmpUserTab" ng-click="disableApplyUser()">
				{{'management_snmp_v3user' | translate}}	
			</li>
			<li ng-hide="snmpModel.displayAllGrid === 'Disable' || snmpModel.status === 'Disable'" name="snmpHostTab" ng-click="disableApplyHost()">
				{{'management_snmp_host' | translate}}	
			</li>
		</ul>

		<div>
			<div class="well">
				<form name="snmpForm" id="snmpForm" kendo-validator="snmpValidator"
				k-options="snmpValidations" >
					<div class="row">
						<div class="row form-group">
							<div class="col-sm-4 webui-centerpanel-label">
								<span class="label">{{'management_snmp_gen_status' | translate}}</span>
							</div>
							<div class="col-sm-3">
								<span class="toggleClass">
								<toggle-button button-options="{{'com_enable' | translate}},{{'com_disable' | translate}}"
								ng-model="snmpModel.status" ng-change="enableApplybtn1()"></toggle-button></span>
								<tooltip helptext="{{'help_SNMP_status' | translate}}" position="top"></tooltip>
							</div>
						</div>

						<div class="row form-group">
							<div class="col-sm-4 webui-centerpanel-label">
								<span class="label">{{'management_snmp_gen_location' | translate}}</span>
							</div>
							<div class="col-sm-3">
								<input type="text" class="k-textbox form-control" placeholder="" name="systemLocation"
								ng-disabled="snmpModel.status === 'Disable'"
								ng-model="snmpModel.systemLocation"
								data-maximum="232"
								data-maximum-message="{{'management_snmp_location_length' | translate}}"		
								ng-keyup="enableApplybtn()"					
								/>
							</div>
						</div>

						<div class="row form-group">
							<div class="col-sm-4 webui-centerpanel-label">
								<span class="label">{{'management_snmp_gen_contact' | translate}}</span>
							</div>
							<div class="col-sm-3">
								<input type="text" class="k-textbox form-control"  name="systemContact"
								ng-disabled="snmpModel.status == 'Disable'"
								ng-model="snmpModel.systemContact"
								data-maximum="232"
								data-maximum-message="{{'management_snmp_contact_maxchar' | translate}}"
								ng-keyup="enableApplybtn()"
								/>
							</div>
						</div>

						<div class="row form-group">
							<div class="col-sm-4 webui-centerpanel-label">
								<span class="label">{{'management_snmp_gen_globaltrap' | translate}}</span>
							</div>

							<div class="col-sm-3">
								 <span class="toggleClass">
								<toggle-button button-options="{{'com_enable' | translate}},{{'com_disable' | translate}}" name="status"  id="status" ng-disabled="snmpModel.status == {{'com_disable' | translate}}"  ng-model="snmpModel.globalTrap" ng-change="enableApplybtn()"></toggle-button>
									 </span>
								<tooltip helptext="{{'help_SNMP_global_trap' | translate}}" position="top"></tooltip>
							</div>
						</div>

						<div class="row form-group">
							<div class="col-sm-4 webui-centerpanel-label">
								<span class="label">{{'management_snmp_gen_logging' | translate}}</span>
							</div>
							<div class="col-sm-3 mobility-center">
								<span>{{snmpModel.logging}}</span>
							</div>
						</div>
					</div>
				</form>
			</div>
		</div>
		<div>
			<div >
				<form kendo-validator="snmpCommunityValidator" k-options="snmpCommunityValidation">
					<div kendo-grid="communityGrid" id="communityGrid" name="communityGrid"
					k-options="communityGridOptions"
					k-data-source="communityGridDataSource"
					ng-click="rowSelected(selected,data,dataItem,columns)"
					></div>
				</form>
			</div>
		</div>
		<div>
			<div>
				<form kendo-validator="snmpV3UserValidator"
				k-options="snmpV3UsersValidations">
					<div kendo-grid="snmpUserGrid" id="snmpUserGrid" name="snmpUserGrid"
					k-options="userGridOptions"
					k-data-source="userGridDataSource"
					ng-click="rowSelected(selected,data,dataItem,columns)"
					></div>
				</form>
			</div>
		</div>
		<div>
			<div>
				<form kendo-validator="snmpHostValidator"
				k-options="snmpHostValidaiton">
					<div kendo-grid="snmpHostGrid" id="snmpHostGrid" name="snmpHostGrid"
					k-options="hostGridOptions"
					k-data-source="hostGridDataSource"
					ng-click="rowSelected(selected,data,dataItem,columns)"></div>
				</form>

			</div>
		</div>
	</div>
	<div>
		<div class="gridActionButtons">
			<span ng-show = "IsShow">
				<button kendo-button="addBtn" class="k-button btn btn-primary "
				ng-click="addBtnFunction(true)">
					<span class="fa pl-add"></span> {{'com_add' | translate}}
				</button>
				<button kendo-button="deleteBtn" class="k-button btn btn-primary"
				ng-click="deleteBtnFunction()"
				ng-disabled="enableDeleteBtn">
					<span class="fa pl-delete"></span> {{'com_delete' | translate}}
				</button> 
				<button kendo-button="cancelBtn" class="k-button btn btn-primary pull-right" name="snmpCancelButton"
				ng-click="resetBtnFunction()">
				<span class="fa pl-cancel"></span> {{'com_cancel' | translate}}
				</button>
			</span>
		</div>
	</div>
	<div kendo-notification="missingFieldNotification"></div>				
				</div>				
			</li>		
			
		</ul>
	</div>
</div>

