{{template "header.tpl" .}}
	<div class="cf-container container">

		<div class="row">
			<div class="col-sm-12">
				<h2>Notification Rules</h2>
				<div id="id-alldis" style="padding: 15px 15px 0 15px; display: none">
					<span class="badge label-default"><b><em class="cf-lineicon icon-volume-off"></em></b></span>
					&nbsp; No rules are active &mdash; notifications will not be sent.
				</div>
				<div style="padding: 15px 15px 0 15px">
					When a source triggers an alert, all rules listed below are examined. If a rule is active and
					the name matches, then notifications are sent to the listed
					destinations.
				</div>
				<div style="padding: 15px 15px 0 15px">
					<table id="id-table" class="table table-striped dt-responsive">
						<thead>
							<tr>
								<th width="5%" style="padding-right: 8px">Active?</th>
								<th width="41%">When these sources trigger an alert..</th>
								<th>..send notifications to:</th>
								<th width="10%">Actions</th>
							</tr>
						</thead>
						<tbody id="id-tbody">
							<tr id="id-addanother">
								<td colspan="4">
									<a href="#" id="id-addrule"><em class="icon icon-plus"></em> add another</a>
								</td>
							</tr>
						</tbody>
					</table>
				</div>
				<div style="padding: 0px 15px 0 15px">
					<span id="id-nocfg"></span>
				</div>
			</div>
		</div>

	</div><!-- container -->

	<div id="id-modal-rule" class="modal fade" tabindex="-1" role="dialog">
		<div class="modal-dialog modal-lg">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">&times;</button>
					<h4 class="modal-title" id="id-rd-title"></h4>
				</div>
				<div class="modal-body">
					<div class="container-fluid">

						<div class="row">
							<div class="col-sm-2">
								<b>&nbsp;Active?</b>
							</div>
							<div class="col-sm-8">
								<b>Sources</b> (shell-style wildcards * and ? allowed)
							</div>
						</div>
						<div class="row">
							<div class="col-sm-2">
								<input type="checkbox" id="id-rd-onoff" data-on-text="Yes" data-off-text="No">
							</div>
							<div class="col-sm-8">
								<input type="text" class="form-control" id="id-rd-sources">
							</div>
						</div>

						<div class="row" style="padding-top: 14px">
							<div class="col-sm-12">
								<table class="table table-striped" style="background-color: #fff">
									<thead>
										<tr>
											<th style="width: 16%">Destination</th>
											<th style="width: 78%">Parameters</th>
											<th></th>
										</tr>
									</thead>
									<tbody id="id-rd-tbody">
										<tr id="id-rd-addanother">
											<td>
                        <select class="selectpicker" data-width="auto" id="id-rd-type" autocomplete="off">
													<option value="id-rda-email" selected>Email</option>
													<option value="id-rda-slack">Slack</option>
													<option value="id-rda-hipchat">HipChat</option>
													<option value="id-rda-pagerduty">PagerDuty</option>
													<option value="id-rda-opsgenie">OpsGenie</option>
													<option value="id-rda-victorops">VictorOps</option>
													<option value="id-rda-pushbullet">PushBullet</option>
													<option value="id-rda-webhook">Webhook</option>
												</select>
											</td>
											<td colspan="2">
												<form class="form-inline" id="id-rda-email">
                          <div class="form-group">
                            <input class="form-control" type="text" id="id-rdc-email-to" placeholder="To:" style="width: 184px">
                          </div>
                          <div class="form-group">
                            <input class="form-control" type="text" id="id-rdc-email-cc" placeholder="Cc: (optional)" style="width: 184px">
                          </div>
                          <div class="form-group">
                            <input class="form-control" type="text" id="id-rdc-email-prefix" placeholder="subject prefix (optional)" style="width: 184px">
                          </div>
													<button type="submit" class="btn btn-primary" id="id-rdc-email-add">Add</button>
												</form>
												<form class="form-inline" id="id-rda-hipchat" style="display: none">
                          <div class="form-group">
                            <select class="selectpicker" data-width="auto" id="id-rdc-hipchat-room" data-none-selected-text="No Rooms Configured">
                            </select>
                          </div>
                          <div class="form-group">
                            <input class="form-control" type="text" id="id-rdc-hipchat-prefix" placeholder="message prefix (optional)" style="width: 184px">
                          </div>
													<button type="submit" class="btn btn-primary" id="id-rdc-hipchat-add">Add</button>
												</form>
												<form class="form-inline" id="id-rda-slack" style="display: none">
                          <div class="form-group">
                            <select class="selectpicker" data-width="auto" id="id-rdc-slack-channel" data-none-selected-text="No Channels Configured">
                            </select>
                          </div>
                          <div class="form-group">
                            <input class="form-control" type="text" id="id-rdc-slack-prefix" placeholder="message prefix (optional)" style="width: 184px">
                          </div>
													<button type="submit" class="btn btn-primary" id="id-rdc-slack-add">Add</button>
												</form>
												<form class="form-inline" id="id-rda-pagerduty" style="display: none">
													<button type="submit" class="btn btn-primary" id="id-rdc-pagerduty-add">Add</button>
												</form>
												<form class="form-inline" id="id-rda-opsgenie" style="display: none">
													<button type="submit" class="btn btn-primary" id="id-rdc-opsgenie-add">Add</button>
												</form>
												<form class="form-inline" id="id-rda-victorops" style="display: none">
													<button type="submit" class="btn btn-primary" id="id-rdc-victorops-add">Add</button>
												</form>
												<form class="form-inline" id="id-rda-pushbullet" style="display: none">
                          <div class="form-group">
                            <input class="form-control" type="text" id="id-rdc-pushbullet-prefix" placeholder="message prefix (optional)" style="width: 184px">
                          </div>
													<button type="submit" class="btn btn-primary" id="id-rdc-pushbullet-add">Add</button>
												</form>
												<form class="form-inline" id="id-rda-webhook" style="display: none">
													<div class="form-group">
														<select class="selectpicker" data-width="auto" id="id-rdc-webhook-name" data-none-selected-text="No Webhooks Configured">
														</select>
													</div>
													<button type="submit" class="btn btn-primary" id="id-rdc-webhook-add">Add</button>
												</form>												
											</td>
										</tr>
									</tbody>
								</table>
							</div>
						</div><!-- /row -->
						<div class="row" id="id-errormsg-container" style="display: none">
							<div class="col-sm-12">
								<div class="alert alert-danger" role="alert">
									<p>Please fix these errors to continue:</p>
									<p><ul id="id-errormsg"></ul></p>
								</div>
							</div>
						</div><!-- /row -->
					</div><!-- /container -->

				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
					<button type="button" class="btn btn-primary" id="id-save">Save</button>
				</div>
			</div><!-- /.modal-content -->
		</div><!-- /.modal-dialog -->
	</div><!-- /.modal -->

{{template "footer-pre.tpl" .}}
		<script type="text/javascript">
		var notifConfig={{if .notifConfig}}{{.notifConfig}}{{else}}null{{end}},
			hipChatRooms={{.hipChatRooms}},
			slackChannels={{.slackChannels}},
			webhookNames={{.webhookNames}},
			pagerDutyEnabled={{.pagerDutyEnabled}},
			opsGenieEnabled={{.opsGenieEnabled}},
			victorOpsEnabled={{.victorOpsEnabled}},
			pushbulletEnabled={{.pushbulletEnabled}},
			emailEnabled={{.emailEnabled}},
			webhookEnabled={{.webhookEnabled}},
			sourceNames={{.sourceNames}};
		</script>
		<script src="/js/notifications-min.js" type="text/javascript"></script>
{{template "footer-post.tpl" .}}