<div class="modal-header text-center separator">
  <p
    class="text-muted"
    data-cy="smartRuleEdit--card-header"
  >
    {{ title | translate }}
  </p>
  <div class="smart-list-icon-label">
    <span class="dot"><i c8y-icon="{{ ruleTemplate.paramGroups.input.icon }}"></i></span>
    <i c8y-icon="arrow-right"></i>
    <span class="dot"><i c8y-icon="{{ ruleTemplate.paramGroups.output.icon }}"></i></span>
  </div>
  <h4
    id="modal-title"
    ng-if="ruleTemplate.label.full"
  >
    {{ ruleTemplate.label.full | translate }}
  </h4>
  <h4
    id="modal-title"
    ng-if="!ruleTemplate.label.full"
  >
    {{ ruleTemplate.label.input | translate }} {{ ruleTemplate.label.output | translate }}
  </h4>
  <small translate>Fields marked * are required.</small>
</div>

<div
  class="modal-inner-scroll smart-rule-control"
  id="modal-body"
>
  <form
    class="edit-smart-rule-details"
    name="smartRuleForm"
    novalidate
  >
    <div class="list-group">
      <div
        class="alert alert-info m-16 m-b-0"
        ng-if="ruleTemplate.info"
        ng-bind-html="ruleTemplate.info | translate"
      ></div>

      <div class="list-group-item">
        <div class="smart-rule-control text-center">
          <button
            class="btn btn-smart-rule-activation"
            type="button"
            ng-model="rule.enabled"
            uib-btn-checkbox="rule.enabled"
          >
            <i
              class="text-danger"
              c8y-icon="minus-circle"
              ng-show="!rule.enabled"
            ></i>
            <i
              class="text-success"
              c8y-icon="check-circle"
              ng-show="rule.enabled"
            ></i>
            <span
              title="{{ 'Enabled' | translate }}"
              ng-show="rule.enabled"
            >
              {{ 'Enabled' | translate }}
            </span>
            <span
              title="{{ 'Disabled' | translate }}"
              ng-show="!rule.enabled"
            >
              {{ 'Disabled' | translate }}
            </span>
          </button>
        </div>
      </div>

      <div class="list-group-item bg-level-1">
        <div class="smart-list-icon-label">
          <span class="dot bg-primary-light">1</span>
          <strong translate>Rule name</strong>
        </div>
        <ng-form name="nestedSmartRuleForm">
          <div
            class="form-group smart-rule-control"
            ng-class="{ 'has-error': nestedSmartRuleForm.$dirty && nestedSmartRuleForm.$invalid }"
          >
            <textarea
              class="form-control input-name"
              id="rulename"
              name="name"
              rows="1"
              required
              ng-model="rule.name"
              ng-attr-placeholder="{{ 'Rule name' | translate }} *"
            ></textarea>
          </div>
        </ng-form>
      </div>

      <div class="list-group-item">
        <div class="smart-list-icon-label">
          <span class="dot bg-primary-light">2</span>
          <strong>{{ ruleTemplate.paramGroups.input.label | translate }}</strong>
        </div>
        <div class="smart-rule-control">
          <div
            class="text-muted"
            ng-if="ruleTemplate.paramGroups.input.info"
          >
            <i
              class="text-info pull-left"
              c8y-icon="info-circle"
            ></i>
            <p class="m-l-8">
              <em ng-bind-html="ruleTemplate.paramGroups.input.info | translate"></em>
            </p>
          </div>
          <div ng-repeat="param in ruleTemplate.paramGroups.input.params">
            <smart-rule-param-input
              c8y-check-dirty="rule"
              rule="rule"
              param="param"
              rule-template="ruleTemplate"
            ></smart-rule-param-input>
          </div>
        </div>
      </div>

      <div class="list-group-item bg-level-1">
        <div class="smart-list-icon-label">
          <span class="dot bg-primary-light">3</span>
          <strong>{{ ruleTemplate.paramGroups.output.label | translate }}</strong>
        </div>
        <div class="smart-rule-control">
          <div ng-repeat="param in ruleTemplate.paramGroups.output.params">
            <smart-rule-param-input
              c8y-check-dirty="rule"
              rule="rule"
              param="param"
              rule-template="ruleTemplate"
            ></smart-rule-param-input>
          </div>
          <div
            class="text-muted"
            ng-if="ruleTemplate.paramGroups.output.info"
          >
            <i
              class="text-info pull-left"
              c8y-icon="info-circle"
            ></i>
            <p class="m-l-8">
              <em ng-bind-html="ruleTemplate.paramGroups.output.info | translate"></em>
            </p>
          </div>
        </div>
      </div>

      <div class="list-group-item">
        <div class="smart-list-icon-label">
          <span class="dot bg-primary-light">4</span>
          <strong translate>Target asset or devices</strong>
        </div>
        <div
          class="smart-rule-control"
          ng-if="rule.id && !ruleTemplate.noTarget"
        >
          <div ng-if="rule.enabledSources">
            <label translate>Active for target asset or devices</label>
            <div ng-repeat="source in enabledSources">
              <i
                class="text-muted"
                c8y-icon="check"
              ></i>
              {{ source.name }}
            </div>
          </div>
          <div ng-if="rule.disabledSources">
            <label translate>Inactive for target asset or devices</label>
            <div ng-repeat="source in disabledSources">
              <i
                class="text-warning"
                c8y-icon="minus-circle"
                uib-tooltip="{{ 'Disabled' | translate }}"
                tooltip-popup-delay="500"
                tooltip-append-to-body="true"
              ></i>
              {{ source.name }}
            </div>
          </div>
        </div>
        <div
          class="smart-rule-control"
          ng-if="!rule.id && !ruleTemplate.noTarget"
        >
          <div class="form-group">
            <c8y-device-selector-combo
              parent="initialActivationCfg.parent"
              selected-child-device="initialActivationCfg.mo"
              groups-selectable="true"
              search-only-child-assets-of="initialActivationCfg.searchOnlyChildAssetsOf"
            ></c8y-device-selector-combo>
          </div>
          <div
            class="checkbox"
            ng-show="hasChildAssets(initialActivationCfg.mo)"
          >
            <label
              class="c8y-checkbox"
              title="{{ 'Activate also for child assets' | translate }}"
            >
              <input
                type="checkbox"
                ng-model="initialActivationCfg.withChildren.assets"
              />
              <span></span>
              <span
                translate
                translate-n="getChildAssetsCount(initialActivationCfg.mo)"
                translate-plural="Activate also for {{ $count }} child assets"
              >
                Activate also for 1 child asset
              </span>
            </label>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>

<div class="modal-footer">
  <button
    class="btn btn-default"
    title="{{ 'Cancel' | translate }}"
    type="button"
    ng-click="cancel()"
  >
    {{ 'Cancel' | translate }}
  </button>
  <button
    class="btn btn-primary"
    type="button"
    ng-click="save()"
    ng-disabled="smartRuleForm.$pristine || smartRuleForm.$invalid || savingStatus.inProgress"
  >
    <span ng-hide="savingStatus.inProgress">
      <span
        title="{{ 'Create' | translate }}"
        ng-hide="rule.id"
      >
        {{ 'Create' | translate }}
      </span>
      <span
        title="{{ 'Save' | translate }}"
        ng-show="rule.id"
      >
        {{ 'Save' | translate }}
      </span>
    </span>
    <span ng-show="savingStatus.inProgress">{{ 'Saving' | translate }}…</span>
  </button>
</div>
