<table class="table table-striped small">
	<thead>
		<tr>
			<th>#</th>
			<th>Service</th>
			<th>WSDL</th>
			<th class="text-center">Status <button type="button" class="btn btn-xs btn-primary" ng-click="pingServices()">verify</button></th>
			<th class="text-right">Subscriptions</th>
		</tr>
	</thead>
	<tbody ng-repeat="group in groups">
		<tr>
			<th colspan="5">
				Host: <i>{{group.host}}</i> - Port: <i>{{group.port}}</i> - Context: <i>{{group.context}}</i> 
			</th>
		</tr>
		<tr ng-show="group.services.length == 0">
			<td colspan="6">No services</td>
		</tr>
		<tr ng-repeat="s in group.services">
			<td>{{$index + 1}}</td>
			<td>
				<a href="#/profile/{{s.id}}" title="{{s.id}}" ng-show="s.id">{{s.name}}</a>
				<span ng-hide="s.id" class="text-muted"><i>missing profile</i></span>
			</td>
			<td><a href="{{s.wsdl}}">{{s.wsdl}}</a></td>
			<td class="text-center">
				<span class="label" ng-class="{'label-success' : s.status == 'ACTIVE', 'label-danger' : s.status == 'NOT_RESPONDING' || s.status == 'MISSING', 'label-default' : s.status == 'UNKNOWN', 'label-warning' : s.status == 'PENDING'}">{{s.status}}</span>
			</td>
			<td class="text-right">
				<a href="javascript:void(0)" 
					ng-show="s.subscriptions.length > 0" 
					data-toggle="modal" data-target="#subscriptionsModal"
					ng-click="setSubscriptions(s.subscriptions)">{{s.subscriptions.length}} subscription(s)</a>
			</td>
		</tr>
	</tbody>
</table>

<div id="subscriptionsModal" class="modal fade" tabindex="-1" role="dialog">
	<div class="modal-dialog modal-lg">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal">&times;</button>
				<h4 class="modal-title">Subscriptions</h4>
			</div>
			<div class="modal-body">
			
				<div class="panel panel-info" ng-repeat="s in subscriptions">
					<div class="panel-heading">{{s.id}}</div>
					<table class="table table-condensed small">
						<tr>
							<th>Prefix</th>
							<td>{{s.prefix}}</td>
						</tr>
						<tr>
							<th>Resource type</th>
							<td>{{s.type}}</td>
						</tr>
						<tr>
							<th>Resource ID</th>
							<td>{{s.resourceId}}</td>
						</tr>
						<tr>
							<th>Xpath</th>
							<td>{{s.xpath}}</td>
						</tr>
					</table>
				</div>
			</div>                                
			<div class="modal-footer">
				<button class="btn btn-default" data-dismiss="modal">Close</button>
			</div>
		</div>
	</div>
</div>
