<div class="card">
  <div class="card-header separator">
    <div class="card-icon">
      <i
        c8y-icon="c8y-connector-in c8y-icon-duocolor"
        ng-if="
          vm.isWaitingForConnection(vm.pendingSubscription) || vm.isAccepted(vm.pendingSubscription)
        "
      ></i>
      <i
        c8y-icon="check"
        class="text-success"
        ng-if="vm.isPendingAcceptance(vm.pendingSubscription)"
      ></i>
    </div>
    <div class="text-truncate card-title">
      <span ng-if="vm.isWaitingForConnection(vm.pendingSubscription)">
        <span translate>New data subscription</span>
      </span>
      <span class="text-success" ng-if="vm.isPendingAcceptance(vm.pendingSubscription)">
        <span translate>Connection established</span>
        <small class="text-truncate text-muted">
          {{ vm.getCode(vm.pendingSubscription) }}
        </small>
      </span>
      <span class="text-left d-block" ng-if="vm.isAccepted(vm.pendingSubscription)">
        <span>{{ vm.pendingSubscription.connectorName }}</span>
        <small class="text-truncate text-muted">
          {{ vm.pendingSubscription.domain }}
        </small>
      </span>
    </div>
  </div>
  <div class="card-block">
    <div class="text-center" ng-if="vm.isWaitingForConnection(vm.pendingSubscription)">
      <p class="text-primary">{{ vm.getStatusText(vm.pendingSubscription) }}</p>
      <div class="progress">
        <div class="progress-bar progress-bar-striped active fit-w"></div>
      </div>
      <button
        title="{{ 'Cancel' | translate }}"
        type="button"
        class="btn btn-default"
        ng-click="vm.discardSubscription(vm.pendingSubscription)"
      >
        {{ 'Cancel' | translate }}
      </button>
    </div>
    <div ng-if="vm.isAccepted(vm.pendingSubscription)">
      <p>{{ vm.pendingSubscription.connectorDescription }}</p>
      <small class="text-muted" translate>Waiting for data subscription setup to complete…</small>
    </div>

    <div class="text-center" ng-if="vm.isPendingAcceptance(vm.pendingSubscription)">
      <p translate>Accept to complete data subscription setup, discard to remove it.</p>
      <button
        title="{{ 'Discard' | translate }}"
        type="button"
        class="btn btn-default"
        ng-click="vm.discardSubscription(vm.pendingSubscription)"
      >
        {{ 'Discard' | translate }}
      </button>
      <button
        title="{{ 'Accept' | translate }}"
        type="button"
        class="btn btn-primary"
        ng-click="vm.acceptSubscription(vm.pendingSubscription)"
      >
        {{ 'Accept' | translate }}
      </button>
    </div>
  </div>
</div>
