<script type="text/ng-template" id="bookings/modals/change-client.html">
	<div class="modal-header">
		<h3 class="modal-title">Change client</h3>
	</div>
	<div class="modal-body">
		<div class="row">
			<div class="col-sm-4">
				<select name="client_type" ng-model="search.type" class="form-control">
					<option value="client">Client</option>
					<option value="customer">Customer</option>
				</select>
			</div>
			<div class="col-sm-8">
				<input type="text" class="form-control search-query" placeholder="Search for {[{ search.type }]}" ng-model="search.query">
			</div>
		</div>
		<div style="height: 200px; overflow-y: scroll; margin-top: 10px; margin-bottom: 10px;">
			<p class="text-center" ng-show="loading">Loading...</p>
			<p class="text-center" ng-show="clients.length === 0">No results</p>
			<table class="table table-condensed" ng-hide="loading || clients.length === 0">
				<thead class="table-header">
					<th>ID</th>
					<th>Name</th>
					<th></th>
				</thead>
				<tbody>
					<tr ng-repeat="client in clients">
						<td>{[{ client.id }]}</td>
						<td>{[{ client.name }]}</td>
						<td><span class="btn btn-default btn-xs pull-right" ng-disabled="selected == client" ng-click="select(client)">Select</span></td>
					</tr>
				</tbody>
			</table>
		</div>
		<div class="headline">
			<h4><i class="fa fa-user"></i> Selected client</h4>
		</div>
		<p class="text-center" ng-hide="selected">Nothing selected</p>
		<div class="well">
			<table class="table" ng-show="selected.id" ng-form="changeClientForm">
				<tbody>
					<tr>
						<td><strong>ID:</strong></td>
						<td>{[{ selected.id }]}</td>
					</tr>
					<tr>
						<td><strong>Name:</strong></td>
						<td>{[{ selected.name }]}</td>
					</tr>
					<tr ng-show="selected.type == 'client'">
						<td><strong>Site:</strong></td>
						<td><select class="form-control" ng-model="selected.site_id" ng-options="o.id as o.name for o in selected.sites" ng-required="selected.type == 'client'"></select></td>
					</tr>
					<tr ng-show="selected.type == 'client'">
						<td><strong>Site user:</strong></td>
						<td><select class="form-control" ng-model="selected.site_user_id" ng-options="o.id as o.name for o in getSite().users" ng-required="selected.site_id"></select></td>
					</tr>
				</tbody>
			</table>
		</div>
	</div>
	<div class="modal-footer">
		<button class="btn btn-default" ng-click="cancel()">Cancel</button>
		<button class="btn btn-primary" ng-disabled="!selected || changeClientForm.$invalid" ng-click="submit()">Change client</button>
	</div>
</script>