<div class="box mb-10">
  <div class="row">
    {{#if (and editing (gt alertRules.length 1))}}
      <div class="pull-right">
        {{#if canRemoveRule}}
          <button class="btn bg-transparent text-small vertical-middle" {{action removeRule model}}>
            {{t "alertPage.newOrEdit.removeAlert"}}
          </button>
        {{/if}}
      </div>
    {{else}}
      <!-- 28px is the height of the button, no jumpy -->
      <div style="height: 28px;"></div>
    {{/if}}
  </div>
  <div class="row">
    <div class="col span-1 text-right">
      <div class="pt-10">
        <label>
          {{t "formNameDescription.name.label"}}
        </label>
      </div>
    </div>
    <div class="col span-10">
      {{input
        type="text"
        value=model.name
        placeholder=(t "formNameDescription.name.placeholder")
      }}
    </div>
  </div>
  <section class="row">
    <div class="col span-1 text-right">
      <div class="pt-10">
        <label>
          {{#if (eq model._targetType "metric")}}
            {{t "alertPage.newOrEdit.whenAn"}}
          {{else}}
            {{t "alertPage.newOrEdit.whenA"}}
          {{/if}}
        </label>
      </div>
    </div>

    <div class="col span-10">

      <div class="row">
        <div class="col span-2">
          <label class="acc-label">
            {{radio-button selection=model._targetType value="systemService"}}
            {{t "alertPage.targetTypes.systemService"}}
          </label>
        </div>
        <div class="col span-9 mt-0">
          {{searchable-select
            content=systemServices
            class="form-control"
            value=model.systemServiceRule.condition
            placeholder=(t "alertPage.newOrEdit.systemServicePlaceholder")
            readOnly=(not-eq model._targetType "systemService")
          }}
        </div>
      </div>

      <div class="row">
        <div class="col span-2">
          <label class="acc-label">
            <span class="pr-10">
              {{radio-button
                selection=model._targetType
                value="normalEvent"
              }}
              {{t "alertPage.newOrEdit.normal"}}
            </span>
          </label>
          <label class="acc-label">
            {{radio-button
              selection=model._targetType
              value="warningEvent"
            }}
            {{t "alertPage.newOrEdit.warning"}}
          </label>
        </div>
        <div class="col span-9 mt-0">
          {{searchable-select
            content=resourceKinds
            class="form-control"
            value=model.eventRule.resourceKind
            placeholder=(t "alertPage.newOrEdit.resourcePlaceholder")
            readOnly=(not-eq isEventTarget true)
          }}
        </div>
        <div class="col span-1 text-right">
          {{t "alertPage.targetTypes.event"}}
        </div>
      </div>

      <div class="row">
        <div class="col span-2">
          <label class="acc-label">
            {{radio-button
              selection=model._targetType
              value="node"
            }}
            {{t "alertPage.targetTypes.node"}}
          </label>
        </div>
        <div class="col span-9 mt-0">
          {{searchable-select
            content=nodes
            class="form-control"
            value=model.nodeRule.nodeId
            optionValuePath="id"
            optionLabelPath="displayName"
            placeholder=(t "alertPage.newOrEdit.nodePlaceholder")
            readOnly=(not-eq model._targetType "node")
          }}
        </div>
      </div>
      <div class="row">
        <div class="col span-2">
          <label class="acc-label">
            {{radio-button
              selection=model._targetType
              value="nodeSelector"
            }}
            {{t "alertPage.targetTypes.nodeSelector"}}
          </label>
        </div>
        <div class="col span-9 mt-0">
          {{#if (eq model._targetType "nodeSelector")}}
            {{form-key-value
              addActionLabel="alertPage.addSelectorLabel"
              initialMap=model.nodeRule.selector
              changed=(action (mut model.nodeRule.selector))
            }}
          {{else}}
            <button {{action "noop"}} style="cursor:not-allowed;" class="btn bg-disabled icon-btn">
              <span class="darken">
                <i class="icon icon-plus text-small"/>
              </span>
              <span>
                {{t "alertPage.addSelectorLabel"}}
              </span>
            </button>
          {{/if}}
        </div>
      </div>
      <div class="row">
        <div class="col span-2">
          <label class="acc-label" style={{expressionStyle}}>
            {{radio-button
              selection=model._targetType
              value="metric"
              disabled=(not monitoringEnabled)
            }}
            {{t "alertPage.newOrEdit.expression.label"}}
          </label>
        </div>
        <div class="col span-9 mt-0">
          {{alert-select
            content=metricsContent
            class="form-control"
            value=model.metricRule.expression
            readOnly=(or (not-eq model._targetType "metric") graphLoading)
            placeholder="Select a metric"
            allowCustom=true
          }}
          {{#if (eq graphStatus "noData")}}
            <p class="text-error text-small mt-0 mb-0">
              {{t "alertPage.newOrEdit.expression.noData"}}
            </p>
          {{else if (eq graphStatus "error")}}
            <p class="text-error text-small mt-0 mb-0">
              {{t "alertPage.newOrEdit.expression.error"}}
            </p>
          {{/if}}
        </div>
      </div>
    </div>
  </section>
  <hr/>
  <section class="row">
    <div class="col span-1 text-right">
      <div style={{verbStyles}}>
        {{if isEventTarget (t "alertPage.newOrEdit.happens") (t "alertPage.newOrEdit.is")}}
      </div>
    </div>
    {{#if (eq model._targetType "metric")}}
      {{alert/form-comparison-row
        model=model
      }}
      <hr/>
      {{#if (eq graphStatus "success")}}
        <div class="row">
          {{alert-chart
            key=model.id
            series=chartOption.series
            loading=graphLoading
            threshold=model.metricRule.thresholdValue
            tag=model.tag
          }}
        </div>
      {{/if}}
    {{else}}
      <div class="col span-10">
        {{#if (eq model._targetType "systemService")}}
          <label class="acc-label">
            {{radio-button
              selection="whatever"
              value="whatever"
            }}
            {{t "alertPage.newOrEdit.unhealthy"}}
          </label>
        {{else if (or (eq model._targetType "node") (eq model._targetType "nodeSelector"))}}
          <label class="acc-label pr-20">
            {{radio-button
              selection=model.nodeRule.condition
              value="notready"
            }}
            {{t "alertPage.newOrEdit.notReady"}}
          </label>
          <label class="acc-label pr-10">
            {{radio-button
              selection=model.nodeRule.condition
              value="cpu"
            }}
            {{t "alertPage.newOrEdit.cpuUsage"}}
          </label>
          <div style="display:inline-block;width:60px;">
            {{input-integer
              classNames="form-contorl input-sm"
              disabled=(not-eq model.nodeRule.condition "cpu")
              min=1
              value=model.nodeRule.cpuThreshold
            }}
          </div>%

          <label class="ml-20 acc-label pr-20">
            {{radio-button
              selection=model.nodeRule.condition
              value="mem"
            }}
            {{t "alertPage.newOrEdit.memUsage"}}
          </label>
          <div style="display:inline-block;width:60px;">
            {{input-integer
              classNames="form-contorl input-sm"
              disabled=(not-eq model.nodeRule.condition "mem")
              min=1
              max=100
              value=model.nodeRule.memThreshold
            }}
          </div>%
        {{/if}}
      </div>
    {{/if}}
  </section>

  <section class="row">
    <div class="col span-1 text-right">
      {{t "alertPage.newOrEdit.sendA"}}
    </div>
    <div class="col span-10">
      <label class="acc-label mr-10">
        {{radio-button
          selection=model.severity
          value="critical"
        }}
        {{t "alertPage.newOrEdit.critical"}}
      </label>
      <label class="acc-label mr-10">
        {{radio-button
          selection=model.severity
          value="warning"
        }}
        {{t "alertPage.newOrEdit.warning"}}
      </label>
      <label class="acc-label mr-10">
        {{radio-button
          selection=model.severity
          value="info"
        }}
        {{t "alertPage.newOrEdit.info"}}
      </label>
    </div>
    {{#if (and (eq mode "new") (eq level "group"))}}
      {{#advanced-section
        advanced=advanced
      }}
        <div class="row">
          <div class="col span-10 offset-1">
            {{alert/form-row-advanced
              model=model
              alertGroup=alertGroup
              level="rule"
              customClass="box"
            }}
          </div>
        </div>
      {{/advanced-section}}
    {{/if}}
  </section>

  {{#if (and (eq mode "edit") (eq level "group"))}}
    <hr/>
    <div class="row">
      <div class="col span-10 offset-1">
        {{#unless showAdvancedSection}}
          <label class="acc-label mt-20">
            {{t "alertPage.newOrEdit.inherited.label"}}
          </label>
          <div>
            {{#if model.inherited}}
              {{t "generic.enabled"}}
            {{else}}
              {{t "generic.disabled"}}
            {{/if}}
            <button class="btn bg-transparent text-small p-0" {{action "showAdvanced"}}>
              <i class="icon icon-edit"/>
            </button>
          </div>
        {{else}}
          {{alert/form-row-advanced
            model=model
            alertGroup=alertGroup
          }}
        {{/unless}}
      </div>
    </div>
  {{/if}}
</div>

{{#if (eq level "rule")}}
  {{alert/form-advanced
    model=model
    alertGroup=alertGroup
    level=level
  }}
{{/if}}
