<div>
    <!--
    Description:Switch and STP page
    Copyright (c) 2016 by Cisco Systems, Inc.
    All rights reserved.
    -->

    <div class="pageTitle">
        {{'menu_switch' | translate}}
    </div>
    <div kendo-tab-strip="switchTab" >
        <ul>
            <li class="k-state-active" name="switchconfigTab" ng-click="onClickswitchconfigTab()">
                {{'menu_switch' | translate}}
            </li>
            <li name="stpTab" ng-click="onClickstpTab()">
                {{'switch_stp' | translate}}
            </li>
			<li name="bluetoothTab" ng-show="showBluetoothTab">
                {{'switch_bluetooth' | translate}}
            </li>
         </ul>

        <!--Switch Tab-->
        <div>
            <div class="well">
		<div ng-if="isACluster" ng-include="'features/common/stackConf/views/switchView.html'" class="portSwitchContainer"></div>
                <form name="stpForm" id="stpForm" kendo-validator="stpValidator"	k-options="stpValidations">
                    <div class="row form-group">
                        <div class="col-sm-3 col-sm-offset-2 webui-centerpanel-label">
                            <span class="label pl-mandatory">{{'switch_hostname' | translate}}</span>
                        </div>
                        <div class="col-sm-5">
                            <input  class="k-textbox form-control"
                                    data-ng-model="switchConfigData.hostName"
                                    name="hostName" ng-change="diableApplyButton = false"
                                    id="hostName" required data-required-msg="{{'switch_hostname_msg' | translate}}" data-dataspace data-dataspace-msg="{{'switch_hostname_invalid' | translate}}"/>
                            <tooltip helptext="{{'help_switch_hostname' | translate}}"></tooltip>
                        </div>
                    </div>

                    <div class="row form-group">
                        <div class="col-sm-3 col-sm-offset-2 webui-centerpanel-label">
                            <span class="label pl-mandatory">{{'switch_ipaddress' | translate}}</span>
                        </div>
                        <div class="col-sm-5">
                            <input  class="k-textbox form-control"
                                    data-ng-model="switchConfigData.switchIp" ng-change="diableApplyButton = false"
                                    name="switchIp" 
                                    id="switchIp" numeric-dot-only required data-required-msg="{{'switch_ip_msg' | translate}}" data-validate-ip="" data-validateip-msg="{{'switch_ip_invalid' | translate}}"/>
                        </div>
                    </div>

                    <div class="row form-group">
                        <div class="col-sm-3 col-sm-offset-2 webui-centerpanel-label">
                            <span class="label pl-mandatory">{{'switch_subnet' | translate}}</span>
                        </div>
                        <div class="col-sm-5">
                            <input  class="k-textbox form-control"
                                    data-ng-model="switchConfigData.subnetMask"
                                    name="subnetMask" ng-change="diableApplyButton = false"
                                    id="subnetMask" numeric-dot-only required data-required-msg="{{'switch_subnet_msg' | translate}}" data-validate-ip="" data-validateip-msg="{{'switch_ip_invalid' | translate}}"/>
                        </div>
                    </div>

                    <div class="row form-group">
                        <div class="col-sm-3 col-sm-offset-2 webui-centerpanel-label">
                            <span class="label pl-mandatory">{{'switch_default' | translate}}</span>
                        </div>
                        <div class="col-sm-5">
                            <input  class="k-textbox form-control"
                                    data-ng-model="switchConfigData.defaultGateway"
                                    name="defaultGateway" ng-change="diableApplyButton = false"
                                    id="defaultGateway" numeric-dot-only required data-required-msg="{{'switch_default_msg' | translate}}" data-validate-ip="" data-validateip-msg="{{'switch_ip_invalid' | translate}}"/>
                        </div>
                    </div>

                    <div class="row form-group">
                        <div class="col-sm-3 col-sm-offset-2 webui-centerpanel-label">
                            <span class="label">{{'switch_vlan' | translate}}</span>
                        </div>
                        <div class="col-sm-5">
                            <input  class="k-textbox form-control"
                                    data-ng-model="switchConfigData.managementVlan"
                                    name="switchManagement" ng-change="diableApplyButton = false"
                                    id="switchManagement" />
                            <tooltip helptext="{{'help_switch_management_VLAN' | translate}}"></tooltip>
                        </div>
                    </div>

                    <div class="row form-group">
                        <div class="col-sm-3 col-sm-offset-2 webui-centerpanel-label">
                            <span class="label pl-mandatory">{{'switch_mtusize' | translate}}</span>
                        </div>
                        <div class="col-sm-5" ng-if="mtusizetype=='1'">                         
                            <select kendo-drop-down-list
                                  name="mtuSize" id="mtuSize" class="mtuSize" ng-disabled="mtuSizeStatus"
                                  ng-model="switchConfigData.mtuSize" required data-required-msg="{{'switch_mtu_msg' | translate}}"
                                  k-data-source="mtuSizeDataSource" k-data-text-field="'mtuSizeText'"
                                  k-data-value-field="'mtuSizeValue'" k-ng-delay="switchConfigData.mtuSize" ng-change="switchmtuSizeOnchange()">
                            </select>                                
                            <tooltip helptext="{{'help_switch_MTU_size' | translate}}"></tooltip>
                        </div>
						 <div class="col-sm-5" ng-if="mtusizetype=='2'">                         
                             <input class="k-textbox form-control" ng-model="switchConfigData.mtuSize"  
							 name="switchmtuSize" ng-change="switchmtuSizeOnchange()"	 id="switchmtuSize"
							 placeholder="1500-1998" num-comma-hyphen-only required data-required-msg="{{'switch_mtu_msg' | translate}}"
                             data-range data-range-msg="{{'switch_stpmtusize' | translate}}"
                             min="1500" max="1998"/>                            
                        </div>
                    </div>
                    
                    <!-- add coap config for selecon-->                    
					<div class="row form-group" ng-show="showSeleconDetails">
						<div class="col-sm-3 col-sm-offset-2 webui-centerpanel-label">
							<span class="label ">{{'switch_coap' | translate}}</span>
						</div>
						<div class="col-sm-1 custom-checkbox empSpace">
							<input type="checkbox" name="coap" id="coap"
								ng-change="diableApplyButton = false"
								class="k-checkbox form-control ng-pristine ng-untouched ng-valid ng-empty"
								ng-model="switchConfigData.switchCOAP" ng-disabled="coapStatus"> <label
								class="k-checkbox-label" for="coap"></label>	
						</div>
						<tooltip helptext="{{'help_switch_coap' | translate}}" class="toolTop"></tooltip>								
					</div>
					
					
				 <!--STACKING Type-->
                    <div ng-init="stackingInit()">
                        <div class="row form-group">
                            <div class="col-sm-3 col-sm-offset-2 webui-centerpanel-label">
                                <span class="label">{{'switch_stacking' | translate}} </span>
                            </div>
                            <div class="col-sm-3">
                                <select kendo-drop-down-list 
                                    ng-model="stpStackModeType"
                                    k-data-source="stpStackModeDataSource" id="stpStackType" name="stpStackType"
                                    k-data-text-field="'stpStackText'"
                                    k-data-value-field="'stpStackValue'"
                                    ng-change="updateStacking(stpStackModeType)"
                                    k-ng-delay="stpStackModeType"></select>
                                <tooltip helptext="{{'help_stacking' | translate}}"></tooltip>
                                <div ng-init="loadStackingOptions()"></div>
                            </div>
                        </div>
                        <div class="row form-group">
                            <div ng-show="stpStackModeType == 'CLUSTER'">
                                <div class="row form-group">
                                    <div class="col-sm-3 col-sm-offset-2 webui-centerpanel-label">
                                        <span class="label pl-mandatory">{{'stack_virtual_domain' | translate}} </span>
                                    </div>
                                    <div class="col-sm-3">
                                        <input class="k-textbox form-control" ng-model="cluster.virtualDomainName"
                                        ng-change="diableApplyButton = false"
                                        domain data-domain-msg="{{'stack_domain_invalid' | translate}}"
										domainspace data-domainspace-msg="{{'stack_domain_space' | translate}}"
                                        name="virtualDomainName" id="virtualDomainName">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>  
					 <!--End STACKING Type-->
					<div class="col-sm-5 col-sm-offset-5">
                        <button kendo-button="saveBtn" class="btn btn-primary"
                                ng-disabled="diableApplyButton"
                                ng-click= "redirection()">
                            <span class="fa pl-apply"></span> {{'com_apply' | translate}}
                        </button>
                        <button kendo-button="cancelBtn" class="btn btn-primary" ng-disabled="cancelButton"
                                ng-click="cancelSwitchConfig()">
                            <span class="fa pl-cancel"></span> {{'com_cancel' | translate}}
                        </button>
                    </div>
                </form>
            </div>
        </div>


        <!--STP Type-->
        <div ng-show="!stpTab">
            <div class="well">
                <div class="webui-centerpanel-subtitle col-sm-11">
                    <span class="label"><label>{{'stp_protocolconf' | translate}}</label></span>
                </div>

                <div class="row form-group">
                    <div class="col-sm-3 col-sm-offset-2 webui-centerpanel-label">
                        <span class="label">{{'stp_stpmode' | translate}} </span>
                    </div>
                    <div class="col-sm-3 fieldinput">
                        <select kendo-drop-down-list="stpType"  ng-model="stpModeType"
                                k-data-source="stpModeDataSource" id="stpType" name="stpType"
                                k-data-text-field="'stpText'"
                                k-data-value-field="'stpValue'"
                                k-ng-delay="stpModeType"
                                ng-change="updateStpMode()"></select>
                        <tooltip helptext="{{'help_STP_mode' | translate}}"></tooltip>                        
                    </div>
                </div>

                <div>
                    <div kendo-grid="stpInstanceGrid" id="stpInstanceGrid"
                         k-options="stpInstanceGridOptions"
                         k-data-source="stpInstancedataSource"></div>
                </div>

                <div>
                    <div class="gridActionButtons  text-align-right">
                        <button kendo-button="applyBtn" class="btn btn-primary"
                                ng-click="apply()" ng-disabled="disableApplyButton()">
                            <span class="fa pl-apply"></span>{{'com_apply' | translate}}
                        </button>
                        <button kendo-button="cancelBtn" class="btn btn-primary"
                                ng-click="cancel()" ng-disabled="disableCancelButton()">
                            <span class="fa pl-cancel"></span> {{'com_cancel' | translate}}
                        </button>
                    </div>
                </div>

            </div>

            <div></div>
        </div>
		
		<!-- Bluetooth Tab -->
		<div>
			<div class="form-group" ng-show="showBluetoothDetails">
				<div class="form-group">
					<div class="row form-group">
						<div class="col-sm-3 col-sm-offset-2 webui-centerpanel-label">
							<span class="label">{{'switch_bluetooth' | translate}}</span>
						</div>
						<div class="col-sm-5">
							<span class="toggleClass">
							<toggle-button button-options="{{'toggle_on' | translate}},{{'toggle_off' | translate}}"
							ng-model="switchConfigData.bluetoothstatus" ng-change="switchmtuSizeOnchange()"></toggle-button></span>
							<tooltip helptext="{{'help_switch_Bluetooth' | translate}}" position="top"></tooltip>
						</div>
					</div>
				</div>
			</div>
			<div class="col-sm-5 col-sm-offset-5">
				<button kendo-button="saveBtn" class="btn btn-primary"
						ng-disabled="diableApplyButton"
						ng-click= "saveBluetoothConfig()">
					<span class="fa pl-apply"></span> {{'com_apply' | translate}}
				</button>
			</div>
		</div>

    </div>
</div>
