lemur/static/app/angular/notifications/notification/notification.tpl.html

<div class="modal-header">
  <button type="button" class="close" ng-click="cancel()" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  <h3><span ng-show="!notification.fromServer">Create</span><span ng-show="notification.fromServer">Edit</span> Notification <span class="text-muted"><small>you gotta speak louder son!</small></span></h3>
</div>
<div class="modal-body">
    <form name="createForm" class="form-horizontal" role="form" novalidate>
        <div class="form-group"
             ng-class="{'has-error': createForm.label.$invalid, 'has-success': !createForm.label.$invalid&&createForm.label.$dirty}">
            <label class="control-label col-sm-2">
                Label
            </label>
            <div class="col-sm-10">
                <input name="label" ng-model="notification.label" placeholder="Label" class="form-control" required/>
                <p ng-show="createForm.label.$invalid && !createForm.label.$pristine" class="help-block">You must enter an notification label</p>
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-sm-2">
                Description
            </label>
            <div class="col-sm-10">
                <textarea name="comments" ng-model="notification.description" placeholder="Something elegant" class="form-control" ></textarea>
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-sm-2">
                Plugin
            </label>
            <div class="col-sm-10">
                <select class="form-control" ng-model="notification.plugin" ng-options="plugin.title for plugin in plugins" required></select>
            </div>
        </div>
        <div class="form-group" ng-repeat="item in notification.plugin.pluginOptions">
            <ng-form name="subForm" class="form-horizontal" role="form" novalidate>
                <div ng-class="{'has-error': subForm.sub.$invalid, 'has-success': !subForm.sub.$invalid&&subForm.sub.$dirty}">
                    <label class="control-label col-sm-2">
                        {{ item.name | titleCase }}
                    </label>
                    <div class="col-sm-10">
                        <input name="sub" ng-if="item.type == 'int'" type="number" ng-pattern="item.validation" class="form-control" ng-model="item.value"/>
                        <select name="sub" ng-if="item.type == 'select'" class="form-control" ng-options="i as (i | titleCase) for i in item.available" ng-model="item.value"></select>
                        <input name="sub" ng-if="item.type == 'bool'" class="form-control" type="checkbox" ng-model="item.value">
                        <input name="sub" ng-if="item.type == 'str'" ng-pattern="item.validation" type="text" class="form-control" ng-model="item.value"/>
                        <p ng-show="subForm.sub.$invalid && !subForm.sub.$pristine" class="help-block">{{ item.helpMessage }}</p>
                    </div>
                </div>
            </ng-form>
        </div>
        <div class="form-group">
            <label class="control-label col-sm-2">
                Certificates
            </label>
            <div class="col-sm-10">
                <div class="input-group">
                    <input type="text" ng-model="notification.selectedCertificate" placeholder="Certificate Name"
                           uib-typeahead="certificate.name for certificate in certificateService.findCertificatesByName($viewValue)" typeahead-loading="loadingCertificates"
                           class="form-control input-md" typeahead-on-select="notification.attachCertificate($item)" typeahead-wait-ms="500">
                    <span class="input-group-btn">
                        <button ng-model="certificates.show" class="btn btn-md btn-default" uib-btn-checkbox btn-checkbox-true="1" btn-checkbox-false="0">
                            <span class="badge">{{ notification.certificates.total || 0 }}</span>
                        </button>
                    </span>
                </div>
                <table ng-show="notification.certificates" class="table">
                    <tr ng-repeat="certificate in notification.certificates track by $index">
                        <td><a class="btn btn-sm btn-info" href="#">{{ certificate.name }}</a></td>
                        <td><span class="text-muted">{{ certificate.description }}</span></td>
                        <td>
                            <button type="button" ng-click="notification.removeCertificate($index)" class="btn btn-danger btn-sm pull-right">Remove</button>
                        </td>
                    </tr>
                    <tr>
                        <td></td>
                        <td></td>
                        <td><a class="pull-right" ng-click="loadMoreCertificates()"><strong>More</strong></a></td>
                    </tr>
                </table>
            </div>
        </div>
    </form>
</div>
<div class="modal-footer">
    <button ng-click="save(notification)" type="submit" ng-disabled="createForm.$invalid" class="btn btn-primary">Save</button>
    <button ng-click="cancel()" class="btn btn-danger">Cancel</button>
</div>