<form class="form-inline float-right">
	<button class="btn btn-sm btn-success mr-2" data-target="#addTopicTypeModal" 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>Topic typologies</h3>

<table class="table table-sm table-striped small mt-4">
	<thead>
		<tr>
			<th class="col-xs-2">ID</th>
			<th class="col-xs-2">Name</th>
			<th class="col-xs-1">Producer ID</th>
			<th class="col-xs-2">Topic expression</th>
			<th class="col-xs-3">Topic regex</th>
			<th class="col-xs-2">Required map fields</th>
		</tr>
	</thead>
	<tbody>
		<tr ng-if="list.length == 0">
			<td colspan="6" class="text-center text-muted">No topic types</td>
		</tr>
		<tr ng-repeat="t in list">
			<th style="font-family: monospace;">{{t.id}}</th>
			<td>{{t.name}}</td>
			<td>{{t.producerId}}</td>
			<td style="font-family: monospace;">{{t.expression}}</td>
			<td style="font-family: monospace;">{{t.regex}}</td>
			<td>{{t.mapKeys}}</td>
		</tr>
	</tbody>
</table>

<div id="addTopicTypeModal" 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 topic typology</h4>
				<button type="button" class="close" data-dismiss="modal">
					<span aria-hidden="true">&times;</span>
				</button>
			</div>
			<div class="modal-body">
				<form name="newTopicTypeForm">
					<div class="form-group">
						<label class="control-label"  ng-class="{'text-danger' : !topicName, 'text-success' : topicName}">Name</label>
						<input type="text" class="form-control" placeholder="name" required="required" ng-model="topicName" />
					</div>
					<div class="form-group">
						<label class="control-label" ng-class="{'text-warning' : !topicProducerId, 'text-success' : topicProducerId}">Producer ID</label>
						<input type="text" class="form-control" placeholder="producer" ng-model="topicProducerId" />
					</div>
					<div class="form-group">
						<label class="control-label" ng-class="{'text-success' : topicExpression, 'text-danger' : !topicExpression}">Topic expression</label>
						
						<table class="table table-condensed table-bordered">
							<tr>
								<td ng-repeat="s in segments" valign="middle">
									<select class="form-control" required="required" ng-model="s.type" ng-change="updateTopicExpression()">
										<option>Fixed</option>
										<option>Variable</option>
									</select>
								</td>
								<td rowspan="2" class="text-center" style="width: 80px;">
									<div class="btn-group">
										<button class="btn btn-sm btn-danger" ng-click="segments.splice(-1,1); updateTopicExpression()" ng-disabled="segments.length < 3">
											<i class="fas fa-minus"></i>
										</button>
										<button class="btn btn-sm btn-success" ng-click="segments.push({}); updateTopicExpression()" ng-disabled="segments.length > 5">
											<i class="fas fa-plus"></i>
										</button>
									</div>
								</td>
							</tr>
							<tr>
								<td ng-repeat="s in segments" valign="middle">
									<input type="text" class="form-control"  required="required" disabled="disabled" ng-if="!s.type"  placeholder="..." />
									<input type="text" class="form-control"  required="required" ng-model="s.value"  ng-if="s.type == 'Fixed'" placeholder="segment" ng-pattern="/^[a-zA-Z0-9._-]+$/" ng-change="updateTopicExpression()" />
									<input type="text" class="form-control"  required="required" ng-model="s.value" ng-if="s.type == 'Variable'" placeholder="variable name" ng-pattern="/^[a-zA-Z0-9._-]+$/" ng-change="updateTopicExpression()" />
								</td>
							</tr>
							<tr>
								<td colspan="{{segments.length + 1}}">
									<b>Expression:</b> <span style="font-family: monospace;" ng-class="{'text-success' : topicExpression, 'text-danger' : !topicExpression}">{{topicExpression ? topicExpression : 'invalid'}}</span>
								</td>
							</tr>
						</table>
					</div>
					<div class="form-group">
						<label class="control-label" ng-class="{'text-warning' : topicMapKeys.length == 0, 'text-success' : topicMapKeys.length > 0}">Required map fields (comma separated)</label>
						<input type="text" class="form-control" ng-model="topicMapKeys" ng-list="," ng-trim="true"></input>
						<span class="badge badge-primary" ng-repeat="k in topicMapKeys track by $index" style="margin-left: 4px;">{{k}}</span>
					</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="newTopicTypeForm.$invalid" ng-click="add(topicName, topicProducerId, topicExpression, topicMapKeys)">Add</button>
			</div>
		</div>
	</div>
</div>
