<div class="m-b-16">
  <div
    class="text-muted m-b-16"
    ng-show="steps.length === 0"
    translate
  >No escalation steps defined.</div>
  <table
    class="table"
    ng-show="steps.length > 0"
  >
    <tr ng-repeat-start="step in steps">
      <td
        class="text-center"
        style="width: 35px"
      >{{ getStepNo(step) + 1 }}.</td>
      <td
        class="text-center"
        style="width: 35px"
      >
        <i
          c8y-icon="{{ icon(step) }}"
          uib-tooltip="{{ step.type.label | translate }}"
          tooltip-popup-delay="500"
          tooltip-append-to-body="true"
        ></i>
      </td>
      <td
        style="max-width: 220px"
        title="{{ step.config.to }}"
      >
        <span class="text-truncate">
          {{ step.config.to }}
        </span>
      </td>
      <td class="text-right">
        {{ executionConditionLabel(step.executionCondition) | translate }}
      </td>
      <td
        class="text-right"
        style="width: 70px"
      >
        <div class="btn-group">
          <button
            class="btn btn-link btn-xs"
            aria-label="{{ getStepTooltip(step) | translate }}"
            uib-tooltip="{{ getStepTooltip(step) | translate }}"
            tooltip-popup-delay="500"
            tooltip-append-to-body="true"
            type="button"
            ng-click="toggleExpand(step)"
          >
            <i c8y-icon="caret-{{ step.expanded ? 'up' : 'down' }}"></i>
          </button>
          <button
            class="btn btn-link btn-xs"
            aria-label="{{ 'Remove' | translate }}"
            uib-tooltip="{{ 'Remove' | translate }}"
            tooltip-popup-delay="500"
            tooltip-append-to-body="true"
            type="button"
            ng-click="removeStep(step)"
            ng-disabled="!canRemoveStep(step)"
          >
            <i
              c8y-icon="close"
              class="text-danger"
            ></i>
          </button>
        </div>
      </td>
    </tr>
    <tr
      ng-repeat-end
      ng-if="step.expanded"
    >
      <td colspan="5">
        <div class="row">
          <div class="col-lg-12">
            <div class="text-info">
              <div ng-show="!canChangeStepType(step)">
                <i c8y-icon="info-circle"></i>
                <translate>Can't change type if other step depends on this one.
                </translate>
              </div>
              <div ng-show="!canChangeExecutionCondition(step)">
                <i c8y-icon="info-circle"></i>
                <translate>At least one step needs to be executed always.
                </translate>
              </div>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-lg-3">
            <ng-form name="nestedSmartRuleForm">
              <div
                class="form-group"
                ng-class="{
                  'has-error': nestedSmartRuleForm.$dirty && nestedSmartRuleForm.$invalid
                }"
              >
                <ui-select
                  ng-model="step.type"
                  ng-disabled="!canChangeStepType(step)"
                >
                  <ui-select-match>
                    <i
                      c8y-icon="{{ $select.selected.icon }}"
                      uib-tooltip="{{ $select.selected.type | translate }}"
                      tooltip-popup-delay="500"
                      tooltip-append-to-body="true"
                    ></i>
                  </ui-select-match>
                  <ui-select-choices
                    repeat="stepType as stepType in stepTypes"
                    ui-disable-choice="stepType._active != true"
                  >
                    <div>
                      <i c8y-icon="{{ stepType.icon }}"></i>
                      {{ stepType.label | translate }}
                    </div>
                  </ui-select-choices>
                </ui-select>
              </div>
            </ng-form>
          </div>
          <div class="col-lg-9">
            <ng-form name="nestedSmartRuleForm">
              <div
                class="form-group"
                ng-class="{
                  'has-error': nestedSmartRuleForm.$dirty && nestedSmartRuleForm.$invalid
                }"
              >
                <ui-select
                  ng-model="step.executionCondition"
                  ng-disabled="!canChangeExecutionCondition(step)"
                >
                  <ui-select-match>
                    {{ executionConditionLabel($select.selected) | translate }}
                  </ui-select-match>
                  <ui-select-choices
                    repeat="executionCondition in executionConditions | filter:executionConditionsFilter(step)"
                  >
                    {{ executionConditionLabel(executionCondition) | translate }}
                  </ui-select-choices>
                </ui-select>
              </div>
            </ng-form>
          </div>
        </div>
        <div class="row">
          <div class="col-lg-12">
            <div ng-repeat="stepParam in step.type.params">
              <smart-rule-param-input
                rule="step"
                param="stepParam"
              ></smart-rule-param-input>
            </div>
          </div>
        </div>
      </td>
    </tr>
  </table>

  <button
    class="btn btn-default"
    type="button"
    title="{{ 'Add step' | translate }}"
    type="button"
    ng-click="addStep()"
  >
    <i c8y-icon="plus-circle"></i>
    {{ 'Add step' | translate }}
  </button>
</div>