<div class="card">
  <div class="card-actions">
    <div class="dropdown settings" uib-dropdown>
      <button
        title="{{ 'Actions' | translate }}"
        class="dropdown-toggle c8y-dropdown"
        uib-dropdown-toggle
        ng-click="::$event.stopPropagation()"
        aria-haspopup="true"
      >
        <i c8y-icon="ellipsis-v"></i>
      </button>
      <ul class="dropdown-menu dropdown-menu-right" uib-dropdown-menu>
        <li>
          <button
            title="{{ 'Delete' | translate }}"
            ng-click="vm.remove(vm.acceptedSubscription)"
          >
            <i c8y-icon="delete"></i>
            {{ 'Delete' | translate }}
          </button>
        </li>
      </ul>
    </div>
  </div>
  <div class="card-header separator">
    <div class="card-icon">
      <i c8y-icon="c8y-connector-in c8y-icon-duocolor"></i>
    </div>
    <div class="text-truncate card-title">
      <span>{{ vm.acceptedSubscription._c8y_BrokerSource.connectorName }}</span>
      <small class="text-truncate text-muted">
        {{ vm.acceptedSubscription._c8y_BrokerSource.domain }}
      </small>
    </div>
  </div>
  <div class="card-block">
    <span
      class="text-truncate-wrap"
      title="{{ vm.acceptedSubscription._c8y_BrokerSource.connectorDescription }}"
    >
      {{ vm.acceptedSubscription._c8y_BrokerSource.connectorDescription }}
    </span>
    <div class="row">
      <div
        class="col-xs-6 l-h-input"
        ng-click="vm.toggleSubscriptionStatus($event)"
      >
        <label
          class="c8y-switch"
          title="{{ 'Activate or deactivate data subscription' | translate }}"
        >
          <input type="checkbox" ng-checked="vm.acceptedSubscription.userEnabled" />
          <span></span>
          {{ vm.acceptedSubscription.visibleUserStatus | translate }}
        </label>
      </div>
      <div class="col-xs-6">
        <div class="text-right l-h-input">
          <span
            title="{{ 'Source tenant status' | translate }}"
            class="subscription-status-info"
            ng-class="vm.acceptedSubscription.status.textClass"
          >
            <i
              ng-class="vm.acceptedSubscription.status.iconClass"
              c8y-icon="{{ vm.acceptedSubscription.status.icon }}"
            ></i>
          </span>
          <span>{{ vm.acceptedSubscription.status.text | translate }}</span>
        </div>
      </div>
    </div>
  </div>
</div>
