<div class="row"  ng-controller="step2Ctrl" style="margin: 0 auto;">
	<div class="col-sm-8" style="margin-bottom: 20px;" >
		<div  align="center" style="height: 450px;color:#706868;overflow-y: auto;">
			<div style="padding: 20px;">
				<div><div class="stepTitle" style="text-align:left;">{{'day0_wizard_interface_config' | translate}}</div></div>
				<form kendo-validator="basicScreenValidator"  k-options="wizardValidations">
					<div class="row">
						<div class="col-sm-3 webui-centerpanel-label">
							<span class="label labelcustom">{{'day0_wizard_interface_config_datavlan' | translate}} *</span>
						</div>
						<div class="col-sm-5 fieldinput wizardinputcustom">
							<input class="k-textbox form-control" name="dataVlan"  ng-model="dayzero.dataVlan" id="dataVlan"
								    required data-required-msg="{{'day0_wizard_datavlan_req_msg' | translate}}" min="1" max="4094"  num-only
								   data-checkvlan data-checkvlan-msg="{{'day0_wizard_datavlan_invalid_msg' | translate}}" data-range="" data-range-msg="{{'day0_wizard_datavlan_invalid_msg' | translate}}">
						</div>
					</div>
					<div class="row">
						<div class="col-sm-3 webui-centerpanel-label">
							<span class="label labelcustom">{{'day0_wizard_interface_config_vicevlan' | translate}} </span>
						</div>
						<div class="col-sm-5 fieldinput wizardinputcustom">
							<input class="k-textbox form-control" type="text" name="voiceVlan" id="voiceVlan"
								   ng-model="dayzero.voiceVlan"  id="voiceVlan" min="1" max="4094" num-only
								   data-checkvlan data-checkvlan-msg="{{'day0_wizard_voicevlan_invalid_msg' | translate}}" data-range="" data-range-msg="{{'day0_wizard_voicevlan_invalid_msg' | translate}}"/>
						</div>
					</div>
					<div class="row">
						<div class="col-sm-3 webui-centerpanel-label">
							<span class="label labelcustom">{{'day0_wizard_interface_config_access_port' | translate}} </span>
						</div>
						<div class="col-sm-5 fieldinput wizardinputcustom wizardCustomMultiSelect">
							<select kendo-multi-select  ng-model="dayzero.accessPorts"
									k-auto-close=false
									k-data-source="accessPortsDataSource" id="accessPorts" name="accessPorts"
									k-data-text-field="'accessPortsText'"
									k-data-value-field="'accessPortsValue'"
									k-options="selectOptions"
									k-value-primitive="true"
									ng-change="accessPortToolTip()"
									ng-blur="accessPortToolTipHide()"
									>
							</select>
						</div>
					</div>
					<div class="row">
						<div class="col-sm-3 webui-centerpanel-label">
							<span class="label labelcustom">{{'day0_wizard_interface_config_portfast' | translate}} </span>
						</div>
						<div class="col-sm-5 custom-checkbox">
							<input type="checkbox" id="portfast" class="k-checkbox form-control" ng-model="dayzero.portfast">
							<label class="k-checkbox-label" for="portfast"></label>
						</div>
					</div>
					<div class="row">
						<div class="col-sm-3 webui-centerpanel-label ">
							<span class="label labelcustom">{{'day0_wizard_interface_config_uplinkport' | translate}}</span>
						</div>
						<div class="col-sm-5 fieldinput wizardinputcustom wizardCustomSelect">
							<select kendo-drop-down-list="uplinkPort"  ng-model="dayzero.uplinkPort"
									k-data-source="uplinkPortDataSource" id="uplinkPort" name="uplinkPort"
									k-data-text-field="'uplinkPortText'"
									k-data-value-field="'uplinkPortValue'"
									ng-change="uplinkToolTip()"
									ng-blur="uplinkToolTipHide()">
							</select>
						</div>
					</div>
					 <!-- add event Classification config for selecon -->
					 <!-- removing this field as already selecon having this config by default -->
							<div class="row" ng-show="false">
								<div class="col-sm-3 webui-centerpanel-label">
									<span class="label ">{{'port_config_eventclassification' | translate}}</span>
								</div>
								<div class="col-sm-5 custom-checkbox">
									<input type="checkbox" id="eveClass" class="k-checkbox form-control" ng-model="dayzero.eveClassification" ng-focus="checkEveClass()"> 
									<label class="k-checkbox-label" for="eveClass"></label>				
								</div>								
							</div>					
					<!-- add perpetual PoE config for selecon-->
							<div class="row" ng-show="false">
								<div class="col-sm-3 webui-centerpanel-label">
									<span class="label ">{{'port_config_poe' | translate}}</span>
								</div>
								<div class="col-sm-5 custom-checkbox">
									<input type="checkbox" id="poe"	class="k-checkbox form-control" ng-model="dayzero.perpetualPoE" ng-focus="PoE()">
									<label class="k-checkbox-label" for="poe"></label>	
								</div>									
							</div>					
				</form>
			</div>
		</div>
	</div>
	<div class="col-sm-4" style="margin-bottom: 20px;">
		<div  align="center" style="height: 450px;color:#706868;background: #EBFAFF">
			<div  style="margin-top:10px;height:99%;">
				<div class="wizardhelpcontentheader" >
					<i class="fa fa-question-circle" style="font-size: 18px;" ng-click="openOnlineHelpWindow()" /></i> {{'day0_wizard_help_tips' | translate}}
				</div>
				<div class="descriptionhelp">
					<div ng-show="interConfigToolTip">{{'dayzero_wizard_inter_con_def_tip' | translate}}</div>
					<div ng-show="dataVlanTip">{{'help_day0_data_VLAN' | translate}}</div>
					<div ng-show="voiceVlanTip">{{'help_day0_voice_VLAN' | translate}}</div>
					<div ng-show="accessPortsTip">{{'help_day0_access_ports' | translate}}</div>
					<div ng-show="portfastTip">{{'help_day0_portfast_enable' | translate}}</div>
					<div ng-show="uplinkPortTip">{{'help_day0_uplink_port' | translate}}</div>
					<div ng-show="eveClassTip">{{'help_port_config_eventclassification' | translate}}</div>
					<div ng-show="poeTip">{{'help_port_config_poe' | translate}}</div>
				</div>
			</div>
		</div>
	</div>
</div>
