<div class="viewport-modal">
  <div class="modal-header text-center separator">
    <h1
      class="h3"
      id="modal-title"
      data-cy="smartRuleAdd--card-header"
    >
      <i c8y-icon="{{ icon }}"></i>
      {{ title | translate }}
    </h1>
  </div>

  <div
    class="inner-scroll"
    id="modal-body"
  >
    <div
      class="alert alert-warning"
      ng-show="ruleTemplates.length == 0 && !loading.loading"
      translate
    >
      No matching smart rules available.
    </div>
    <div
      class="d-flex a-i-center j-c-center"
      ng-show="loading.loading"
    >
      <c8y-loading></c8y-loading>
    </div>
    <div class="card-group-block smart-rule-templates-list interact-grid">
      <button
        class="col-md-4 col-sm-6 col-xs-12 card btn-clean"
        ng-class="{ 'not-active': !ruleTemplate._active, interact: ruleTemplate._active }"
        ng-repeat="ruleTemplate in ruleTemplates"
        ng-click="createInstance(ruleTemplate)"
      >
        <div class="card-block text-center">
          <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>
          <div
            class="text-pre-normal"
            ng-if="ruleTemplate.label.full"
          >
            <span
              class="caption"
              title="{{ ruleTemplate.label.full | translate }}"
            >
              {{ ruleTemplate.label.full | translate }}
            </span>
          </div>
          <div
            class="text-pre-normal"
            ng-if="!ruleTemplate.label.full"
          >
            <span
              class="caption caption-input"
              title="{{ ruleTemplate.label.input | translate }}"
            >
              {{ ruleTemplate.label.input | translate }}
            </span>
            <span
              class="caption caption-output"
              title="{{ ruleTemplate.label.output | translate }}"
            >
              {{ ruleTemplate.label.output | translate }}
            </span>
          </div>
          <small class="text-muted text-pre-normal">
            {{ ruleTemplate.description | translate }}
          </small>
        </div>
      </button>
    </div>
  </div>

  <div class="modal-footer">
    <button
      class="btn btn-default"
      title="{{ 'Cancel' | translate }}"
      type="button"
      ng-click="cancel()"
    >
      {{ 'Cancel' | translate }}
    </button>
  </div>
</div>
