<c8y-ui-title-set title="'Data subscriptions' | translate"></c8y-ui-title-set>

<c8y-breadcrumbs-set>
  <c8y-breadcrumbs-item
    icon="c8y-data-broker"
    label="{{ 'Data subscriptions' | translate }}"
  ></c8y-breadcrumbs-item>
  <c8y-breadcrumbs-item
    icon="c8y-data-broker"
    label="{{ 'Data broker' | translate }}"
  ></c8y-breadcrumbs-item>
</c8y-breadcrumbs-set>

<c8y-ui-action-bar-set>
  <a
    class="btn btn-link"
    title="{{ 'Add data subscription' | translate }}"
    ng-click="vm.toggleAddNewSubscriptionForm(vm.isShownAddNewSubscription)"
  >
    <i c8y-icon="plus-circle"></i>
    {{ 'Add data subscription' | translate }}
  </a>
  <button
    class="btn btn-link"
    title="{{ 'Reload' | translate }}"
    type="button"
    ng-click="vm.reload()"
  >
    <i c8y-icon="refresh"></i>
    {{ 'Reload' | translate }}
  </button>
</c8y-ui-action-bar-set>

<c8y-help src="/docs/data-broker/data-broker-application/#data-subscriptions"></c8y-help>

<div
  class="c8y-empty-state text-center m-t-32"
  ng-if="vm.isSubscriptionsListEmpty()"
>
  <h1 c8y-icon="c8y-connector-in c8y-icon-duocolor"></h1>
  <h3 translate>No data subscriptions to display.</h3>
  <p translate>Add a data subscription by clicking below.</p>
  <button
    class="btn btn-primary"
    title="{{ 'Add data subscription' | translate }}"
    ng-click="vm.toggleAddNewSubscriptionForm(vm.isShownAddNewSubscription)"
  >
    {{ 'Add data subscription' | translate }}
  </button>
  <p
    class="m-t-4"
    c8y-guide-docs
  >
    <small>
      <span translate>
        Find out more in the
        <a c8y-guide-href="/docs/data-broker/data-broker-application/#data-subscriptions">
          user documentation
        </a>
        .
      </span>
    </small>
  </p>
</div>

<div class="card-group interact-grid">
  <c8y-data-broker-add-subscription
    class="col-xs-12 col-sm-4 col-md-3"
    on-reload="vm.reload()"
    is-shown="vm.isShownAddNewSubscription"
    ng-if="vm.isShownAddNewSubscription"
  ></c8y-data-broker-add-subscription>
  <c8y-data-broker-pending-subscription
    class="col-xs-12 col-sm-4 col-md-3"
    pending-subscription="pendingSubscription"
    on-reload="vm.reload()"
    ng-if="vm.pendingSubscriptions.length > 0"
    ng-repeat="pendingSubscription in vm.pendingSubscriptions | orderBy:'name'"
  ></c8y-data-broker-pending-subscription>
  <c8y-data-broker-subscription
    class="col-xs-12 col-sm-4 col-md-3"
    accepted-subscription="subscription"
    on-reload="vm.reload()"
    ng-if="vm.subscriptions.length > 0"
    ng-repeat="subscription in vm.subscriptions | orderBy:'connectorName'"
  ></c8y-data-broker-subscription>
</div>
