<div>
  <div ng-if="vm.canSeeSection()">
    <div ng-show="vm.loadingStatus.inProgress">
      <c8y-rectangle-spinner></c8y-rectangle-spinner>
    </div>

    <div ng-show="!vm.loadingStatus.inProgress && vm.loadingStatus.done && vm.loadingStatus.error">
      <div
        class="alert alert-warning"
        translate
      >
        Could not load smart rules list.
      </div>
    </div>

    <div ng-show="!vm.loadingStatus.inProgress && vm.loadingStatus.done && !vm.loadingStatus.error">
      <c8y-ui-empty-state
        [icon]="'c8y-smart-rules'"
        [title]="'No smart rules defined.' | translate"
        ng-show="vm.rules.length === 0"
      >
        <p c8y-guide-docs>
          <small translate>
            Find out more in the
            <a c8y-guide-href="/docs/cockpit/smart-rules">user documentation</a>
            .
          </small>
        </p>
      </c8y-ui-empty-state>

      <div
        class="smart-rules-list"
        ng-show="vm.rules.length > 0"
      >
        <div
          class="card-group"
          ng-class="vm.listClass"
        >
          <div class="smart-rules-list-head page-sticky-header p-t-8 p-b-8">
            <label
              class="smart-rule-group"
              translate
              ng-if="vm.context.context === 'group'"
            >
              Group
            </label>
            <label
              class="smart-rule-group"
              translate
              ng-if="vm.context.context === 'device'"
            >
              Device
            </label>
            <label
              class="smart-rule-group"
              ng-if="vm.context.context !== 'group' && vm.context.context !== 'device'"
              translate
            >
              State
            </label>
            <label
              class="smart-rule-children"
              translate
              ng-if="vm.children.length > 0"
            >
              Children
            </label>
            <label
              class="smart-rule-description"
              translate
            >
              Smart rule
            </label>
          </div>

          <div
            class="col-xs-12 col-sm-6 col-md-4 col-lg-3"
            ng-repeat="rule in vm.rules | orderBy:'name'"
          >
            <div
              class="card-flip-container"
              ng-class="{ flipping: vm.isFlipped }"
            >
              <div
                class="card-flip smart-rule-list-card"
                ng-class="{ flipped: vm.isFlipped, active: vm.isOpen[rule.id] }"
              >
                <div class="card card-front">
                  <div
                    class="card-actions collapsible"
                    ng-class="{ expanded: vm.isOpen[rule.id] }"
                    ng-if="vm.canAddRules() || vm.canModify(rule)"
                  >
                    <button
                      class="btn btn-link btn-collapse"
                      ng-class="{ active: vm.isOpen[rule.id] }"
                      title="{{ 'Details' | translate }}"
                      type="button"
                      ng-click="vm.isOpen[rule.id] = !vm.isOpen[rule.id]"
                    >
                      <i c8y-icon="chevron-down"></i>
                    </button>
                    <div
                      class="btn-group"
                      is-open="ctrl.open"
                      uib-dropdown
                    >
                      <button
                        class="dropdown-toggle c8y-dropdown"
                        title="{{ 'Actions' | translate }}"
                        aria-haspopup="true"
                        type="button"
                        data-toggle="dropdown"
                        uib-dropdown-toggle
                      >
                        <i c8y-icon="ellipsis-v"></i>
                      </button>
                      <ul
                        class="dropdown-menu dropdown-menu-right"
                        uib-dropdown-menu
                      >
                        <li ng-if="vm.canEdit(rule) && !vm.disableEditAndCreate">
                          <button
                            title="{{ 'Edit smart rule' | translate }}"
                            type="button"
                            ng-click="vm.edit(rule)"
                          >
                            <i c8y-icon="pencil"></i>
                            {{ 'Edit' | translate }}
                          </button>
                        </li>
                        <li ng-if="vm.canDuplicate(rule) && !vm.disableEditAndCreate">
                          <button
                            title="{{ 'Duplicate smart rule' | translate }}"
                            type="button"
                            ng-click="vm.clone(rule)"
                          >
                            <i c8y-icon="copy"></i>
                            {{ 'Duplicate' | translate }}
                          </button>
                        </li>
                        <li ng-if="vm.canRemove(rule)">
                          <button
                            title="{{ 'Delete smart rule' | translate }}"
                            ng-click="vm.remove(rule)"
                          >
                            <i c8y-icon="times"></i>
                            {{ 'Delete' | translate }}
                          </button>
                        </li>
                      </ul>
                    </div>
                  </div>

                  <div class="card-header">
                    <p class="text-center text-muted">
                      <i c8y-icon="c8y-smart-rules"></i>
                      {{ 'Smart rule' | translate }}
                    </p>
                    <h4 class="smart-rule-name card-title">
                      {{ rule.name }}
                    </h4>
                  </div>
                  <div class="card-block">
                    <div
                      class="smart-rule-group smart-rule-group-switch"
                      ng-if="vm.context.context === 'group' || vm.context.context === 'device'"
                    >
                      <label
                        class="c8y-switch"
                        uib-tooltip="{{ vm.tooltip(rule) | translate }}"
                        tooltip-popup-delay="500"
                        tooltip-append-to-body="true"
                        for="checkbox"
                      >
                        <input
                          id="checkbox"
                          type="checkbox"
                          ng-disabled="!vm.canModify(rule) || vm.ruleTemplates[rule.ruleTemplateName].noTarget"
                          ng-checked="rule.enabled && vm.hasSource(rule)"
                          ng-click="vm.toggleRuleActivationForContextMO(rule)"
                        />
                        <span></span>
                      </label>

                      <button
                        class="btn c8y-btn-checkbox m-r-0"
                        ng-class="{ active: rule.enabled && vm.hasSource(rule) }"
                        type="button"
                        ng-click="vm.toggleRuleActivationForContextMO(rule)"
                      >
                        <i
                          ng-class="{
                            'dlt-c8y-icon-check-circle text-success':
                              rule.enabled && vm.hasSource(rule),
                            'dlt-c8y-icon-ban text-danger': !rule.enabled || !vm.hasSource(rule)
                          }"
                        ></i>
                        <span
                          translate
                          ng-if="rule.enabled && vm.hasSource(rule)"
                        >
                          Active`rule`
                        </span>
                        <span
                          translate
                          ng-if="!rule.enabled || !vm.hasSource(rule)"
                        >
                          Inactive`rule`
                        </span>
                      </button>
                    </div>

                    <div
                      class="smart-rule-state"
                      ng-if="vm.context.context !== 'group' && vm.context.context !== 'device'"
                    >
                      <div class="list-icon">
                        <i
                          ng-class="vm.statusClass(rule)"
                          c8y-icon="{{ vm.statusIcon(rule) }}"
                          uib-tooltip="{{ vm.status(rule) | translate }}"
                          tooltip-popup-delay="500"
                          tooltip-append-to-body="true"
                        ></i>
                      </div>
                      <div
                        class="card-icon"
                        ng-class="vm.statusClass(rule)"
                      >
                        <i c8y-icon="{{ vm.statusIcon(rule) }}"></i>
                        <span>{{ vm.status(rule) | translate }}</span>
                      </div>
                    </div>

                    <div class="smart-rule-state">
                      <div
                        class="list-icon"
                        ng-if="rule.type !== 'c8y_SmartRule'"
                      >
                        <i
                          c8y-icon="{{::vm.getRuleIcon(rule)}}"
                          uib-tooltip="{{ 'Local smart rule' | translate }}"
                          tooltip-append-to-body="true"
                        ></i>
                      </div>
                      <div
                        class="list-icon"
                        ng-if="rule.type === 'c8y_SmartRule'"
                      >
                        <i
                          c8y-icon="{{::vm.getRuleIcon(rule)}}"
                          uib-tooltip="{{ 'Global smart rule' | translate }}"
                          tooltip-append-to-body="true"
                        ></i>
                      </div>
                    </div>

                    <div
                      class="smart-rule-children"
                      ng-if="vm.children.length > 0"
                    >
                      <label translate>Children</label>
                      <c8y-child-assets-selector
                        ng-if="::vm.canApplyOnChildren(rule)"
                        parent-mo="vm.mo"
                        selected-child-assets="vm.ruleChildren[rule.id]"
                        on-selection-confirmed="
                          vm.toggleRuleActivationForChildrenMOs(rule, selection)
                        "
                        disable-selection="!vm.canModify(rule)"
                      ></c8y-child-assets-selector>
                    </div>

                    <div class="smart-list-icon-label">
                      <span class="dot">
                        <i c8y-icon="{{ vm.inputIcon(rule) }}"></i>
                      </span>
                      <i c8y-icon="arrow-right"></i>
                      <span class="dot">
                        <i c8y-icon="{{ vm.outputIcon(rule) }}"></i>
                      </span>
                    </div>

                    <div
                      class="smart-rule-description interact"
                      ng-click="vm.isOpen[rule.id] = !vm.isOpen[rule.id]"
                    >
                      <div class="smart-rule-name">
                        {{ rule.name }}
                      </div>
                      <small
                        class="smart-rule-information text-muted"
                        ng-show="vm.type(rule)"
                      >
                        {{ vm.type(rule) }}
                      </small>
                    </div>
                  </div>
                  <div class="card-actions-group">
                    <button
                      class="btn-flip"
                      title="{{ 'Details' | translate }}"
                      type="button"
                      ng-click="vm.isFlipped = !vm.isFlipped"
                    >
                      <i c8y-icon="reply"></i>
                      {{ 'Details' | translate }}
                    </button>
                  </div>
                </div>
                <div
                  class="card card-back"
                  uib-collapse="!vm.isOpen[rule.id]"
                >
                  <div class="card-header-actions">
                    <div class="smart-list-icon-label">
                      <span class="dot">
                        <i c8y-icon="{{ vm.inputIcon(rule) }}"></i>
                      </span>
                      <i c8y-icon="arrow-right"></i>
                      <span class="dot">
                        <i c8y-icon="{{ vm.outputIcon(rule) }}"></i>
                      </span>
                    </div>
                    <div class="title text-truncate">
                      {{ rule.name }}
                    </div>
                  </div>
                  <div class="smart-rule-details card-inner-scroll">
                    <div class="row">
                      <div class="col-sm-3">
                        <div class="legend form-block">
                          {{ 'Details' | translate }}
                        </div>
                        <dl class="dl-inline small text-muted">
                          <dt translate>Creation time</dt>
                          <dd>{{ rule.creationTime | absoluteDate }}</dd>
                          <dt translate>Last updated</dt>
                          <dd>{{ rule.lastUpdated | absoluteDate }}</dd>
                        </dl>
                      </div>

                      <div class="col-sm-9">
                        <div class="legend form-block">
                          {{ 'History of changes' | translate }}
                        </div>
                        <div
                          c8y-audit-list
                          filter="{source: rule.id}"
                        ></div>
                      </div>
                    </div>
                  </div>

                  <div class="card-actions-group">
                    <button
                      class="btn-flip"
                      title="{{ 'Back' | translate }}"
                      type="button"
                      ng-click="vm.isFlipped = !vm.isFlipped"
                    >
                      <i c8y-icon="reply"></i>
                      {{ 'Back' | translate }}
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
