<div ng-controller="ListCtrl">
<div ng-controller="MonitoringLocationsListCtrl">
	<!-- Modal form for adding filters -->
	<div id="filterModal" class="modal fade" tabindex="-1">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-body">
					<!-- Filter form -->
					<label>Add Filter:</label>
					<form class="form-inline" onsubmit="$('#filterModal').modal('hide')" ng-submit="addSearchClause(clause)">
						<div class="form-group">
						<select class="form-control custom-select" ng-model="clause.property" ng-init="clause.property = 'locationName'">
							<option value="locationName">Location Name</option>
							<option value="monitoringArea">Monitoring Area</option>
							<option value="geolocation">Geolocation</option>
							<option value="latitude">Latitude</option>
							<option value="longitude">Longitude</option>
							<option value="priority">Priority</option>
						</select>
						<select class="form-control custom-select" ng-model="clause.operator" ng-init="clause.operator = 'EQ'">
							<option value="EQ">=</option>
							<option value="NE">!=</option>
							<option value="LT">&lt;</option>
							<option value="LE">&lt;=</option>
							<option value="GT">&gt;</option>
							<option value="GE">&gt;=</option>
						</select>
						<input name="clause-value-text"      class="form-control" type="text"   ng-model="clause.value" ng-if="clause.property !== 'latitude' &amp;&amp; clause.property !== 'longitude' &amp;&amp; clause.property !== 'priority'">
						<input name="clause-value-number"    class="form-control" type="number" ng-model="clause.value" min="{{clause.property === 'priority' ? '0' : ''}}" ng-if="clause.property === 'priority'">
						<input name="clause-value-latitude"  class="form-control" type="number" step="any" ng-model="clause.value" min="{{clause.property === 'latitude' ? '-90.0' : ''}}" max="{{clause.property === 'latitude' ? '90.0' : ''}}" ng-if="clause.property === 'latitude'">
						<input name="clause-value-longitude" class="form-control" type="number" step="any" ng-model="clause.value" min="-180.0" max="180.0" ng-if="clause.property === 'longitude'">
						</div>
						<br><br>
						<button class="btn btn-secondary" type="submit">Submit</button>
					</form>
				</div>
			</div>
		</div>
	</div>

	<!-- Modal form for adding a new location -->
	<div id="addLocationModal" class="modal fade" tabindex="-1">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-body">
					<!-- Filter form -->
					<!-- TODO: Add client-side validation -->
					<h3>Add a new Monitoring Location</h3>
					<form onsubmit="$('#addLocationModal').modal('hide')" ng-submit="update(newItem)">
						<div class="form-group">
							<label for="locationName">Location Name</label>
							<input class="form-control" type="text" ng-model="newItem['location-name']" required>
						</div>
						<div class="form-group">
							<label for="monitoringArea">Monitoring Area</label>
							<input class="form-control" type="text" ng-model="newItem['monitoring-area']" required>
						</div>
						<div class="form-group">
							<label for="geolocation">Geolocation</label>
							<input class="form-control" type="text" ng-model="newItem.geolocation">
						</div>
						<div class="form-group">
							<label for="latitude">Latitude</label>
							<input class="form-control" type="number" step="any" ng-model="newItem.latitude" min="-90.0" max="90.0">
						</div>
						<div class="form-group">
							<label for="longitude">Longitude</label>
							<input class="form-control" type="number" step="any" ng-model="newItem.longitude" min="-180.0" max="180.0">
						</div>
						<div class="form-group">
							<label for="priority">Priority</label>
							<input class="form-control" type="number" ng-model="newItem.priority">
						</div>
						<button class="btn btn-secondary" type="submit">Submit</button>
					</form>
				</div>
			</div>
		</div>
	</div>

	<!-- Modal help window -->
	<div id="helpModal" class="modal fade" tabindex="-1">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-body">
					<!-- Filter form -->
					<h3>Help</h3>

					<h4>Filtering</h4>
					<p>
						Click on the <i class="fas fa-magnifying-glass-plus"></i> icon to filter the list. You can match a portion of a value by using
						the * character as a wildcard value. Click on the <i class="fas fa-ban"> icon to clear all filters.</i>
					</p>

					<h4>Filter by Example</h4>
					<p>
						You can click on the <i class="far fa-square-plus"></i> icon next to a value to only show rows that contain that value. 
						If you click on the <i class="far fa-square-minus"></i> icon, it will remove rows with that value from the results.
						For timestamp values, clicking on the <i class="fas fa-square-caret-left"></i> icon will show timestamps newer than the specified
						value and clicking on the <i class="fas fa-square-caret-right"></i> icon will show timestamps older than the value.
					</p>

					<h4>Sorting</h4>
					<p>Click on a column header to sort by that column. Click the same column again to reverse the sort order.</p>

					<h4>Items per Page</h4>
					<p>You can change the number of items per page by entering a numeric value in the <i class="fas fa-table-list"></i> box.</p>
				</div>
			</div>
		</div>
	</div>


	<!-- Filter list -->
	<div class="well well-sm">
		<span class="h5" style="line-height:2.8;">
			Filters&nbsp;&nbsp;
			<a href onClick="$('#filterModal').modal()"><i class="fas fa-magnifying-glass-plus fa-lg"></i></a>
			&nbsp;
			<a href onClick="$('#helpModal').modal()"><i class="fas fa-circle-question fa-lg"></i></a>
			&nbsp;
			<a href ng-click="clearSearch()"><i class="fas fa-ban fa-lg"></i></a>
			&nbsp;
		</span>
		<span ng-hide="query.searchClauses.length == 0">
			<span ng-repeat="clause in query.searchClauses">
				<div class="btn-group" style="margin:3px;">
					<button class="btn btn-primary" ng-click="removeSearchClause(clause)">
						{{clause.property | property}}
						{{clause.operator | operator : clause.value}}
						{{clause.value | value : clause.property}}
						&nbsp;
						<i class="fas fa-xmark"></i>
					</button>
				</div>
			</span>
		</span>
	</div>

	<!-- Paging controls -->
	<div>
		<div class="">
			<button type="button" role="button" class="btn btn-secondary {{(query.offset-query.limit) &lt; 0 ? 'disabled' : ''}}" ng-click="setOffset(0)">
				<i class="fas fa-backward"></i>&nbsp;&nbsp;First
			</button>
			<button type="button" role="button" class="btn btn-secondary ml-2 {{(query.offset-query.limit) &lt; 0 ? 'disabled' : ''}}" ng-click="setOffset(query.offset-query.limit)">
				<i class="fas fa-play fa-flip-horizontal"></i>&nbsp;&nbsp;Previous
			</button>

			<div class="btn-group">
				<a class="btn btn-secondary" ng-click="setOffset(query.offset-(3*query.limit))" ng-hide="(query.offset-(3*query.limit)) &lt; 0" style="width:5em;">
					{{(query.offset/query.limit) - 2}}
				</a>
				<a class="btn btn-secondary" ng-click="setOffset(query.offset-(2*query.limit))" ng-hide="(query.offset-(2*query.limit)) &lt; 0" style="width:5em;">
					{{(query.offset/query.limit) - 1}}
				</a>
				<a class="btn btn-secondary" ng-click="setOffset(query.offset-query.limit)" ng-hide="(query.offset-query.limit) &lt; 0" style="width:5em;">
					{{query.offset/query.limit}}
				</a>
				<a class="btn btn-secondary active" ng-show="query.maxOffset &gt; 0" style="width:5em;">
					{{(query.offset/query.limit) + 1}}
				</a>
				<a class="btn btn-secondary" ng-click="setOffset(query.offset+query.limit)" ng-hide="(query.offset+query.limit) &gt; query.maxOffset" style="width:5em;">
					{{(query.offset/query.limit) + 2}}
				</a>
				<a class="btn btn-secondary" ng-click="setOffset(query.offset+(2*query.limit))" ng-hide="query.offset+(2*query.limit) &gt; query.maxOffset" style="width:5em;">
					{{(query.offset/query.limit) + 3}}
				</a>
				<a class="btn btn-secondary" ng-click="setOffset(query.offset+(3*query.limit))" ng-hide="query.offset+(3*query.limit) &gt; query.maxOffset" style="width:5em;">
					{{(query.offset/query.limit) + 4}}
				</a>
			</div>

			<div class="pull-right">
				<!-- Add 1 to each offset since they are zero-based -->
				<form class="form-inline" ng-submit="setLimit(query.newLimit)">
					<div class="input-group" style="margin-left:10px;">
						<div class="input-group-prepend">
							<span class="input-group-text"><i class="fas fa-table-list"></i></span>
						</div>
						<input class="form-control" type="number" ng-model="query.newLimit">
					</div>

					<button type="button" role="button" class="btn btn-secondary mx-2 {{(query.offset+query.limit) &gt; query.maxOffset ? 'disabled' : ''}}" ng-click="setOffset(query.offset + query.limit)">
						Next&nbsp;&nbsp;<i class="fas fa-play"></i>
					</button>

					<button type="button" role="button" class="btn btn-secondary {{(query.offset+query.limit) &gt; query.maxOffset ? 'disabled' : ''}}" ng-click="setOffset(1000000000)">
						Last&nbsp;&nbsp;<i class="fas fa-forward"></i>
					</button>
				</form>
			</div>

			<h5 class="pull-right col-form-label" ng-show="query.maxOffset &lt; 0">No items found.</h5>
			<h5 class="pull-right col-form-label" ng-show="query.maxOffset &gt;= 0">{{query.offset === query.lastOffset ? "Item " + (query.offset + 1) : "Items " + (query.offset + 1) + " - " + (query.lastOffset + 1)}} ({{query.maxOffset + 1}} total)</h5>
		</div>
	</div>

	<br>

	<div class="card">
		<!-- The style is here to override a weird Chrome user agent stylesheet issue -->
		<table class="table table-bordered table-striped" style="font-size:100%">
			<tbody>
				<tr>
					<th>
						<a href ng-click="changeOrderBy('locationName')">Location Name</a>
						<i ng-show="query.orderBy === 'locationName' &amp;&amp; query.order === 'asc'" class="fas fa-sort-up"></i>
						<i ng-show="query.orderBy === 'locationName' &amp;&amp; query.order === 'desc'" class="fas fa-sort-down"></i>
					</th>
					<th>
						<a href ng-click="changeOrderBy('monitoringArea')">Monitoring Area</a>
						<i ng-show="query.orderBy === 'monitoringArea' &amp;&amp; query.order === 'asc'" class="fas fa-sort-up"></i>
						<i ng-show="query.orderBy === 'monitoringArea' &amp;&amp; query.order === 'desc'" class="fas fa-sort-down"></i>
					</th>
					<th>
						<a href ng-click="changeOrderBy('geolocation')">Geolocation</a>
						<i ng-show="query.orderBy === 'geolocation' &amp;&amp; query.order === 'asc'" class="fas fa-sort-up"></i>
						<i ng-show="query.orderBy === 'geolocation' &amp;&amp; query.order === 'desc'" class="fas fa-sort-down"></i>
					</th>
					<th>
						<a href ng-click="changeOrderBy('latitude')">Latitude</a>
						<i ng-show="query.orderBy === 'latitude' &amp;&amp; query.order === 'asc'" class="fas fa-sort-up"></i>
						<i ng-show="query.orderBy === 'latitude' &amp;&amp; query.order === 'desc'" class="fas fa-sort-down"></i>
					</th>
					<th>
						<a href ng-click="changeOrderBy('longitude')">Longitude</a>
						<i ng-show="query.orderBy === 'longitude' &amp;&amp; query.order === 'asc'" class="fas fa-sort-up"></i>
						<i ng-show="query.orderBy === 'longitude' &amp;&amp; query.order === 'desc'" class="fas fa-sort-down"></i>
					</th>
					<th>
						<a href ng-click="changeOrderBy('priority')">Priority</a>
						<i ng-show="query.orderBy === 'priority' &amp;&amp; query.order === 'asc'" class="fas fa-sort-up"></i>
						<i ng-show="query.orderBy === 'priority' &amp;&amp; query.order === 'desc'" class="fas fa-sort-down"></i>
					</th>
				</tr>

				<tr ng-repeat="item in items">
					<td class="text-nowrap" style="line-height:24px;">
						{{item['location-name']}}
						<a href style="text-decoration: none;" ng-click="deleteItem(item)"><i class="fas fa-trash-can fa-lg"></i></a>
						<a href style="text-decoration: none;" ng-click="addSearchClause({property:'locationName',operator:'EQ',value:item['location-name']})"><i class="far fa-square-plus fa-lg"></i></a>
						<a href style="text-decoration: none;" ng-click="addSearchClause({property:'locationName',operator:'NE',value:item['location-name']})"><i class="far fa-square-minus fa-lg"></i></a>
					</td>
					<td class="text-nowrap">
						<onms-list-edit-in-place item="item" value="item['monitoring-area']" value-type="'text'" on-submit="update(item)">
							<a href style="text-decoration: none;" ng-click="addSearchClause({property:'monitoringArea',operator:'EQ',value:item['monitoring-area']})"><i class="far fa-square-plus fa-lg"></i></a>
							<a href style="text-decoration: none;" ng-click="addSearchClause({property:'monitoringArea',operator:'NE',value:item['monitoring-area']})"><i class="far fa-square-minus fa-lg"></i></a>
						</onms-list-edit-in-place>
					</td>
					<td class="text-nowrap">
						<onms-list-edit-in-place item="item" value="item['geolocation']" value-type="'text'" on-submit="update(item)">
							<a href style="text-decoration: none;" ng-click="addSearchClause({property:'geolocation',operator:'EQ',value:item['geolocation']})"><i class="far fa-square-plus fa-lg"></i></a>
							<a href style="text-decoration: none;" ng-click="addSearchClause({property:'geolocation',operator:'NE',value:item['geolocation']})"><i class="far fa-square-minus fa-lg"></i></a>
						</onms-list-edit-in-place>
					</td>
					<td class="text-nowrap">
						<onms-list-edit-in-place item="item" value="item['latitude']" value-type="'number'" step="'any'" on-submit="update(item)">
							<span ng-show="item['latitude'] !== null">
								<a href style="text-decoration: none;" ng-click="addSearchClause({property:'latitude',operator:'EQ',value:item['latitude']})"><i class="far fa-square-plus fa-lg"></i></a>
								<a href style="text-decoration: none;" ng-click="addSearchClause({property:'latitude',operator:'NE',value:item['latitude']})"><i class="far fa-square-minus fa-lg"></i></a>
							</span>
						</onms-list-edit-in-place>
					</td>
					<td class="text-nowrap">
						<onms-list-edit-in-place item="item" value="item['longitude']" value-type="'number'" step="'any'" on-submit="update(item)">
							<span ng-show="item['longitude'] !== null">
								<a href style="text-decoration: none;" ng-click="addSearchClause({property:'longitude',operator:'EQ',value:item['longitude']})"><i class="far fa-square-plus fa-lg"></i></a>
								<a href style="text-decoration: none;" ng-click="addSearchClause({property:'longitude',operator:'NE',value:item['longitude']})"><i class="far fa-square-minus fa-lg"></i></a>
							</span>
						</onms-list-edit-in-place>
					</td>
					<td class="text-nowrap">
						<onms-list-edit-in-place item="item" value="item['priority']" value-type="'number'" on-submit="update(item)">
							<span ng-show="item['priority'] !== null">
								<a href style="text-decoration: none;" ng-click="addSearchClause({property:'priority',operator:'EQ',value:item['priority']})"><i class="far fa-square-plus fa-lg"></i></a>
								<a href style="text-decoration: none;" ng-click="addSearchClause({property:'priority',operator:'NE',value:item['priority']})"><i class="far fa-square-minus fa-lg"></i></a>
							</span>
						</onms-list-edit-in-place>
					</td>
				</tr>
			</tbody>
		</table>
	</div>
	<button type="button" role="button" class="btn btn-secondary mb-2" onClick="$('#addLocationModal').modal()">Add a new location</button>
</div>
</div>
