<page-header model="ctrl.navModel"></page-header>

<div class="page-container page-body">

  <h3 class="page-sub-heading" ng-hide="ctrl.isNew">Edit Notification Channel</h3>
  <h3 class="page-sub-heading" ng-show="ctrl.isNew">New Notification Channel</h3>

  <form name="ctrl.theForm" ng-if="ctrl.notifiers">
    <div class="gf-form-group">
      <div class="gf-form">
        <span class="gf-form-label width-12">Name</span>
        <input type="text" required class="gf-form-input max-width-15" ng-model="ctrl.model.name" required></input>
      </div>
      <div class="gf-form">
        <span class="gf-form-label width-12">Type</span>
        <div class="gf-form-select-wrapper width-15">
          <select class="gf-form-input" ng-model="ctrl.model.type" ng-options="t.type as t.name for t in ctrl.notifiers" ng-change="ctrl.typeChanged(notification, $index)">
          </select>
        </div>
      </div>
      <gf-form-switch
          class="gf-form"
          label="Send on all alerts"
          label-class="width-14"
          checked="ctrl.model.isDefault"
          tooltip="Use this notification for all alerts">
      </gf-form-switch>
      <gf-form-switch
          class="gf-form"
          label="Include image"
          label-class="width-14"
          checked="ctrl.model.settings.uploadImage"
          tooltip="Captures an image and include it in the notification">
      </gf-form-switch>
      <gf-form-switch
          class="gf-form"
          label="Disable Resolve Message"
          label-class="width-14"
          checked="ctrl.model.disableResolveMessage"
          tooltip="Disable the resolve message [OK] that is sent when alerting state returns to false">
      </gf-form-switch>
      <gf-form-switch
          class="gf-form"
          label="Send reminders"
          label-class="width-14"
          checked="ctrl.model.sendReminder"
          tooltip="Send additional notifications for triggered alerts">
      </gf-form-switch>
      <div class="gf-form-inline">
        <div class="gf-form" ng-if="ctrl.model.sendReminder">
          <span class="gf-form-label width-12">Send reminder every
            <info-popover mode="right-normal" position="top center">
              Specify how often reminders should be sent, e.g. every 30s, 1m, 10m, 30m or 1h etc.
            </info-popover>
          </span>
          <input type="text" placeholder="Select or specify custom" class="gf-form-input width-15" ng-model="ctrl.model.frequency"
            bs-typeahead="ctrl.getFrequencySuggestion" data-min-length=0 ng-required="ctrl.model.sendReminder">
        </div>
      </div>
      <div class="gf-form">
          <span class="alert alert-info width-30" ng-if="ctrl.model.sendReminder">
            Alert reminders are sent after rules are evaluated. Therefore a reminder can never be sent more frequently than a configured alert rule evaluation interval.
          </span>
        </div>
    </div>

    <div class="gf-form-group" ng-include src="ctrl.notifierTemplateId">
    </div>

    <div class="gf-form-group gf-form-button-row">
			<button type="submit" ng-click="ctrl.save()" class="btn btn-primary width-7">Save</button>
			<button type="submit" ng-click="ctrl.testNotification()" class="btn btn-secondary width-7">Send Test</button>
			<a href="alerting/notifications" class="btn btn-inverse">Back</a>
    </div>
  </form>
</div>
