<div class="widget">
	<div class="widget-header">
		<i class="fa fa-th-list"></i>
		<h3>{[{ title }]}</h3>
	</div>
	<div class="widget-content">

		<div class="well">
			<div class="row">
				<div class="col-sm-3">
					<input type="text" class="form-control" name="seraph_id" ng-model="filters.id" placeholder="Seraph ID">
				</div>
				<div class="col-sm-4">
					<input type="hidden" ng-model="filters.client" ui-select2="service.select2ClientOptions">
				</div>
				<div class="col-sm-5">
					<label class="checkbox-inline"><input type="checkbox" name="paid" ng-model="filters.paid"> Paid</label>
					<label class="checkbox-inline"><input type="checkbox" name="due" ng-model="filters.due"> Due</label>
					<label class="checkbox-inline"><input type="checkbox" name="emailed" ng-model="filters.emailed"> Emailed</label>
					<label class="checkbox-inline"><input type="checkbox" name="not_emailed" ng-model="filters.not_emailed"> Not Emailed</label>
				</div>
			</div>
		</div>

		<table class="table table-striped table-condensed table-hover">
			<thead class="table-header">
				<th></th>
				<th>Seraph ID</th>
				<th>Xero ID</th>
				<th>Task ID</th>
				<th>Customer</th>
				<th>Items</th>
				<th class="centered">Emailed</th>
				<th>Total Price</th>
				<th>Created By</th>
				<th>Date</th>
				<th class="centered">Paid</th>
				<th class="centered">Xero Sync</th>
			</thead>
			<tbody>
				<tr ng-repeat="invoice in data" ng-click="loadInvoice(invoice)">
					<td><i class="fa fa-random" ng-show="invoice.converted_at" tooltip="Converted from a quote on {[{ invoice.converted_at | date:'dd-MM-yy h:mm a' }]}"></i></td>
					<td>{[{ invoice.id }]}</td>
					<td>{[{ invoice.xeroId || 'Not synced' }]}</td>
					<td>{[{ invoice.task_id }]}</td>
					<td>{[{ invoice.client.name }]}</td>
					<td>{[{ invoice.items.length }]}</td>
					<td class="centered"><i ng-class="{'fa fa-check': invoice.emails.length > 0}"></i></td>
					<td>{[{ invoice.total_price | currency:"£" }]}</td>
					<td>{[{ invoice.creator.name }]}</td>
					<td>{[{ invoice.created_at | date:'dd-MM-yy h:mm a' }]}</td>
					<td class="centered"><i ng-class="{'fa fa-check': invoice.paid == '1'}"></i></td>
					<td class="centered">
						<!-- Show sync status -->
						<i ng-if="invoice.xeroId" class="fa fa-check" tooltip="Synced to Xero" style="color: #28a745;"></i>
						<button ng-if="!invoice.xeroId" 
								class="btn btn-xs" 
								ng-click="sendToXero(invoice); $event.stopPropagation();"
								ng-disabled="invoice.xero_syncing"
								tooltip="Send invoice to Xero"
								style="background-color: #0078c8; color: white; border-color: #0078c8;">
							<i ng-class="{'fa fa-cloud': !invoice.xero_syncing, 'fa fa-spinner fa-spin': invoice.xero_syncing}"></i>
							Send to Xero
						</button>
					</td>
				</tr>
			</tbody>
		</table>
		<div paginator="paginator"></div>
	</div>
</div>