<form class="form-inline float-right">
	<button class="btn btn-sm btn-success mr-2" data-target="#addSubscriptionModal" data-toggle="modal" ng-click="resetFormFields()">
		<i class="fas fa-plus"></i>	add
	</button>
	<button class="btn btn-sm btn-primary" ng-click="refresh()">
		<i class="fas fa-redo"></i>	refresh
	</button>
</form>

<h3>Subscriptions (Postgres database)</h3>

<table class="table table-sm table-striped small mt-4">
	<thead>
		<tr>
			<th class="col-xs-2">ID</th>
			<th class="col-xs-1">Subscriber</th>
			<th class="col-xs-1">Creation Date</th>
			<th class="col-xs-1">Topic</th>
			<th class="col-xs-3">Conditions</th>
			<th class="col-xs-1 text-center">Notification frequency</th>
			<th class="col-xs-1 text-center">Notification mode</th>
			<th class="col-xs-1 text-right">Last notification</th>
			<th class="col-xs-1"></th>
		</tr>
	</thead>
	<tbody>
		<tr ng-if="list.length == 0">
			<td colspan="8" class="text-center text-muted">No subscriptions</td>
		</tr>
		<tr ng-repeat="s in list">
			<th style="font-family: monospace;">{{s.subscriptionId}}</th>
			<td>{{s.subscriber}}</td>
			<td>{{s.creationDate | date:'yyyy-MM-dd HH:mm'}}</td>
			<td>{{s.topic}}</td>
			<td style="font-family: monospace;">
				<ul>
					<li ng-repeat="c in s.conditionsAsList">
						<b>{{c.field}}</b>
						<ul>
							<li ng-repeat="p in c.listParams">
								<b>{{c.operator}}</b>
								<span ng-if="c.operator != 'RANGE'">"{{p.value}}"</span>
								<span ng-if="c.operator == 'RANGE'">[{{p.value ? '"' + p.value + '"': 'NULL'}}, {{p.otherValue ? '"' + p.otherValue + '"' : 'NULL'}}]</span>
							</li>
						</ul>
					</li>
				</ul>
			</td>
			<td class="text-center">{{s.frequency}}</td>
			<td class="text-center">{{s.mode}}</td>
			<td class="text-right">{{s.lastNotificationDate ? (s.lastNotificationDate |  date:'yyyy-MM-dd HH:mm') : 'not yet'}}</td>
			<td class="text-right">
				<button type="button" class="btn btn-sm btn-primary" ng-click="resetNotificationDate(s.subscriptionId)">
					reset date
				</button>
				<button type="button" class="btn btn-sm btn-primary" ng-click="startMatching(s.subscriptionId)">
					match
				</button>
				<button type="button" class="btn btn-sm btn-danger" ng-click="remove(s.subscriptionId)">
					<i class="fas fa-minus"></i>
				</button>
			</td>
		</tr>
	</tbody>
</table>

<div id="addSubscriptionModal" class="modal fade" tabindex="-1" role="dialog">
	<div class="modal-dialog modal-lg">
		<div class="modal-content">
			<div class="modal-header">
				<h4 class="modal-title">Add subscription</h4>
				<button type="button" class="close" data-dismiss="modal">
					<span aria-hidden="true">&times;</span>
				</button>
			</div>
			<div class="modal-body">
				<form name="newSubscriptionForm">
					<div class="form-group row" ng-class="{'text-danger' : !subscriber, 'text-success' : subscriber }">
						<label class="control-label col-sm-4">Subscriber</label>
						<div class="col-sm-8">
							<input type="email" class="form-control" placeholder="email" required="required" ng-model="subscriber"/>
						</div>
					</div>
					<div class="form-group row" ng-class="{'text-danger' : !frequency, 'text-success' : frequency }">
						<label class="control-label col-sm-4">Notification frequency</label>
						<div class="col-sm-8">
							<select class="form-control" ng-model="frequency" required="required">
								<option>never</option>
								<option>daily</option>
								<option>weekly</option>
								<option>monthly</option>
								<option>realtime</option>
							</select>
						</div>
					</div>
					<div class="form-group row" ng-class="{'text-danger' : !mode, 'text-success' : mode }">
						<label class="control-label col-sm-4">Notification mode</label>
						<div class="col-sm-8">
							<select class="form-control" ng-model="mode" required="required">
								<option>MOCK</option>
								<option>EMAIL</option>
							</select>
						</div>
					</div>
					<div class="form-group row" ng-class="{'text-danger' : !topicType, 'text-success' : topicType }">
						<label class="control-label col-sm-4">Topic name</label>
						<div class="col-sm-8">
							<select class="form-control" ng-options="topic.name for topic in availableTopics" ng-model="topicType" ng-change="onSelectTopicType(topicType)" required="required"></select>
						</div>
					</div>
					<div class="form-group row" ng-repeat="t in topicParts" ng-if="t.variable" ng-class="{'text-danger' : !t.value, 'text-success' : t.value}">
						<label class="control-label col-sm-4" style="font-family: monospace;">{{t.name}}</label>
						<div class="col-sm-8">
							<input type="text" class="form-control" required="required" ng-model="t.value"  ng-pattern="/^[a-zA-Z0-9._-]+$/" ng-change="updateTopic()"/>
						</div>
					</div>
					<div class="form-group row">
						<label class="control-label col-sm-4">Topic expression</label>
						<p class="form-control-static col-sm-8">{{topic ? topic : 'missing'}}</p>
					</div>
					
					
					<div class="form-group row">
						<label class="control-label col-sm-4">Conditions (on map values)</label>
						<div class="col-sm-8">
							<table class="table table-sm table-borderless small">
								<tbody ng-repeat="tc in topicConditions" style="border: 2px solid #ddd;">
									<tr ng-class="{'text-danger' : !tc.field, 'text-success' : tc.field }">
										<td class="col-xs-1" rowspan="{{tc.listParams.length + 4}}">
											<button type="button" class="btn btn-sm btn-danger" ng-click="removeCondition($index)">
												<i class="fas fa-minus"></i>
											</button>
										</td>
										<th class="col-xs-2 control-label">Field</th>
										<td class="col-sm-9" colspan="3">
											<input type="text" class="form-control" required="required" ng-model="tc.field" required="required" />
										</td>
									</tr>
									<tr ng-class="{'text-danger' : !tc.fieldType, 'text-success' : tc.fieldType }">
										<th class="control-label">Field type</th>
										<td colspan="3">
											<select class="form-control" ng-model="tc.fieldType" required="required">
												<option>STRING</option>
												<option>INTEGER</option>
												<option>FLOAT</option>
												<option>DATE</option>
												<option>BOOLEAN</option>
												<option>LIST_STRING</option>
												<option>LIST_INTEGER</option>
												<option>LIST_FLOAT</option>
												<option>LIST_DATE</option>
												<option>LIST_BOOLEAN</option>
											</select>
										</td>
									</tr>
									<tr ng-class="{'text-danger' : !tc.operator, 'text-success' : tc.operator }">
										<th class="control-label">Operator</th>
										<td colspan="3">
											<select class="form-control" ng-model="tc.operator" required="required">
												<option>EXACT</option>
												<option>MATCH_ANY</option>
												<option>MATCH_ALL</option>
												<option>RANGE</option>
											</select>
										</td>
									</tr>
									
									<tr ng-class="{'text-danger' : !(p.value || p.otherValue), 'text-success' : p.value || p.otherValue}" ng-if="$parent.tc.operator == 'RANGE'" ng-repeat="p in tc.listParams">
										<th class="control-label" rowspan="{{$parent.tc.listParams.length}}" ng-if="$first">Range</th>
										<td><input type="text" class="form-control" ng-model="p.value" /></td>
										<td><input type="text" class="form-control" ng-model="p.otherValue" /></td>
										<td>
											<button type="button" class="btn btn-sm btn-danger" ng-click="$parent.tc.listParams.splice($index, 1)">
												<i class="fas fa-minus"></i>
											</button>
										</td>
									</tr>
									<tr ng-class="{'text-danger' : !p.value, 'text-success' : p.value }" ng-if="$parent.tc.operator != 'RANGE'" ng-repeat="p in tc.listParams">
										<th class="control-label" rowspan="{{$parent.tc.listParams.length + 1}}" ng-if="$first">Values</th>
										<td colspan="2"><input type="text" class="form-control" ng-model="p.value" /></td>
										<td>
											<button type="button" class="btn btn-sm btn-danger" ng-click="$parent.tc.listParams.splice($index, 1)">
												<i class="fas fa-minus"></i>
											</button>
										</td>
									</tr>
									<tr>
										<td colspan="3">
											<button type="button" class="btn btn-sm btn-success" ng-click="tc.listParams.push({ 'value' : '', 'otherValue': '' })">
												<i class="fas fa-plus"></i> add
											</button>
										</td>
									</tr>
								</tbody>
								<tfoot>
									<tr>
										<td colspan="5">
											<button type="button" class="btn btn-sm btn-success" ng-click="addCondition()">
												<i class="fas fa-plus"></i>
												add condition
											</button>
										</td>
									</tr>
								</tfoot>
							</table>
						</div>
					</div>
					
				</form>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
				<button type="submit" class="btn btn-primary" data-dismiss="modal" ng-disabled="newSubscriptionForm.$invalid" ng-click="add(subscriber, topic, frequency, mode, topicConditions)">Add</button>
			</div>
		</div>
	</div>
</div>
