<div class="box mb-10">
  <div class="row">
    {{#if (and editing (gt alertRules.length 1))}}
      <div class="pull-right">
        {{#if (and (gt alertRules.length 1 ) isCreate)}}
          <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">
      <div class="text-right 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-3">
          <label>
            {{radio-button selection=model._targetType value="pod"}} {{t "alertPage.targetTypes.pod"}}
          </label>
        </div>
        <div class="col span-8 mt-0">
          {{searchable-select
            content=pods
            class="form-control"
            value=model.podRule.podId
            optionValuePath="id"
            optionLabelPath="displayName"
            placeholder=(t "alertPage.newOrEdit.podPlaceholder")
            readOnly=(not-eq model._targetType "pod")
          }}
        </div>
      </div>

      <div class="row">
        <div class="col span-3">
          <label>
            {{radio-button selection=model._targetType value="workload"}} {{t "alertPage.targetTypes.workload"}}
          </label>
        </div>
        <div class="col span-8 mt-0">
          {{searchable-select
            content=workloads
            class="form-control"
            value=model.workloadRule.workloadId
            optionValuePath="id"
            optionLabelPath="displayName"
            placeholder=(t "alertPage.newOrEdit.resourcePlaceholder")
            readOnly=(not-eq model._targetType "workload")
          }}
        </div>
      </div>

      <div class="row">
        <div class="col span-3">
          <label>
            {{radio-button selection=model._targetType value="workloadSelector"}} {{t "alertPage.targetTypes.workloadSelector"}}
          </label>
        </div>
        <div class="col span-8 mt-0">
          {{#if (eq model._targetType "workloadSelector")}}
            {{form-key-value
              addActionLabel="alertPage.addSelectorLabel"
              initialMap=model.workloadRule.selector
              changed=(action (mut model.workloadRule.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-3">
          <label style={{expressionStyle}}>
            {{radio-button selection=model._targetType value="metric" disabled=(not monitoringEnabled)}} {{t "alertPage.newOrEdit.expression.label"}}
          </label>
        </div>
        <div class="col span-8 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}}>{{t "alertPage.newOrEdit.is"}}</div>
    </div>
    {{#if (eq model._targetType "metric")}}
      <div class="row">
        <div class="col span-2 mt-5">
          {{searchable-select
            content=operatorContent
            class="form-control"
            value=model.metricRule.comparison
            readOnly=(not-eq model._targetType "metric")
          }}
        </div>
        <div class="col span-2 mt-5">
          {{input-number
            class="form-control"
            value=model.metricRule.thresholdValue
            readOnly=(not-eq model._targetType "metric")
            placeholder="e.g. 10"
            min=0
          }}
        </div>
        <div class="col span-1 text-right">
          <div style={{verbStyles}}>{{t "alertPage.newOrEdit.for"}}</div>
        </div>
        <div class="col span-4 mt-5">
          {{searchable-select
            content=durationContent
            class="form-control"
            value=model.metricRule.duration
            readOnly=(not-eq model._targetType "metric")
          }}
        </div>
      </div>
      {{#if (eq graphStatus "success")}}
        <hr/>
        <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 "pod")}}
          <label class="mr-10">
            {{radio-button selection=model.podRule.condition value="notrunning"}} {{t "alertPage.newOrEdit.notRunning"}}
          </label>
          <label class="mr-10">
            {{radio-button selection=model.podRule.condition value="notscheduled"}} {{t "alertPage.newOrEdit.notScheduled"}}
          </label>
          <label>
            {{radio-button selection=model.podRule.condition value="restarts"}} {{t "alertPage.newOrEdit.restarted"}}
          </label>
          <div style="display:inline-block;width:80px;">
            {{input-integer
              classNames="form-contorl input-sm"
              disabled=(not-eq model.podRule.condition "restarts")
              placeholder="3"
              min=1
              value=model.podRule.restartTimes
            }}
          </div>
          {{t "alertPage.newOrEdit.restartedTimes"}}
          <div style="display:inline-block;width:80px;">
            {{input-integer
              classNames="form-contorl input-sm"
              disabled=(not-eq model.podRule.condition "restarts")
              placeholder="5"
              min=1
              value=restartIntervalSeconds
            }}
          </div>
          {{t "alertPage.newOrEdit.minutes"}}
        {{else if (or (eq model._targetType "workload") (eq model._targetType "workloadSelector"))}}
          <div class="row">
            <div class="col span-1 mt-0">
              <div style={{verbStyles}}>
                {{t "alertPage.newOrEdit.lessThan"}}
              </div>
            </div>
            <div class="col span-6 mt-0">
              <div class="input-group">
                {{input-slider
                  value=model.workloadRule.availablePercentage
                  valueMin=0
                  valueMax=100
                  step=1
                }}
                <span class="input-group-addon">{{model.workloadRule.availablePercentage}}% {{t "alertPage.newOrEdit.available"}}</span>
              </div>
            </div>
          </div>
        {{else}}
          <div>{{t "alertPage.newOrEdit.moreTarget"}}</div>
        {{/if}}
      </div>
    {{/if}}
  </section>

  <hr>
  <section class="row">
    <div class="col span-1 text-right">
      {{t "alertPage.newOrEdit.sendA"}}
    </div>
    <div class="col span-10">
      <label class="mr-10">{{radio-button selection=model.severity value="critical"}} {{t "alertPage.newOrEdit.critical"}}</label>
      <label class="mr-10">{{radio-button selection=model.severity value="warning"}} {{t "alertPage.newOrEdit.warning"}}</label>
      <label class="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}}