<div class="row" ng-cloak style="background: #FFFFFF; border-bottom: 1px dashed #CACACA; border-top: 2px solid #CACACA; margin-bottom: 20px;">
	<div class="col-sm-6">
		<h1 style="margin-left: 20px;"><img ng-src="{[{ summary.user.profile_photo_url }]}" alt="Profile Photo" style="width: 50px; font-size: 7px; border: 1px solid #CACACA; padding: 2px; background: #FFFFFF;"> {[{ summary.name }]}</h1>
	</div>
	<div class="col-sm-6">
		<div id="reportrange" class="pull-right" ng-model="helpers.dates" ng-daterangepicker data-ranges="helpers.daterangepicker.ranges" data-format="MMMM D, YYYY" style="margin-top: 15px; margin-right: 20px;">
			<i class="fa fa-calendar fa-lg"></i>
			<span>{[{ helpers.dates.startDate.format('MMMM D, YYYY') }]} - {[{ helpers.dates.endDate.format('MMMM D, YYYY') }]}</span> <b class="caret"></b>
		</div>
	</div>
</div>

<div class="row">
	<div class="col-sm-3">
		<div class="widget widget-classic">
			<div class="widget-content">
				<p class="lead">General Stats</p>
				<p class="text-center">
					<span tooltip="Feedback received: {[{ summary.rating }]}" tooltip-placement="right"><uib-rating ng-model="summary.rating" max="5" read-only="true"></uib-rating></span>
				</p>
				<table class="table table-striped table-condensed">
					<tbody>
						<tr>
							<td>Registered on</td>
							<td class="centered" ng-bind="summary.user.created_at | moment:'DD/MM/YYYY'"></td>
						</tr>
						<tr>
							<td>Repairs completed</td>
							<td class="centered">{[{ summary.completed.repairs }]}</td>
						</tr>
						<tr>
							<td>Repairs in progress</td>
							<td class="centered">{[{ summary.open.repairs }]}</td>
						</tr>
						<tr>
							<td>Remote Support completed</td>
							<td class="centered">{[{ summary.completed.support }]}</td>
						</tr>
						<tr>
							<td>Remote Support in progress</td>
							<td class="centered">{[{ summary.open.support }]}</td>
						</tr>
						<tr>
							<td>Onsite completed</td>
							<td class="centered">{[{ summary.completed.onsite }]}</td>
						</tr>
						<tr>
							<td>Onsite in progress</td>
							<td class="centered">{[{ summary.open.onsite }]}</td>
						</tr>
						<tr>
							<td>Last login</td>
							<td class="centered">{[{ summary.user.last_login | moment:'DD/MM/YYYY HH:mm' }]}</td>
						</tr>
					</tbody>
				</table>
			</div>
		</div>

		<div class="widget widget-classic">
			<div class="widget-content">
				<p class="lead">Customer Feedback</p>
				<div feedback-list data-reverse="true" data-user="{[{ routeParams.userId }]}"></div>
			</div>
		</div>
	</div>
	<div class="col-sm-9">
		<div class="row">
			<div class="col-sm-3">
				<div class="widget widget-classic">
					<div class="widget-content text-center">
						<h3>
							{[{ summary.income.points }]}
						</h3>
						<small>Points</small>
					</div>
				</div>
			</div>
			<div class="col-sm-3">
				<div class="widget widget-classic">
					<div class="widget-content text-center">
						<h3>
							{[{ summary.income.labour | currency:"£" }]}
						</h3>
						<small>Labour</small>
					</div>
				</div>
			</div>
			<div class="col-sm-3">
				<div class="widget widget-classic">
					<div class="widget-content text-center">
						<h3>
							{[{ summary.income.parts | currency:"£" }]}
						</h3>
						<small>Parts</small>
					</div>
				</div>
			</div>
			<div class="col-sm-3">
				<div class="widget widget-classic">
					<div class="widget-content text-center">
						<h3 ng-class="{'text-danger': summary.load > 100, 'text-warning': summary.load > 75}" tooltip="{[{ summary.open.total }]} opened tasks">
							{[{ summary.load }]}%
						</h3>
						<small>Load</small>
					</div>
				</div>
			</div>
		</div>

		<div labour-points-graph="" data-user-id="routeParams.userId" data-start-date="helpers.dates.startDate" data-end-date="helpers.dates.endDate"></div>

		<div class="widget widget-classic">
			<div class="widget-content">
				<div stats-tasks-list="" data-user-id="routeParams.userId" data-start-date="helpers.dates.startDate" data-end-date="helpers.dates.endDate"></div>
			</div>
		</div>
	</div>
</div>