<div>
	<!-- Integration Status Message -->
	<div ng-if="integrationDisabled" class="alert alert-warning alert-dismissible" role="alert">
		<button type="button" class="close" data-dismiss="alert" aria-label="Close">
			<span aria-hidden="true">&times;</span>
		</button>
		<h4><i class="fa fa-exclamation-triangle"></i> Phone System Integration Disabled</h4>
		<p>{[{ integrationMessage }]}</p>
		<p><a href="{[{ adminUrl }]}" class="btn btn-warning btn-sm" target="_blank">
			<i class="fa fa-cog"></i> Go to Integration Settings
		</a></p>
	</div>

	<p ng-if="calls.length == 0">No call records were found.</p>

	<div ng-if="calls.length > 0">
		<table class="table table-striped">
			<thead>
				<th>Number</th>
				<th>Extension</th>
				<th ng-if="!taskId">Task</th>
				<th>Type</th>
				<th>State</th>
				<th></th>
				<th>Duration</th>
				<th>Date</th>
				<th></th>
			</thead>
			<tbody>
				<tr ng-repeat="call in calls">
					<td>{[{ call.number }]}</td>
					<td>{[{ call.extension }]}</td>
					<td ng-if="!taskId"><a href="{!! URL::to('tasks') !!}/{[{ call.task_id }]}">{[{ call.task_id }]}</a></td>
					<td>{[{ call.call_type }]}</td>
					<td>{[{ call.state }]}</td>
					<td><span ng-if="call.message" tooltip="{[{ call.message }]}"><i class="fa fa-envelope"></i></span></td>
					<td>{[{ call.answered_time }]}s</td>
					<td><span tooltip="{[{ call.created_at }]}" tooltip-placement="left">{[{ call.created_at | fromNow }]}</span></td>
					<td><a href="#" ng-click="show(call)" data-eat-click>Open</a></td>
				</tr>
			</tbody>
		</table>

		<div paginator="paginator"></div>
	</div>
</div>