<!-- Modal message dialog -->
<div class="co-dialog modal fade" id="createNotificationModal">
<div class="modal-dialog">
<div class="modal-content">
<form id="createForm" name="createForm" ng-submit="createNotification()">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true" ng-disabled="creating">×</button>
<h4 class="modal-title">
<i class="fa fa-bell"></i> Create Repository Notification
</h4>
</div>
<div class="modal-body">
<!-- Creating spinner -->
<div class="cor-loader" ng-show="status == 'creating' || status == 'authorizing-email'"></div>
<!-- Authorize e-mail view -->
<div ng-show="status == 'authorizing-email-sent'">
An e-mail has been sent to <code>{{ currentConfig.email }}</code>. Please click the link contained
in the e-mail.
<br><br>
<span class="cor-loader-inline"></span>
</div>
<!-- Authorize e-mail view -->
<div ng-show="status == 'unauthorized-email'">
The e-mail address <code>{{ currentConfig.email }}</code> has not been authorized to receive
notifications from this repository. Please click "Send Authorization E-mail" below to start
the authorization process.
</div>
<!-- Create View -->
<div class="options-table-wrapper">
<table class="options-table" ng-show="status == ''">
<tr>
<td class="name">Notification title:</td>
<td>
<input class="form-control" type="text" placeholder="(Optional Title)" ng-model="currentTitle">
</td>
</tr>
</table>
<table class="options-table" ng-show="status == ''">
<tr>
<td class="name">When this occurs:</td>
<td>
<div class="dropdown-select" placeholder="'(Notification Event)'" selected-item="currentEvent.title"
handle-item-selected="handleEventSelected(datum)" clear-value="clearCounter">
<!-- Icons -->
<i class="dropdown-select-icon fa fa-lg" ng-class="currentEvent.icon"></i>
<!-- Dropdown menu -->
<ul class="dropdown-select-menu pull-right" role="menu">
<li ng-repeat="event in events">
<a ng-click="setEvent(event)">
<i class="fa fa-lg" ng-class="event.icon"></i> {{ event.title }}
</a>
</li>
</ul>
</div>
</td>
</tr>
<tr ng-repeat="field in currentEvent.fields">
<td class="name" valign="top">With {{ field.title }} of:</td>
<td>
<div ng-switch on="field.type">
<select class="form-control" ng-if="field.type == 'enum'"
ng-model="currentEventConfig[field.name]" required>
<option ng-repeat="(key, info) in field.values | orderObjectBy: 'index'" value="{{key}}">{{ info.title }}</option>
</select>
<div class="co-alert co-alert-info"
style="margin-top: 6px; margin-bottom: 10px;"
ng-if="field.values[currentEventConfig[field.name]].description">
{{ field.values[currentEventConfig[field.name]].description }}
</div>
</div>
</td>
</tr>
</table>
<table class="options-table" ng-show="status == ''">
<tr>
<td class="name">Then issue a:</td>
<td>
<div class="dropdown-select" placeholder="'(Notification Action)'" selected-item="currentMethod.title"
handle-item-selected="handleMethodSelected(datum)" clear-value="clearCounter">
<!-- Icons -->
<i class="dropdown-select-icon fa fa-lg" ng-class="currentMethod.icon"></i>
<!-- Dropdown menu -->
<ul class="dropdown-select-menu pull-right" role="menu">
<li ng-repeat="method in methods">
<a ng-click="setMethod(method)">
<i class="fa fa-lg" ng-class="method.icon"></i> {{ method.title }}
</a>
</li>
</ul>
</div>
</td>
</tr>
<tr ng-repeat="field in currentMethod.fields">
<td valign="top" class="name">{{ field.title }}:</td>
<td>
<div ng-switch on="field.type">
<span ng-switch-when="email">
<input type="email" class="form-control" ng-model="currentConfig[field.name]" required>
</span>
<input type="url" class="form-control" ng-model="currentConfig[field.name]" ng-switch-when="url" required>
<input type="text" class="form-control" ng-model="currentConfig[field.name]" ng-switch-when="string" required>
<!-- TODO(jschorr): unify the ability to create an input box with all the usual features -->
<div ng-switch-when="regex">
<input type="text" class="form-control" ng-model="currentConfig[field.name]"
ng-pattern="getPattern(field)"
placeholder="{{ field.placeholder }}"
ng-name="field.name"
id="{{ field.name }}"
required>
<div class="alert alert-warning" style="margin-top: 10px; margin-bottom: 10px"
ng-if="field.regex_fail_message && hasRegexMismatch(createForm.$error, field.name)">
<span ng-bind-html="field.regex_fail_message"></span>
</div>
</div>
<div class="entity-search" namespace="repository.namespace"
placeholder="''"
current-entity="currentConfig[field.name]"
ng-model="currentConfig[field.name]"
allowed-entities="['user', 'team', 'org']"
ng-switch-when="entity"></div>
<div ng-if="getHelpUrl(field, currentConfig)"
style="margin-top: 10px; margin-bottom: 10px">
See: <a href="{{ getHelpUrl(field, currentConfig) }}" ng-safenewtab>{{ getHelpUrl(field, currentConfig) }}</a>
</div>
<div class="co-alert co-alert-info" ng-if="currentMethod.id == 'webhook'"
style="margin-top: 6px; margin-bottom: 0px">
JSON metadata representing the event will be <b>POST</b>ed to the URL.
<br><br>
The contents for each event can be found in the user guide:
<a href="http://docs.quay.io/guides/notifications.html#webhook{{ currentEvent.id ? '_' + currentEvent.id : '' }}"
ng-safenewtab>
http://docs.quay.io/guides/notifications.html
</a>
</div>
</div>
</td>
</tr>
</table>
</div>
</div>
<!-- Auth e-mail button bar -->
<div class="modal-footer" ng-if="status == 'unauthorized-email'">
<button type="button" class="btn btn-success" ng-click="sendAuthEmail()">
Send Authorization E-mail
</button>
<button type="button" class="btn btn-default" data-dismiss="modal" ng-disabled="creating">Cancel</button>
</div>
<!-- Normal button bar -->
<div class="modal-footer" ng-if="status == '' || status == 'creating'">
<button type="submit" class="btn btn-primary"
ng-disabled="createForm.$invalid || !currentMethod.id || !currentEvent.id || creating">
Create Notification
</button>
<button type="button" class="btn btn-default" data-dismiss="modal" ng-disabled="creating">Cancel</button>
</div>
</form>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->