<div class="acc-label pb-5 pt-10">{{t "pipelineNotification.header"}}</div>
<div class="mb-20 mt-20">
  {{#if notificationEnabled}}
    <div class="btn-group no-inline-space">
      <button class="btn btn-link btn-sm bg-default" {{action "disableNotification"}}>{{t "generic.disable"}}</button>
      <button class="btn btn-link btn-sm bg-success">{{t "generic.enabled"}}</button>
    </div>
  {{else}}
    <div class="btn-group no-inline-space">
      <button class="btn btn-link btn-sm bg-primary">{{t "generic.disabled"}}</button>
      <button class="btn btn-link btn-sm bg-defualt" {{action "enableNotification"}}>{{t "generic.enable"}}</button>
    </div>
  {{/if}}
</div>

{{#if notificationEnabled}}
  <section class="box">
    <div class="row">
      <div class="col span-2">
        <div class="pt-10">
          {{t "pipelineNotification.when"}}
        </div>
      </div>
      <div class="col span-9">
        <div class="pt-10">
          <div class="checkbox inline-block">
            <label>
              {{input type="checkbox" checked=failed}}
              {{t "pipelineNotification.condition.failed.label"}}
            </label>
          </div>
          <div class="checkbox inline-block ml-10">
            <label>
              {{input type="checkbox" checked=success}}
              {{t "pipelineNotification.condition.success.label"}}
            </label>
          </div>
          <div class="checkbox inline-block ml-10">
            <label>
              {{input type="checkbox" checked=changed}}
              {{t "pipelineNotification.condition.changed.label"}}
            </label>
          </div>
        </div>
      </div>
    </div>

    {{#unless haveNotifiers}}
      {{#banner-message color="bg-warning mb-0 mt-10"}}
        <p>{{t "alertPage.newOrEdit.noNotifierHelpText"}} {{#link-to-external "notifier" clusterId}} {{t "alertPage.newOrEdit.createOne"}}{{/link-to-external}}.</p>
      {{/banner-message}}
    {{/unless}}
    <div class="row">
      <div class="col span-2">
        {{#if config.recipients.length}}
          <div style="padding-top: 12px;">
            {{t "pipelineNotification.asMessage"}}
          </div>
        {{/if}}
      </div>
      <div class="col span-9">
        {{#each config.recipients as |recipient idx|}}
          {{form-recipient-item
            remove=(action "remove")
            isFirst=(eq idx 0)
            notifiers=notifiers
            model=recipient
          }}
        {{/each}}
        <div class="mt-15">
          <button class="btn bg-link icon-btn p-0" {{action "add"}} disabled={{not haveNotifiers}}>
            <span class="darken"><i class="icon icon-plus text-small"/></span>
            <span>{{t "alertPage.newOrEdit.addRecipient"}}</span>
          </button>
        </div>
      </div>
    </div>
  </section>
{{/if}}
