<div class="vertical-container row service clickable"
	ng-repeat="(item, status) in service.services"
	ng-init="local={}; local.mode = 'NORMAL'"
	ng-click="local.mode != 'NORMAL' || service.select(local)"
	ng-mouseenter="local.hover = true"
	ng-mouseleave="local.hover = false">
	<div class="circle vertical-block"
		ng-class="{
			'stopped': status == 'stopped'
		}"></div><!--
	--><div class="vertical-block name">{{::item}}</div><!--
	--><div class="vertical-block info text-italicize">{{::status}}</div><!--
	--><div class="vertical-container action text-center"
		ng-if="local.mode=='NORMAL' && local.hover"><!--
		--><span class="text-italicize vertical-block vertical-block capitalize" ng-if="status != 'running'">enable</span><!--
		--><span class="text-italicize vertical-block vertical-block capitalize" ng-if="status == 'running'">disable</span><!--
	--></div><!--
	--><div class="vertical-container control-panel swift-animate"
		ng-if="local.mode=='CONFIRM'"><!--
		--><span class="text-italicize vertical-block vertical-block capitalize" ng-if="status != 'running'">start service?</span><!--
		--><span class="text-italicize vertical-block vertical-block capitalize" ng-if="status == 'running'">stop service?</span><!--
		--><div class="confirm right button vertical-block clickable"
			ng-click="local.mode='LOADING';service.processAction(local, item, status)"
			window-click callback="service.cancel(local)"><i class="fa text-center fa-check"></i></div><!--
	--></div><!--
	--><div class="text-center vertical-block vertical-container control-panel"
		ng-if="local.mode=='LOADING'">
		<i class="fa fa-spinner fa-pulse vertical-block"></i>
	</div>
</div>