<div class="modal-header">
	<button type="button" class="close" ng-click="cancel()">×</button>
	<h3 class="modal-title"><i class="fa fa-phone"></i> 3CX Call Status</h3>
</div>
<form>
	<div class="modal-body">
		<!-- Initiating state -->
		<div ng-show="callState === 'initiating'" class="text-center">
			<i class="fa fa-spinner fa-spin fa-3x"></i>
			<h4>Initiating Call...</h4>
			<p ng-if="fromExtension">From: <strong><span ng-bind="fromExtension"></span></strong></p>
			<p>To: <strong><span ng-bind="toNumber" style="font-size: 1.4em !important;"></span></strong></p>
		</div>

		<!-- Connected state -->
		<div ng-show="callState === 'connected'" class="text-center">
			<i class="fa fa-phone fa-3x text-success"></i>
			<h4 class="text-success">Call Connected!</h4>
			<p>Call initiated successfully. The phone should be ringing now.</p>
		</div>

		<!-- Error state -->
		<div ng-show="callState === 'error'" class="text-center">
			<i class="fa fa-exclamation-triangle fa-3x text-danger"></i>
			<h4 class="text-danger">Call Failed</h4>
			<p><span ng-bind="errorMessage"></span></p>
			<div ng-if="errorSuggestion" class="alert alert-info">
				<strong>Suggestion:</strong> <span ng-bind="errorSuggestion"></span>
			</div>
		</div>
	</div>
	<div class="modal-footer">
		<button type="button" class="btn btn-default" ng-click="cancel()">Close</button>
	</div>
</form>