<c8y-title>{{ namespaceLabel$ | async }}</c8y-title>

<c8y-breadcrumb>
  <c8y-breadcrumb-item
    [icon]="'monitoring'"
    [label]="'Monitoring' | translate"
  ></c8y-breadcrumb-item>
  <c8y-breadcrumb-item
    [label]="'Messaging service' | translate"
    [path]="'/monitoring/messaging-service'"
  ></c8y-breadcrumb-item>
  <c8y-breadcrumb-item [label]="namespaceLabel$ | async"></c8y-breadcrumb-item>
</c8y-breadcrumb>

<c8y-action-bar-item [placement]="'right'">
  <a
    class="btn btn-link"
    title="{{ 'Reload' | translate }}"
    (click)="refresh.emit()"
  >
    <i
      c8yIcon="refresh"
      [ngClass]="{ 'icon-spin': loading$ | async }"
    ></i>
    {{ 'Reload' | translate }}
  </a>
</c8y-action-bar-item>

<div class="card content-fullpage d-flex d-col">
  <div class="bg-level-1 separator-bottom flex-no-shrink">
    <div
      class="card-block"
      style="min-height: 172px"
    >
      <div
        class="col-md-4 m-b-24 col-xs-12 d-flex p-t-24 gap-16 text-default a-i-center a-s-stretch"
      >
        <div class="text-center d-col">
          <i
            class="m-b-8 icon-40 c8y-icon-duocolor"
            [c8yIcon]="icon$ | async"
          ></i>
          <span class="tag tag--info">{{ 'Service' | translate }}</span>
        </div>
        <span class="h4 text-break-all">{{ namespaceLabel$ | async }}</span>
      </div>
      <div class="col-md-4">
        <fieldset class="c8y-fieldset c8y-fieldset--lg">
          <legend>
            {{ 'Service usage/limits' | translate }}
          </legend>

          @if (loading$ | async) {
            <c8y-loading></c8y-loading>
          } @else {
            @let namespace = (namespaceDetails$ | async)?.namespace;
            @if (namespace) {
              <ul class="list-unstyled small animated fadeIn">
                <li
                  class="p-t-4 p-b-4 d-flex separator-bottom text-nowrap"
                  data-cy="topic-list-view--topics"
                >
                  <label class="small m-b-0 m-r-auto">{{ 'Topics' | translate }}</label>
                  @if (namespace?.topics?.limit !== 0) {
                    <app-usage
                      [count]="namespace?.topics?.count"
                      [limit]="namespace?.topics?.limit"
                    ></app-usage>
                    <span class="m-l-16">
                      {{ namespace?.topics?.count | number }} /
                      {{ namespace?.topics?.limit | backlogQuotaLimit }}
                    </span>
                  } @else {
                    <span class="m-l-16">{{ namespace?.topics?.count | number }}</span>
                  }
                </li>

                <li
                  class="p-t-4 p-b-4 d-flex separator-bottom text-nowrap"
                  data-cy="topic-list-view--subscribers"
                >
                  <label class="small m-b-0 m-r-auto">{{ 'Subscribers' | translate }}</label>
                  <span class="m-l-16">
                    {{ namespace?.subscribers?.count | number }}
                  </span>
                </li>

                <li
                  class="p-t-4 p-b-4 d-flex text-nowrap"
                  data-cy="topic-list-view--publishers"
                >
                  <label class="small m-b-0 m-r-auto">{{ 'Publishers' | translate }}</label>
                  <span class="m-l-16">
                    {{ namespace?.publishers?.count | number }}
                  </span>
                </li>
              </ul>
            }
          }
        </fieldset>
      </div>
      <div class="col-md-4">
        <fieldset class="c8y-fieldset c8y-fieldset--lg">
          <legend>{{ 'Service message backlog limits' | translate }}</legend>

          @if (loading$ | async) {
            <c8y-loading></c8y-loading>
          } @else {
            @let policies = (namespaceDetails$ | async)?.policies;
            @if (policies) {
              <ul class="list-unstyled small animated fadeIn">
                <li
                  class="p-t-4 p-b-4 d-flex separator-bottom text-nowrap"
                  data-cy="topic-list-view--backlog-quota"
                >
                  <label class="small m-b-0 m-r-auto">
                    {{ 'Backlog quota (per topic)' | translate }}
                  </label>
                  <span
                    title="{{
                      policies?.backlogQuota?.limit > 0
                        ? (policies.backlogQuota.limit | bytes: 0 : true)
                        : '-'
                    }}"
                  >
                    {{
                      policies?.backlogQuota?.limit > 0
                        ? (policies.backlogQuota.limit | bytes: 0)
                        : '-'
                    }}
                  </span>
                </li>

                <li
                  class="p-t-4 p-b-4 d-flex text-nowrap"
                  data-cy="topic-list-view--backlog-ttl"
                >
                  <label class="small m-b-0 m-r-auto">
                    {{ 'Backlog time to live (TTL)' | translate }}
                  </label>
                  <span>{{ policies?.messageTTL | timeToLive }}</span>
                </li>
              </ul>
            }
          }
        </fieldset>
      </div>
    </div>
  </div>

  <c8y-data-grid
    class="d-contents"
    [title]="tableTitle | translate"
    [loadingItemsLabel]="loadingItemsLabel | translate"
    [loadMoreItemsLabel]="loadMoreItemsLabel | translate"
    [columns]="columns"
    [pagination]="pagination"
    [serverSideDataCallback]="serverSideDataCallback"
    [refresh]="refresh"
    [hideReload]="true"
  >
    <c8y-ui-empty-state
      [icon]="stats?.size > 0 ? 'search' : 'day-view'"
      [title]="stats?.size > 0 ? (noResultsMessage | translate) : (noDataMessage | translate)"
      [subtitle]="stats?.size > 0 ? (noResultsSubtitle | translate) : (noDataSubtitle | translate)"
      *emptyStateContext="let stats"
      [horizontal]="stats?.size > 0"
    ></c8y-ui-empty-state>

    <c8y-column name="name">
      <ng-container *c8yCellRendererDef="let context">
        <a
          title="{{ context.value }}"
          [routerLink]="['topic', context.item.id]"
        >
          {{ context.value }}
        </a>
      </ng-container>
    </c8y-column>

    <c8y-column name="msgRateIn">
      <ng-container *c8yCellRendererDef="let context">
        <span title="{{ context.value | number }}">
          {{ context.value | number }}
        </span>
      </ng-container>
    </c8y-column>

    <c8y-column name="msgRateOut">
      <ng-container *c8yCellRendererDef="let context">
        <span title="{{ context.value | number }}">
          {{ context.value | number }}
        </span>
      </ng-container>
    </c8y-column>

    <c8y-column name="subscribers">
      <ng-container *c8yCellRendererDef="let context">
        <a
          title="{{ context.value | number }}"
          [routerLink]="['topic', context.item.id, 'subscribers']"
        >
          {{ context.value | number }}
        </a>
      </ng-container>
    </c8y-column>

    <c8y-column name="backlogSize">
      <ng-container *c8yCellRendererDef="let context">
        <span title="{{ context.value | bytes: 2 : true }}">
          {{ context.value | bytes: 2 }}
        </span>
      </ng-container>
    </c8y-column>

    <c8y-column name="backlogUsagePercentage">
      <ng-container *c8yCellRendererDef="let context">
        <span title="{{ context.value / 100 | percent: '1.0-2' }}">
          {{ context.value / 100 | percent: '1.0-2' }}
        </span>
      </ng-container>
    </c8y-column>
  </c8y-data-grid>
</div>