<!--
	Description: Port Configuration file.
	Copyright (c) 2016 by Cisco Systems, Inc.
	All rights reserved.
-->
<div>
    <div class="pageTitle">
        {{'ports_config' | translate}}
    </div>
    <div class="pageContent">
        <!-------------------------------------Insert the switch view first-------------------------------------------->
        <div ng-include="'features/common/switch/views/switchView.html'" class="portSwitchContainer"></div>
		
		<div class="txtBold" ng-if="currentPortconfig">{{'management_snmp_host_port' | translate}} : <span>{{currentPortconfig}}</span></div>
		
        <!-----------------------------------form for the ports configuration------------------------------------------>
            <div kendo-tab-strip="portsConfigTab">
                <!----------------------------------------Tab names---------------------------------------------------->
                <ul>
                    <li class="k-state-active" ng-show="true">
                        {{'portconfig_general' | translate}}
                    </li>
                    <li>
                        {{'portconfig_port' | translate}}
                    </li>
                    <li>
                        {{'portconfig_adv' | translate}}
                    </li>
                </ul>
                <!-------------------------------------------General Settings------------------------------------------>
                <div name="genSection" id="genSection">
                    <!--------------------------General Settings Form Page Container----------------------------------->
                    <form name="PortsConfigGenform" id="portsConfigGenForm" kendo-validator="portsGenValidator" k-options="portGenValidations">
                        <!-------------------------------General Settings Fields Container----------------------------->
                        <div class="">
                            <!---------------------------------------Interface----------------------------------------->
                            <div class="row form-group">
                                <div class="col-sm-6 fieldinput-right">
                                    <span class="label">{{'portconfig_general_interface' | translate }}</span>
                                </div>

                                <div class="col-sm-6">
                                    <span class="label">{{interfaceId}}</span>
                                </div>
                            </div>
                            <!------------------------------------Description------------------------------------------>
                            <div class="row form-group">
                                <div class="col-sm-6 fieldinput-right">
                                    <span class="label">{{'portconfig_general_description' | translate}} </span>
                                </div>
                                <div class="col-sm-6">
                                    <textarea class="k-textbox form-control" name="description" id="description"  ng-model="portsDescription" k-ng-delay="portsDescription"
                                              ng-change="diableGenApplyButton =diableGenCancelButton= false " data-check data-check-msg="{{'portconfig_invalid_desc' | translate}}" maxlength="200">
                                </textarea>
                                </div>
                            </div>
                            <!------------------------------------Speed------------------------------------------------>
                            <div class="row form-group">
                                <div class="col-sm-6 fieldinput-right">
                                    <span class="label ">{{'portconfig_general_speed' | translate}}</span>
                                </div>
                                <div class="col-sm-6 checkbox-styled">
                                    <select kendo-drop-down-list="SpeedDropDown" name="speed" id="speed"
                                            ng-model="portsSpeed"
                                            k-data-source="speedOptions"
                                            k-data-text-field="'speedText'"
                                            k-data-value-field="'speedValue'"
                                            k-ng-delay="portsSpeed" ng-disabled="speedDisable"
                                            ng-change="speedNegoOnChange()">
                                    </select>
									<tooltip helptext="{{'help_ports_speed' | translate}}"></tooltip>
                                </div>
                            </div>
                            <!--for auto-negotiation limit  -->
                            <div class="row form-group" ng-hide="autoNegotiationStatus=true">
                                <div class="col-sm-6 fieldinput-right">
                                    <span class="label ">{{'portconfig_auto_negotiation' | translate}}</span>
                                </div>
                                <div class="col-sm-6 checkbox-styled">
                                    <select kendo-drop-down-list="autoSpeed" name="speed" id="speed"
                                            ng-model="portsAutoSpeed"
                                            k-data-source="autoNegoLimitOptions"
                                            k-data-text-field="'speedText'"
                                            k-data-value-field="'speedValue'"
                                            k-ng-delay="portsSpeed" ng-disabled="autoNegotiation" 
                                            ng-change="diableGenApplyButton = diableGenCancelButton = false">
                                     </select>			
                                </div>
                            </div>
                            <!----------------------------------------Duplex------------------------------------------->
                            <div class="row form-group">
                                <div class="col-sm-6 fieldinput-right">
                                    <span class="label ">{{'portconfig_general_duplex' | translate}}</span>
                                </div>
                                <div class="col-sm-6 checkbox-styled">
                                    <select kendo-drop-down-list="duplexDropDown"
                                            name="duplex" id="duplex"
                                            ng-model="portsDuplex"
                                            k-data-source="duplexOptions"
                                            k-data-text-field="'duplexText'"
                                            k-data-value-field="'duplexValue'"
                                            ng-change="diableGenApplyButton= diableGenCancelButton= false" ng-disabled="duplexDisable"
                                            k-ng-delay="portsDuplex"></select>
					<tooltip helptext="{{'help_ports_duplex' | translate}}"></tooltip>
                                </div>
                            </div>
                            <!----------------------------------------Default------------------------------------------->
                            <div class="row form-group" ng-hide="defaultStatus=true">
                                <div class="col-sm-6 fieldinput-right">
                                    <span class="label ">{{'port_config_default' | translate}}</span>
                                </div>
                                <div class="col-sm-6 custom-checkbox">
                                    <input type="checkbox" name="portConfDefault" id="portConfDefault" 
                                    ng-change="diableGenApplyButton= diableGenCancelButton= false"
                                    class="k-checkbox form-control ng-pristine ng-untouched ng-valid ng-empty" ng-model="portConfDefault" ng-disabled="vrfCheckbox">
                                    <label class="k-checkbox-label" for="portConfDefault"></label>
                                </div>
                            </div>
                            <!-----------------------------------Status----------------------------------------------->
                            <div class="row form-group">
                                <div class="col-sm-6 fieldinput-right">
                                    <span class="label">{{'portconfig_general_status' | translate}}</span>
                                </div>
                                <div class="col-sm-6">
				   <span class="toggleClass">
                                     <toggle-button
                                             ng-change="diableGenApplyButton= diableGenCancelButton = false "
                                             button-options="{{'toggle_up' | translate}},{{'toggle_down' | translate}}"
                                             ng-model="portsStatus"></toggle-button>
				  </span>
				  <tooltip helptext="{{'help_ports_status' | translate}}"></tooltip>
                                </div>
                            </div>
                        </div>
                        <!----------------------------General Settings Save and Cancel button Container-------------------------------->
                        <div class="row formActionButtons fieldinput-center">
                            <!-----------------------------------------------Save------------------------------------------------------>
                            <button kendo-button="doneButton" class="btn btn-primary" ng-disabled="diableGenApplyButton" ng-click="savePortsGenConf()">
                                <span class="fa pl-apply"></span> {{'com_apply' | translate}}
                            </button>
                            <!-----------------------------------------------Cancel---------------------------------------------------->
                            <button kendo-button="cancelButton" class="btn btn-primary" ng-disabled="diableGenCancelButton" ng-click="cancelPortsGenConf()">
                                <span class="fa pl-cancel"></span> {{'com_cancel' | translate}}
                            </button>
                        </div>
                        </form>
                </div>
                <!----------------------------------------------Port Settings--------------------------------------------->
                <div name="portsSetSection" id="portsSetSection">
                    <!------------------------------------------Ports Settings Form Page Container---------------------------------------->
                    <form name="PortsConfigSetform" id="portsConfigSetForm" kendo-validator="portsSetValidator" k-options="portSetValidations">
                        <!------------------------------------------Ports Settings Fields Container---------------------------------------->
                        <div>
                            <div>
								<!------------------------------------------Port Mode---------------------------------------->
								<div class="row form-group" ng-show="visibleportMode">
									<div class="col-sm-6 fieldinput-right">
										<span class="label">{{'portconfig_port_portmode' | translate}}</span>
									</div>
									<div class="col-sm-6 " >
										<span class="toggleClass">
											<toggle-button  button-options="{{'com_switch' | translate}},{{'portconfig_port_routed' | translate}}"
															 ng-change="changePortMode()"
															 ng-model="portMode"  k-ng-delay="portMode"></toggle-button>
										</span>
									</div>
								</div>
								<div ng-show="isportMode">
                                <!-- switch mode-->
                                <div class="row form-group " >
                                    <div class="col-sm-6 fieldinput-right">
                                        <span class="label ">{{'portconfig_port_switchmode' | translate}}</span>
                                    </div>
                                    <div class="col-sm-6  checkbox-styled">
                                        <select kendo-drop-down-list 
                                                name="switchMode" id="switchMode"
                                                ng-model="switchMode"
                                                ng-change="diableSetApplyButton=diableSetCancelButton = false"
                                                k-data-source="switchModeOptions" k-data-text-field="'switchModeText'"
                                                k-data-value-field="'switchModeValue'" k-ng-delay="switchMode"></select>
                                        <tooltip helptext="{{'help_ports_switch_mode' | translate}}"></tooltip>
                                    </div>
                                </div>

                                <!-- access-->
                                <div  ng-hide="switchMode === 'trunk' ">
                                    <!-------------------------------------------Access Vlan-------------------------------------->
                                    <div class="row form-group">
                                    <div class="col-sm-6 fieldinput-right">
                                        <span class="label">{{'portconfig_port_switchmode_access' | translate}}</span>
                                    </div>
                                    <div class="col-sm-6">
                                        <input class="k-textbox"
                                               name="accessVlan" id="accessVlan"
                                               placeholder="1-4094" num-comma-hyphen-only
                                               ng-model="portsAccessVlan" k-ng-delay="portsAccessVlan"
                                               ng-change="diableSetApplyButton=diableSetCancelButton = false"
                                               data-space="" data-space-msg="{{'portconfig_invalid_vlan' | translate}}" min="1" max="4094"
                                               data-range="" data-range-msg="{{'portconfig_vlan_range' | translate}}">

                                    </div>
                                    </div>
                                <!-------------------------------------------Voice Vlan-------------------------------------->
                                    <div class="row form-group">
                                    <div class="col-sm-6 fieldinput-right">
                                        <span class="label">{{'portconfig_port_switchmode_voicevlan' | translate}}</span>
                                    </div>
                                    <div class="col-sm-6">
                                        <input class="k-textbox"
                                               name="voiceVlan" id="voiceVlan"
                                               placeholder="1-4094" num-comma-hyphen-only data-checkVlanList data-checkVlanList-msg="{{'portconfig_vlan_range' | translate}}"
                                               ng-model="portsVoiceVlan" k-ng-delay="portsVoiceVlan" data-range data-range-msg="{{'portconfig_vlan_range' | translate}}"
                                               ng-change="diableSetApplyButton=diableSetCancelButton = false"
                                               min="1" max="4094">

                                    </div>
                                    </div>
                                    </div>

                                <!-- trunk-->
                                <div ng-hide="switchMode === 'access' ">
                                    <!-------------------------------------------Allowed Vlan------------------------------------->
                                    <div class="row form-group">
                                        <div class="col-sm-6 fieldinput-right">
                                            <span class="label">{{'portconfig_port_switchmode_allowedvlan' | translate}}</span>
                                        </div>
                                        <div class="col-sm-1">
                                            <input class="col-sm-4" type="radio" name="allowedVlan"
                                                   ng-model="portsAllowedVlan" ng-change="allowdVlanOnChange()"
                                                   k-ng-delay="portsAllowedVlan" value="all"  ng-selected="portsAllowedVlan"/>
                                            {{'portconfig_port_switchmode_all' | translate}}
                                        </div>
                                        <div class="col-sm-2"  >
                                            <input  class="col-sm-2" type="radio" name="allowedVlan"
                                                    ng-model="portsAllowedVlan" ng-change="allowdVlanOnChange()"
                                                    k-ng-delay="portsAllowedVlan" value="notall"  ng-selected="!portsAllowedVlan"/>
                                            {{'portconfig_port_switchmode_vlan_ids' | translate}}
                                        </div>
                                    </div>
                                    <!-------------------------------------------VLAN ID------------------------------------------>
                                    <div class="row form-group">
                                        <div class="col-sm-6 fieldinput-right">
                                            <div class="label">
                                                {{'portconfig_port_switchmode_vlan_ids' | translate}}
                                            </div>
                                        </div>
                                        <div class="col-sm-6">
                                            <input class="k-textbox" ng-disabled="isAllowedVlan()"
                                                   name="vlanId" id="vlanId" class="form-control"
                                                   placeholder="1-4094" num-comma-hyphen-only
                                                   ng-model="portsAllowedVlanId"
                                                   ng-change="diableSetApplyButton=diableSetCancelButton = false"
                                                   k-ng-delay="portsAllowedVlanId"
                                                   data-space="" data-space-msg="{{'portconfig_invalid_vlan' | translate}}" min="1" max="4094"
                                                   data-range="" data-range-msg="{{'portconfig_vlan_range' | translate}}"
                                                   data-vlancheck="" data-vlancheck-msg="{{'vlan_id_req_msg' | translate}}">
                                        </div>
                                    </div>
                                    <!-------------------------------------------Native Vlan-------------------------------------->
                                    <div class="row form-group">
                                        <div class="col-sm-6 fieldinput-right">
                                            <span class="label">{{'portconfig_port_switchmode_nativevlan' | translate}}</span>
                                        </div>
                                        <div class="col-sm-6 ">
                                            <input class="k-textbox"
                                                   placeholder="1-4094"
                                                   name="native" id="native" num-comma-hyphen-only
                                                   ng-model="portsNativeVlan" k-ng-delay="portsAllowedVlanId"
                                                   ng-change="diableSetApplyButton=diableSetCancelButton = false"
                                                   data-space="" data-space-msg="{{'portconfig_invalid_vlan' | translate}}" min="1" max="4094"
                                                   data-range="" data-range-msg="{{'portconfig_vlan_range' | translate}}">
                                            <tooltip helptext="{{'help_ports_native_VLAN' | translate}}"></tooltip>
                                        </div>
                                    </div>
                                </div>

                            <!------------------------------------------Port Fast---------------------------------------->
                            <div class="row form-group ">
                                <div class="col-sm-6 fieldinput-right">
                                    <span class="label">{{'portconfig_port_portfast' | translate}}</span>
                                </div>
                                <div class="col-sm-6 " >
                                    <span class="toggleClass">
                                    <toggle-button ng-init="physicalInterface.portConfig.portFast='On'"
                                                   button-options="{{'toggle_on' | translate}},{{'toggle_off' | translate}}"
                                                   ng-change="diableSetApplyButton=diableSetCancelButton = false"
                                                   ng-model="portsPortFast"  k-ng-delay="portsPortFast"></toggle-button></span>
                                    <tooltip helptext="{{'help_ports_PortFast' | translate}}"></tooltip>
                                </div>
                            </div>
							 
                            <!------------------------------------------DHCP Snooping---------------------------------------->
                            <div class="row form-group " >
                                <div class="col-sm-6 fieldinput-right">
                                    <span class="label">{{'portconfig_port_dhcpsnooping' | translate}} </span>
                                </div>
                                <div class="col-sm-6 " >
                                     <span class="toggleClass">
                                    <toggle-button   button-options="{{'com_enable' | translate}},{{'com_disable' | translate}}"
                                                     ng-change="diableSetApplyButton=diableSetCancelButton = false"
                                                     ng-model="portsDhcpSnooping"  k-ng-delay="portsDhcpSnooping"></toggle-button></span>
                                    <tooltip helptext="{{'help_ports_DHCP_snooping' | translate}}"></tooltip>
                                </div>
                            </div>
							</div>
                           
                    <!-- add event Classification config for selecon -->
							<div class="row form-group" ng-show="showSeleconDetails">
								<div class="col-sm-6 fieldinput-right">
									<span class="label ">{{'port_config_eventclassification' | translate}}</span>
								</div>
								<div class="col-sm-1 custom-checkbox empSpace">
									<input type="checkbox" name="eveClass" id="eveClass"
										ng-change="diableSetApplyButton=diableSetCancelButton = false"
										class="k-checkbox form-control ng-pristine ng-untouched ng-valid ng-empty"
										ng-model="eveClassification" ng-disabled="eveClassStatus"> <label
										class="k-checkbox-label" for="eveClass"></label>				
								</div>
								<tooltip helptext="{{'help_port_config_eventclassification' | translate}}" class="toolTop"></tooltip>	
							</div>
					
					<!-- add perpetual PoE config for selecon-->
							<div class="row form-group" ng-show="showSeleconDetails">
								<div class="col-sm-6 fieldinput-right">
									<span class="label ">{{'port_config_poe' | translate}}</span>
								</div>
								<div class="col-sm-1 custom-checkbox empSpace">
									<input type="checkbox" name="poe" id="poe"
										ng-change="diableSetApplyButton=diableSetCancelButton = false"
										class="k-checkbox form-control ng-pristine ng-untouched ng-valid ng-empty"
										ng-model="perpetualPoE" ng-disabled="poeStatus"> <label
										class="k-checkbox-label" for="poe"></label>	
								</div>
								<tooltip helptext="{{'help_port_config_poe' | translate}}" class="toolTop"></tooltip>	
							</div>
							
                            </div> </div>
                        <!------------------------------------------Ports Settings Save and Cancel button Container---------------------------------------->
                        <div class="row formActionButtons fieldinput-center">
                            <!-----------------------------------------------Save----------------------------------------------------------------->
                            <button kendo-button="doneButton" class="btn btn-primary" ng-disabled="diableSetApplyButton" ng-click="savePortsSetConf()">
                                <span class="fa pl-apply"></span> {{'com_apply' | translate}}
                            </button>
                            <!-----------------------------------------------Cancel----------------------------------------------------------------->
                            <button kendo-button="cancelButton" class="btn btn-primary" ng-disabled="diableSetCancelButton" ng-click="cancelPortsSetConf()">
                                <span class="fa pl-cancel"></span> {{'com_cancel' | translate}}
                            </button>
                        </div>
                        </form>
                </div>
                <!----------------------------------------------Advanced Settings--------------------------------------------->
                <div name="advanSetSection" id="advanSetSection">
                    <!------------------------------------------Ports Advanced Settings Page Container---------------------------------------->
                    <form name="PortsConfigAvdform" id="portsConfigAdvForm" kendo-validator="portsAdvValidator" k-options="portAdvValidations">
                    <div class="pageContent">
                        <!------------------------------------------Ports Advanced Settings Fields Container---------------------------------------->
                        <div ng-show="portSettingDeviceL">
                            <!--------------------------------------------Storm Control---------------------------------------------------->
                            <div class="row form-group">
                                <div class="col-sm-6 fieldinput-right">
                                    <span class="label ">{{'portconfig_adv_storm' | translate}}</span>
                                </div>
                                <div class="col-sm-6  checkbox-styled">
                                    <select kendo-drop-down-list
                                            name="stormControl" id="stormControl"
                                            ng-model="portsStormControlStorm"
                                            ng-change="diableAdvApplyButton=diableAdvCancelButton = false"
                                            k-data-source="stormControlOptions"
                                            k-data-text-field="'stormControlText'"
                                            k-data-value-field="'stormControlValue'" k-ng-delay="portsStormControlStorm"></select>
                                    <tooltip helptext="{{'help_ports_storm_control' | translate}}"></tooltip>
                                </div>
                            </div>
                            <!-----------------------------------------Broadcast Threshold Level------------------------------------------->
                            <div class="row form-group">
                                <div class="col-sm-6 fieldinput-right">
                                    <span class="label">{{'portconfig_adv_brdcst' | translate}}</span>
                                </div>
                                <div class="col-sm-6 ">
                                    <input class="k-textbox"
                                           name="broadcast" id="broadcast" placeholder="0-100"
                                           ng-model="portsStormControlBroadcast" num-comma-hyphen-only data-checkVlanList
                                           ng-change="diableAdvApplyButton=diableAdvCancelButton = false" k-ng-delay="portsStormControlBroadcast"
                                           min="0" max="100" data-range="" data-range-msg="{{'portconfig_threshold_range' | translate}}" >
                                </div>
                            </div>
                            <!-----------------------------------------Multicast Threshold Level------------------------------------------->
                            <div class="row form-group">
                                <div class="col-sm-6 fieldinput-right">
                                    <span class="label">{{'portconfig_adv_mutcst' | translate}}</span>
                                </div>
                                <div class="col-sm-6 ">
                                    <input class="k-textbox"
                                           name="multicast" id="multicast" placeholder="0-100" num-comma-hyphen-only data-checkVlanList
                                           ng-model="portsStormControlMulticast" k-ng-delay="portsStormControlMulticast"
                                           ng-change="diableAdvApplyButton=diableAdvCancelButton = false"
                                           min="0" max="100" data-range="" data-range-msg="{{'portconfig_threshold_range' | translate}}">
                                </div>
                            </div>
                            <!-----------------------------------------Unicast Threshold Level--------------------------------------------->
                            <div class="row form-group">
                                <div class="col-sm-6 fieldinput-right">
                                    <span class="label">{{'portconfig_adv_unicst' | translate}}</span>
                                </div>
                                <div class="col-sm-6 ">
                                    <input class="k-textbox"
                                           name="unicast" id="unicast" placeholder="0-100" num-comma-hyphen-only data-checkVlanList
                                           ng-model="portsStormControlUnicast" k-ng-delay="portsStormControlUnicast"
                                           ng-change="diableAdvApplyButton=diableAdvCancelButton = false"
                                           min="0" max="100" data-range="" data-range-msg="{{'portconfig_threshold_range' | translate}}">
                                </div>
                            </div>
					</div>
						
					<div class="" ng-show="portSettingDeviceX">
							<!--------------------------------------------Storm Control---------------------------------------------------->
							<div class="webui-centerpanel-subtitle col-sm-12">
								<span class="label"><label class="ng-binding">{{'portconfig_adv_storm' | translate}}</label></span>
							</div>
                            <!--------------------------------------------Storm Control---------------------------------------------------->
                            <div class="row form-group">
                                <div class="col-sm-6 fieldinput-right">
                                    <span class="label ">{{'portconfig_adv_storm' | translate}}</span>
                                </div>
                                <div class="col-sm-6  checkbox-styled">
                                    <select kendo-drop-down-list
                                            name="stormControl" id="stormControl"
                                            ng-model="portsStormControlStorm"
                                            ng-change="diableAdvApplyButton=diableAdvCancelButton = false"
                                            k-data-source="stormControlOptions"
                                            k-data-text-field="'stormControlText'"
                                            k-data-value-field="'stormControlValue'" k-ng-delay="portsStormControlStorm"></select>
                                </div>
                            </div>
                            <!-----------------------------------------Broadcast Threshold Level------------------------------------------->
                            <div class="row form-group">
                                <div class="col-sm-6 fieldinput-right">
                                    <span class="label">{{'portconfig_adv_brdcst' | translate}}</span>
                                </div>
                                <div class="col-sm-6 ">
                                    <input class="k-textbox"
                                           name="broadcast" id="broadcast" placeholder="0-100"
                                           ng-model="portsStormControlBroadcast" num-comma-hyphen-only data-checkVlanList
                                           ng-change="diableAdvApplyButton=diableAdvCancelButton = false" k-ng-delay="portsStormControlBroadcast"
                                           min="0" max="100" data-range="" data-range-msg="{{'portconfig_threshold_range' | translate}}" >
                                </div>
                            </div>
                            <!-----------------------------------------Multicast Threshold Level------------------------------------------->
                            <div class="row form-group">
                                <div class="col-sm-6 fieldinput-right">
                                    <span class="label">{{'portconfig_adv_mutcst' | translate}}</span>
                                </div>
                                <div class="col-sm-6 ">
                                    <input class="k-textbox"
                                           name="multicast" id="multicast" placeholder="0-100" num-comma-hyphen-only data-checkVlanList
                                           ng-model="portsStormControlMulticast" k-ng-delay="portsStormControlMulticast"
                                           ng-change="diableAdvApplyButton=diableAdvCancelButton = false"
                                           min="0" max="100" data-range="" data-range-msg="{{'portconfig_threshold_range' | translate}}">
                                </div>
                            </div>
                            <!-----------------------------------------Unicast Threshold Level--------------------------------------------->
                            <div class="row form-group">
                                <div class="col-sm-6 fieldinput-right">
                                    <span class="label">{{'portconfig_adv_unicst' | translate}}</span>
                                </div>
                                <div class="col-sm-6 ">
                                    <input class="k-textbox"
                                           name="unicast" id="unicast" placeholder="0-100" num-comma-hyphen-only data-checkVlanList
                                           ng-model="portsStormControlUnicast" k-ng-delay="portsStormControlUnicast"
                                           ng-change="diableAdvApplyButton=diableAdvCancelButton = false"
                                           min="0" max="100" data-range="" data-range-msg="{{'portconfig_threshold_range' | translate}}">
                                </div>
                            </div>
							<!--------------------------------------------Policy Management---------------------------------------------------->
							<div class="webui-centerpanel-subtitle col-sm-12">
								<span class="label"><label class="ng-binding">{{'portconfig_adv_policymgmt' | translate}}</label></span>
							</div>
                            <!--------------------------------------------Auto Qos---------------------------------------------------->
                            <div class="row form-group">
                                <div class="col-sm-6 fieldinput-right">
                                    <span class="label ">{{'portconfig_adv_auto' | translate}}</span>
                                </div>
                                <div class="col-sm-6  checkbox-styled">
                                    <select kendo-drop-down-list
                                            name="autoQosPolicy" id="autoQosPolicy"
                                            ng-model="autoQos"
                                            ng-change="diableAdvApplyButton=diableAdvCancelButton = false"
                                            k-data-source="autoQosOptions"
                                            k-data-text-field="'autoQosText'"
                                            k-data-value-field="'autoQosValue'" k-ng-delay="autoQos">
									</select>						
                                </div>
                            </div>
                        </div>
                        <!------------------------------------------Ports Advanced Settings Save and Cancel button Container---------------------------------------->
                        <div class="row formActionButtons fieldinput-center">
                            <!-----------------------------------------------Save----------------------------------------------------------------->
                            <button kendo-button="doneButton" class="btn btn-primary" ng-disabled="diableAdvApplyButton" ng-click="savePortsAdvConf()">
                                <span class="fa pl-apply"></span> {{'com_apply' | translate}}
                            </button>
                            <!-----------------------------------------------Cancel----------------------------------------------------------------->
                            <button kendo-button="cancelButton" class="btn btn-primary" ng-disabled="diableAdvCancelButton" ng-click="cancelPortsAdvConf()">
                                <span class="fa pl-cancel"></span> {{'com_cancel' | translate}}
                            </button>
                        </div>

                    </div>
                        </form>
                </div>
            </div>
    </div>
</div>
