<div ng-controller="SmartRulesListCtrl as vm">
  <div ng-if="canSeeSection()">
    <c8y-breadcrumbs-set ng-if="isConfigurationGlobalSmartRulesContext">
      <c8y-breadcrumbs-item
        icon="c8y-smart-rules"
        label="{{ 'Global smart rules' | translate }}"
      ></c8y-breadcrumbs-item>
      <c8y-breadcrumbs-item
        icon="c8y-tools"
        label="{{ 'Configuration' | translate }}"
      ></c8y-breadcrumbs-item>
    </c8y-breadcrumbs-set>
    <c8y-ui-action-bar-set>
      <li
        class="navbar-form hidden-xs"
        action-bar-position="left"
      >
        <c8y-list-display-control
          list-length="rules.length"
          on-list-class-change="vm.listClass = listClass"
        ></c8y-list-display-control>
      </li>
      <li>
        <c8y-if-allowed cfg="smartRulesSvc.permissionsCfgs.create">
          <button
            class="btn btn-link"
            title="{{ 'Add smart rule' | translate }}"
            type="button"
            ng-click="add()"
          >
            <i c8y-icon="plus-circle"></i>
            {{ 'Add smart rule' | translate }}
          </button>
        </c8y-if-allowed>
      </li>
      <li ng-show="getLinkToDM()">
        <c8y-if-allowed any-app="['devicemanagement']">
          <a
            class="btn btn-link"
            title="{{ 'Open in Device Management' | translate }}"
            type="button"
            target="_blank"
            data-cy="smart-rules-list--open-in-device-management-link"
            rel="noopener noreferrer"
            ng-href="{{ getLinkToDM() }}"
          >
            <i c8y-icon="external-link"></i>
            {{ 'Device Management' | translate }}
          </a>
        </c8y-if-allowed>
      </li>
      <li>
        <c8y-refresh-btn></c8y-refresh-btn>
      </li>
    </c8y-ui-action-bar-set>

    <c8y-help src="/docs/cockpit/smart-rules/#smart-rules"></c8y-help>

    <div ng-if="loadingStatus.inProgress">
      <c8y-rectangle-spinner></c8y-rectangle-spinner>
    </div>

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

    <div ng-if="!loadingStatus.inProgress && loadingStatus.done && !loadingStatus.error">
      <!-- empty state -->
      <c8y-ui-empty-state
        [icon]="'c8y-smart-rules'"
        [title]="'No smart rules to display.' | translate"
        [subtitle]="'Click below to add your first smart rule.' | translate"
        ng-if="rules.length === 0"
      >
        <button
          class="btn btn-primary"
          title="{{ 'Add smart rule' | translate }}"
          type="button"
          ng-click="add()"
        >
          {{ 'Add smart rule' | translate }}
        </button>
        <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-if="rules.length > 0"
      >
        <div
          class="card-group"
          ng-class="vm.listClass"
        >
          <div class="smart-rules-list-head page-sticky-header card-block">
            <label
              class="smart-rule-group"
              translate
            >
              Status
            </label>
            <label
              class="smart-rule-group text-center p-l-0 p-r-4"
              translate
            >
              Type
            </label>
            <label
              class="smart-rule-children p-l-0"
              ng-if="children.length > 0"
              translate
            >
              Children
            </label>
            <label
              class="smart-rule-description p-l-0"
              translate
            >
              Smart rule
            </label>
          </div>

          <div
            class="col-xs-12 col-sm-6 col-md-4"
            ng-repeat="rule in rules | orderBy:'name'"
          >
            <div
              class="card-flip-container"
              ng-class="{ flipping: isFlipped }"
            >
              <div
                class="card-flip smart-rule-list-card"
                ng-class="{ flipped: isFlipped, active: isOpen[rule.id] }"
              >
                <div class="card card-front">
                  <div
                    class="card-actions collapsible"
                    ng-class="{ expanded: isOpen[rule.id] }"
                    ng-show="canAddRules() || canModify(rule)"
                  >
                    <button
                      class="btn btn-link btn-collapse"
                      ng-class="{ active: isOpen[rule.id] }"
                      title="{{ 'Details' | translate }}"
                      type="button"
                      ng-click="isOpen[rule.id] = !isOpen[rule.id]"
                    >
                      <i c8y-icon="chevron-down"></i>
                    </button>
                    <div
                      class="btn-group"
                      ng-class="{ open: ctrl.open }"
                      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"
                        role="list"
                        uib-dropdown-menu
                      >
                        <li ng-if="canEdit(rule)">
                          <button
                            title="{{ 'Edit smart rule' | translate }}"
                            type="button"
                            ng-click="edit(rule)"
                          >
                            <i c8y-icon="pencil"></i>
                            {{ 'Edit' | translate }}
                          </button>
                        </li>
                        <li ng-if="canDuplicate(rule)">
                          <button
                            title="{{ 'Duplicate smart rule' | translate }}"
                            type="button"
                            ng-click="clone(rule)"
                          >
                            <i c8y-icon="copy"></i>
                            {{ 'Duplicate' | translate }}
                          </button>
                        </li>
                        <li ng-if="canRemove(rule)">
                          <button
                            title="{{ 'Delete smart rule' | translate }}"
                            type="button"
                            ng-click="remove(rule)"
                          >
                            <i c8y-icon="delete"></i>
                            {{ 'Delete' | translate }}
                          </button>
                        </li>
                      </ul>
                    </div>
                  </div>

                  <div class="card-header">
                    <label
                      class="text-center text-muted m-b-16"
                      data-cy="smartRulesList--card-header"
                    >
                      <i c8y-icon="{{::getRuleIcon(rule)}}"></i>
                      {{ getRuleCardTitle(rule) | translate }}
                    </label>

                    <div class="smart-rule-name card-title">
                      {{ rule.name }}
                    </div>
                  </div>
                  <div class="card-block">
                    <div
                      class="smart-rule-group smart-rule-group-switch"
                      ng-if="context.context === 'group' || context.context === 'device'"
                    >
                      <label
                        class="c8y-switch"
                        aria-label="{{ 'Rule activation switch' | translate }}"
                        uib-tooltip="{{ tooltip(rule) | translate }}"
                        tooltip-popup-delay="500"
                        tooltip-append-to-body="true"
                      >
                        <input
                          type="checkbox"
                          ng-disabled="!canModify(rule) || $scope.ruleTemplates[rule.ruleTemplateName].noTarget"
                          ng-checked="hasSource(rule)"
                          ng-click="toggleRuleActivationForContextMO(rule)"
                        />
                        <span></span>
                      </label>

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

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

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

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

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

                    <div
                      class="smart-rule-description interact"
                      ng-click="isOpen[rule.id] = !isOpen[rule.id]"
                    >
                      <div class="smart-rule-name">
                        {{ rule.name }}
                      </div>
                      <small
                        class="smart-rule-information text-muted"
                        title="{{ type(rule) }}"
                        ng-if="type(rule)"
                      >
                        {{ type(rule) }}
                      </small>
                    </div>
                  </div>
                  <div class="card-actions-group separator">
                    <button
                      class="btn-flip"
                      title="{{ 'Details' | translate }}"
                      type="button"
                      ng-click="isFlipped = !isFlipped"
                    >
                      <i c8y-icon="reply"></i>
                      {{ 'Details' | translate }}
                    </button>
                  </div>
                </div>
                <div
                  class="card card-back"
                  uib-collapse="!isOpen[rule.id]"
                >
                  <div class="card-header-actions">
                    <div class="smart-list-icon-label">
                      <span class="dot">
                        <i c8y-icon="{{ inputIcon(rule) }}"></i>
                      </span>
                      <i c8y-icon="arrow-right"></i>
                      <span class="dot">
                        <i c8y-icon="{{ 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"
                        ng-if="isOpen[rule.id] || isFlipped"
                      >
                        <div class="legend form-block">
                          {{ 'History of changes' | translate }}
                        </div>
                        <div
                          class="m-b-16"
                          c8y-audit-list
                          filter="{source: rule.id}"
                        ></div>
                      </div>
                    </div>
                  </div>

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