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

	<div class="pageTitle">{{'menu_troubleshooting' | translate}}</div>
	<div kendo-tab-strip="troubleTab">
		<ul>
			<li class="k-state-active" name="pingTab">{{'trouble_shoot_ping' | translate}}</li>	
			<li name="rebootTab">{{'trouble_shoot_traceRoute' | translate}}</li>		
			<li name="goldTab">{{'trouble_shoot_diagnostic' | translate}}</li>	
			<li name="rebootTab">{{'trouble_shoot_rebootSwitch' | translate}}</li>		
		</ul>
		
		<!----- start Ping Section --->
		<div name="pingSection" id="pingSection">
		  <form name="pingForm" id="pingForm" kendo-validator="pingValidator" k-options="pingValidations">
			<div class="row form-group">
                    <div class="col-sm-3 col-sm-offset-2 webui-centerpanel-label">
                        <span class="label">{{'trouble_shoot_ping_source' | translate}}</span>
                    </div>
                    <div class="col-sm-5">
                        <select kendo-drop-down-list ng-model="pingSource"
                        	k-data-source="pingSourceInterface" id="pingSource" name="pingSource"
                        	k-data-text-field="'intNameAddress'"
                        	k-data-value-field="'name'"
                        	k-ng-delay="pingSource" ></select>
                        <tooltip position="bottom" helptext="{{'help_trouble_shoot_ping_source' | 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">{{'trouble_shoot_ping_test' | translate}}</span>
				</div>
				<div class="col-sm-2">
					<input class="k-textbox form-control" data-ng-model="pingName" name="pingName" id="pingName" required data-required-msg="{{'trouble_shoot_ping_required' | translate}}">
					<tooltip position="bottom" helptext="{{'help_trouble_shoot_ping_destination' | translate}}"></tooltip>
				</div>
				<div class="col-sm-3">					
					<button type="button" class="btn btn-primary" ng-class="{'pl-apply' : showTick == true}"
							ng-click="startPing($event)" data-loading-text="<i class='fa fa-circle-o-notch fa-spin'></i> {{'trouble_shooting_loading_pinging' | translate}} ">
							{{'com_ping' | translate}}
					</button>
				</div>				
			</div>
			<div class="row form-group">
			   <div class="col-sm-3 col-sm-offset-2 webui-centerpanel-label"></div>
			   <div class="col-sm-6"><div class="txtBold"><span>{{statusMsg}}</span></div></div>
			</div>		  
			<div class="col-sm-6 col-sm-offset-4 webui-centerpanel-label" ng-show="isChartShown">
        	    <div id="chart"></div>
    	    </div>
    	    </form>	
		</div>
		<!----- End Ping Section --->
		
		<!----- start Trace Route Section --->
		<div name="traceRouteSection" id="traceRouteSection">
		  <form name="traceRouteForm" id="traceRouteForm" kendo-validator="traceRouteValidator" k-options="traceRouteValidations">
			<div class="row form-group">
				<div class="col-sm-3 col-sm-offset-2 webui-centerpanel-label">
					<span class="label pl-mandatory">{{'trouble_shoot_ping_test' | translate}}</span>
				</div>
				<div class="col-sm-2">
					<input class="k-textbox form-control" data-ng-model="traceRouteName" name="traceRouteName" id="traceRouteName" required data-required-msg="{{'trouble_shoot_ping_required' | translate}}">
					<tooltip position="bottom" helptext="{{'help_trouble_shoot_tracerouting_destination' | translate}}"></tooltip>
				</div>
				<div class="col-sm-3">					
					<button type="button" class="btn btn-primary" ng-class="{'pl-apply' : showTick == true}"
							ng-click="startTraceRoute($event)" data-loading-text="<i class='fa fa-circle-o-notch fa-spin'></i> {{'trouble_shooting_loading_tracerouting' | translate}} ">
							{{'trouble_shoot_traceroute_button' | translate}}
					</button>
				</div>				
			</div>
			 <div ng-show="isTraceRouteGrid" kendo-grid="traceRouteGrid" id="traceRouteGrid" name="traceRouteGrid" 
                k-options="traceRouteGridOptions" 
                k-data-source="traceRouteDataSource">
              </div>
    	    </form>	
		</div>
		<!----- End Trace Route Section --->
		
		<!----- start Diagnostic Section --->
		<div name="pingSection" id="pingSection">		
		     <form id="diagnosticForm" name="diagnosticForm" target="statusDetails">		
			     <div class="row form-group">
                    <div class="col-sm-3 col-sm-offset-2 webui-centerpanel-label">
                        <span class="label">{{'trouble_shoot_diagnostic_title' | translate}}</span>
                    </div>
                    <div class="col-sm-2">
                        <select kendo-drop-down-list ng-model="diagnosticTest"
                        	k-data-source="diagnosticTestSource" id="diagnosticTest" name="diagnosticTest"
                        	k-data-text-field="'testText'"
                        	k-data-value-field="'testValue'"
                        	k-ng-delay="diagnosticTest" ></select>
                        <tooltip position="bottom" helptext="{{'help_trouble_shoot_diagnostic' | translate}}"></tooltip>
                    </div>
                    <div class="col-sm-3">					
					    <button type="button" class="btn btn-primary" ng-class="{'pl-apply' : showTick == true}"
							ng-click="startDiagnostic($event)" data-loading-text="<i class='fa fa-circle-o-notch fa-spin'></i> {{'trouble_shooting_loading_pinging' | translate}} ">
							{{'trouble_shoot_diagnostic_start' | translate}}
					    </button>
				    </div>		
                 </div> 
               </form>              
			 <div class="row form-group"> 
			 </div>
            <div class="row form-group"> 
				<div class="col-sm-4 col-sm-offset-4">
					<fieldset class="cpuUtilizationfieldset">
					<legend>
							<div class="cpuUtilization ng-binding">{{'ts_diagnostic_lastresult' | translate}}</div>
					</legend>
							<div class="row" ng-show="testView1">
								<div class="col-md-8">
									<div class="infoTitle">{{'ts_diagnostic_testPortAsicStackPortLoopback' | translate}}</div>
								</div>
								<div class="col-md-4">
									<span class="{{testResult1}}"></span>
								</div>
							</div>
							 <div class="row form-group"></div>
							 
							<div class="row" ng-show="testView2">
								<div class="col-md-8">
									<div class="infoTitle">{{'ts_diagnostic_testPortAsicLoopback' | translate}} </div>
								</div>
								<div class="col-md-4">
									<span class="{{testResult2}}"></span>
								</div>
							</div> 
							<div class="row form-group"></div>
							
							<div class="row" ng-show="testView3">
								<div class="col-md-8">
									<div class="infoTitle">{{'ts_diagnostic_testPortAsicRingLoopback' | translate}}</div>
								</div>
								<div class="col-md-4">
									<span class="{{testResult3}}"></span>
								</div>
							</div> 
							<div class="row form-group"></div>
							
							<div class="row" ng-show="testView4">
								<div class="col-md-8">
									<div class="infoTitle">{{'ts_diagnostic_testPortAsicCam' | translate}}</div>
								</div>
								<div class="col-md-4">
									<span class="{{testResult4}}"></span>
							</div>
							</div>
							<div class="row form-group"></div>
							
							<div class="row" ng-show="testView5">
								<div class="col-md-8">
									<div class="infoTitle">{{'ts_diagnostic_testMicRingLoopback' | translate}} </div>
								</div>
								<div class="col-md-4">
									<span class="{{testResult5}}"></span>
								</div>
							</div> 
							<div class="row form-group"></div>
							
							<div class="row" ng-show="testView6">
								<div class="col-md-8">
									<div class="infoTitle">{{'ts_diagnostic_testPortAsicMem' | translate}}</div>
								</div>
								<div class="col-md-4">
									<span class="{{testResult6}}"></span>
								</div>
							</div> 
							<div class="row form-group"></div>
							
							<div class="row" ng-show="testView7">
								<div class="col-md-8">
									<div class="infoTitle">{{'ts_diagnostic_testInlinePwrCtlr' | translate}}</div>
								</div>
								<div class="col-md-4">
									<span class="{{testResult7}}"></span>
								</div>
							</div> 
						
					</fieldset>
				</div>	
			</div>
            <div class="ng-hide">
				<iframe name="statusDetails" id="statusDetails" width="400" height="100" align="center"></iframe>
			</div>
    	   
		</div>
		<!----- End Diagnostic Section --->
	
		<!----- start Reboot Section --->
		<div name="rebootSection" id="rebootSection">
			<div ng-include="'features/common/stackConf/views/switchView.html'" class="portSwitchContainer"></div>
			<div class="row top-buffer top200">
				<div class="col-md-8 col-md-offset-3">
					<div class="row">
						<div class="col-md-4 narrow">
							<button kendo-button="restart" class="pl-apply k-button btn btn-primary ng-binding" ng-click="showRebootConfirmDialog()" data-role="button" role="button" aria-disabled="false" tabindex="0">
								{{'factory_reset' | translate}}
							</button>
						</div>
						<div class="col-md-6 narrow" ng-show="showConnectCtrl">
							<button kendo-button="restart" class="pl-apply k-button btn btn-primary ng-binding" ng-click="showConnectController()" data-role="button" role="button" aria-disabled="false" tabindex="0">
								{{'connect_controller' | translate}}
							</button>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!----- End Reboot Section --->
	</div>
</div>
