<table class="table table-condensed table-striped" ng-cloak>
	<thead>
		<th>ID</th>
		<th>Assigned to</th>
		<th class="centered">Message</th>
		<th>Site user</th>
		<th>Telephone</th>
		<th class="centered">Booked In</th>
		<th class="centered">Updated</th>
		<th class="centered">Closed</th>
		<th>Status</th>
	</thead>
	<tbody>
		<tr ng-repeat="message in data">
			<td><a href="{!! URL::to('/messages') !!}/{[{ message.id }]}">{[{ message.id }]}</a></td>
			<td><span class="label label-info">{[{ message.user.name }]}</span></td>
			<td><span strip-html="{[{ message.message.substring(0, 80) + '...' }]}"></span></td>
			<td>{[{ message.site_user.name }]}</td>
			<td>{[{ message.contact_number }]}</td>
			<td class="centered"><span uib-tooltip="{[{ ::message.created_at }]}">{[{ message.created_at | fromNow }]}</span></td>
			<td class="centered"><span uib-tooltip="{[{ ::message.updated_at }]}">{[{ message.updated_at | fromNow }]}</span></td>
			<td class="centered"><i class="fa fa-check" ng-show="message.closed == '1'"></i></td>
			<td>{[{ message.status }]}</td>
		</tr>
		<tr ng-show="loading">
			<td colspan="11"><i class="fa fa-spinner fa-spin"></i> Loading data...</td>
		</tr>
		<tr ng-show="!data.length && !loading">
			<td colspan="11">No messages found.</td>
		</tr>
	</tbody>
</table>