<div class="col-sm-12">
	<div class="panel panel-default">
		<div class="panel-heading">
			<span class="panel_label">Traffic</span> 
			<span ng-show="ConnectState == 'Connected'" class="label label-success">{{ConnectState}}</span>
			<span ng-hide="ConnectState == 'Connected'" class="label label-danger">{{ConnectState}}</span>
		</div>
		<div class="panel-body traffic-page">
			<div class="row">
				<div class="col-sm-5">
					<span class="col-xs-3"><strong>Flight</strong></span>
					<span class="col-xs-3 text-right">Speed</span>
					<span class="col-xs-3 text-right">Altitude</span><span class="col-xs-1 col-padding-shift-right">&nbsp;</span>
					<span class="col-xs-2 text-right">Course</span>
				</div>
				<div class="col-sm-7">
					<span class="col-xs-2">&nbsp;</span>
					<span class="col-xs-5">Location</span>
					<span class="col-xs-2">Power (dB)</span>
					<span class="col-xs-2 text-right">Age</span>
				</div>
			</div>

			<div class="row" ng-repeat="aircraft in data_list | orderBy: -age">
				<div class="separator"></div>
				<div class="col-sm-5">
					<span class="col-xs-3">
						<span ng-show="aircraft.tail" ng-class="'label traffic-style'+aircraft.src+aircraft.targettype"><strong>{{aircraft.addr_symb}}&nbsp;{{aircraft.tail}}</strong></span>
						<span ng-hide="aircraft.tail" ng-class="'label traffic-style'+aircraft.src+aircraft.targettype"><strong class="text-muted">{{aircraft.addr_symb}}&nbsp;{{aircraft.icao}}</strong></span>
					</span>

					<span class="col-xs-3 text-right">{{aircraft.speed}} KTS</span>
					<span class="col-xs-3 text-right">{{aircraft.alt}}</span>
					<span class="col-xs-1 small col-padding-shift-right text-muted">
						<span ng-show="aircraft.vspeed > 0"><span class="fa fa-ascent"></span>{{aircraft.vspeed}}</span>
						<span ng-show="aircraft.vspeed < 0"><span class="fa fa-descent"></span>{{0-aircraft.vspeed}}</span>
					</span>
					<span class="col-xs-2 text-right"><span ng-show="aircraft.heading < 10">0</span><span ng-show="aircraft.heading < 100">0</span>{{aircraft.heading}}&deg;</span>
				</div>
				<div class="col-sm-7">
					<span class="col-xs-2">&nbsp;</span>
					<span class="col-xs-5">{{aircraft.lat}} {{aircraft.lon}}</span>
					<span class="col-xs-2">{{aircraft.signal}}</span>
					<!--<span class="col-xs-3 text-right">{{aircraft.time}}</span>-->
					<span class="col-xs-2 text-right">{{aircraft.age}}s</span>
				</div>
			</div>
		</div>
		<!--
		<div class="panel-body traffic-footer">
			<div class="separator"></div>
			<div class="row">
				<div class="col-sm-6 label_adj">
					<span class="col-xs-4"><strong>Stratux Clock:</strong></span>
					<span class="col-xs-8">{{Clock}}</span>
				</div>
				<div class="col-sm-6 label_adj">
					<span class="col-xs-4"><strong>Device Clock:</strong></span>
					<span class="col-xs-8">{{LocalClock}}</span>
				</div>
			</div>
		</div>
		-->
	</div>
</div>


<!--
<div class="col-sm-12">
	<div class="panel panel-default">
		<div class="panel-heading">Raw Traffic Data</div>
		<div class="panel-body">
			<pre>{{raw_data}}</pre>
		</div>
	</div>
</div>
-->
