<div class="timeline-badge" ng-style="moment.badgeColor"><i ng-class="moment.icon"></i></div>
<div class="timeline-heading" 
	 ng-class="{'active' : moment.completed == false, 
	 			'completed' : moment.completed == true, 
	 			'stateClicked' : moment.completed && (moment.body == stateObj.id),
	 			'stateClickedActive' : !moment.completed && (moment.body == stateObj.id)}">
  <h4 class="timeline-title">{{moment.title}}</h4>
  <p  ng-show="moment.completed">
    <span class="icon-status-good completed" style="opacity: 1"></span>
    <small class="text-muted"><i class="glyphicon glyphicon-time"></i>
  			Completed in {{moment.duration}}  
    </small>
  </p> 
  <p  ng-hide="moment.completed">
    <span class="icon-status-good active" style="opacity: 1"></span>
    <small class="text-muted"><i class="glyphicon glyphicon-time"></i>
  			Active - {{moment.duration}} and in progress.  
	  </small>
  </p>
  <additional-info-template info="item" ng-repeat="item in moment.additionalData"></additional-info-template>
</div>

<br>
<div class="timeline-body">
  <div class="bs-example">
    <span ng-repeat="tag in moment.tags track by $index |limitTo:6" ng-show="tag.value" class="label label-moment {{tag.style}}">{{tag.value}}</span>
  </div>
</div>
<div class="timeline-xpanel">
	<p>
		<small class="text-muted"><i class="glyphicon glyphicon-time"></i>
			{{moment.time}} {{moment.timezoneOffset}}
		</small>
  	</p>
</div>
