<div class="d-flex-sm d-col-xs p-t-24 p-l-16 p-r-16 m-0 bg-level-1">
  <div
    class="col-sm-3 m-b-24 col-xs-12 d-flex gap-16 text-default a-i-center j-c-center a-s-stretch"
  >
    <div class="text-center d-col">
      <i
        class="m-b-8 icon-40 c8y-icon-duocolor"
        [c8yIcon]="icon"
      ></i>
      <span class="tag tag--info">{{ 'Service' | translate }}</span>
    </div>
    <span class="h4">{{ namespaceLabel }}</span>
  </div>
  <div class="col-sm-3 m-b-24 col-xs-12 a-i-stretch d-flex">
    <app-namespace-item-card
      [serviceLabel]="namespaceLabel"
      [dataType]="'topics'"
      [limit]="namespace?.topics?.limit"
      [value]="namespace?.topics?.count"
    ></app-namespace-item-card>
  </div>
  <div class="col-sm-3 m-b-24 col-xs-12 a-i-stretch d-flex">
    <app-namespace-item-card
      [serviceLabel]="namespaceLabel"
      [dataType]="'publishers'"
      [value]="namespace?.publishers?.count"
    ></app-namespace-item-card>
  </div>
  <div class="col-sm-3 m-b-24 col-xs-12 a-i-stretch d-flex">
    <app-namespace-item-card
      [serviceLabel]="namespaceLabel"
      [dataType]="'subscribers'"
      [value]="namespace?.subscribers?.count"
    ></app-namespace-item-card>
  </div>
</div>