@section('header')
	@include('common.header')
@stop

@section('content')

	{{-- Declare the main page wrapper and also the AngularJS Controller --}}
	<div id="clients_page" ng-controller="ClientsMainCtrl" ng-cloak>
		<!-- Loading indicator while AngularJS initializes -->
		<div ng-show="!$root.angular_ready" class="text-center" style="padding: 50px;">
			<i class="fa fa-spinner fa-spin fa-2x"></i>
			<h4 style="margin-top: 20px; color: #666;">Loading Clients...</h4>
		</div>

		<script type="text/ng-template" id="clients/overview.html">
			@include('clients::overview')
		</script>

		<script type="text/ng-template" id="clients/client.html">
			@include('clients::client')
		</script>

		<script type="text/ng-template" id="clients/customer.html">
			@include('clients::customer')
		</script>

		@include('clients::templates')

		{{-- Dynamic view loads here --}}
		<div ng-show="$root.angular_ready">
			<!-- Show loading spinner when Angular is ready but data is loading -->
			<div ng-show="loading" class="text-center" style="padding: 50px;">
				<i class="fa fa-spinner fa-spin fa-2x"></i>
				<h4 style="margin-top: 20px; color: #666;">Loading client data...</h4>
			</div>
			<div ng-view></div>
		</div>

	</div>

@stop