<c8y-title>{{ topicName$ | 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"
    [path]="'/monitoring/messaging-service/namespace/' + (namespaceId$ | async)"
  ></c8y-breadcrumb-item>
  <c8y-breadcrumb-item [label]="topicName$ | 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">
      <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]="'day-view'"
          ></i>
          <span class="tag tag--default">{{ 'Topic' | translate }}</span>
        </div>
        <span class="h4">{{ topicName$ | async }}</span>
      </div>
      <div class="col-md-4">
        <fieldset class="c8y-fieldset c8y-fieldset--lg">
          <legend translate>Topic usage</legend>

          @if (loading$ | async) {
            <c8y-loading></c8y-loading>
          } @else {
            @let overview = overview$ | async;
            @if (overview) {
              <ul class="list-unstyled small animated fadeIn">
                <li
                  class="p-t-4 p-b-4 d-flex separator-bottom text-nowrap"
                  data-cy="topic-subscribers-view--active-subscribers"
                >
                  <label class="small m-b-0 m-r-auto">{{ 'Active subscribers' | translate }}</label>
                  <span class="m-l-16">{{ overview.topic.activeSubscribers | number }}</span>
                </li>

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

                <li
                  class="p-t-4 p-b-4 d-flex separator-bottom text-nowrap"
                  data-cy="topic-subscribers-view--total-unacknowledged-messages"
                >
                  <label class="small m-b-0 m-r-auto">
                    {{ 'Total unacknowledged messages' | translate }}
                  </label>
                  <span class="m-l-16">{{ overview.topic.unackMsgBacklog | number }}</span>
                </li>

                <li
                  class="p-t-4 p-b-4 d-flex separator-bottom text-nowrap"
                  data-cy="topic-subscribers-view--message-rate-in"
                >
                  <label class="small m-b-0 m-r-auto">
                    {{ 'Message rate in' | translate }}
                  </label>
                  <span
                    class="m-l-16"
                    ngNonBindable
                    translate
                    [translateParams]="{
                      messagesPerSecond: overview.topic.msgRateIn | number
                    }"
                  >
                    {{ messagesPerSecond }} msg/s
                  </span>
                </li>

                <li
                  class="p-t-4 p-b-4 d-flex text-nowrap"
                  data-cy="topic-subscribers-view--message-rate-out"
                >
                  <label class="small m-b-0 m-r-auto">
                    {{ 'Message rate out' | translate }}
                  </label>
                  <span
                    class="m-l-16"
                    ngNonBindable
                    translate
                    [translateParams]="{
                      messagesPerSecond: overview.topic.msgRateOut | number
                    }"
                  >
                    {{ messagesPerSecond }} msg/s
                  </span>
                </li>
              </ul>
            }
          }
        </fieldset>
      </div>

      <div class="col-md-4">
        <fieldset class="c8y-fieldset c8y-fieldset--lg">
          <legend translate>Topic message backlog</legend>

          @if (loading$ | async) {
            <c8y-loading></c8y-loading>
          } @else {
            @let overview = overview$ | async;
            @if (overview) {
              <ul class="list-unstyled small animated fadeIn">
                <li
                  class="p-t-4 p-b-4 d-flex separator-bottom text-nowrap"
                  data-cy="topic-subscribers-view--backlog-usage"
                >
                  <label
                    class="small m-b-0 m-r-auto"
                    translate
                  >
                    Backlog usage
                  </label>
                  <app-usage [percentage]="overview.topic.backlogUsagePercentage"></app-usage>
                  <span class="m-l-16">{{ overview.topic.backlogSize | bytes }}</span>
                </li>

                <li
                  class="p-t-4 p-b-4 d-flex text-nowrap"
                  data-cy="topic-subscribers-view--backlog-quota"
                >
                  <label
                    class="small m-b-0 m-r-auto"
                    translate
                  >
                    Backlog quota
                  </label>
                  <span class="m-l-16">
                    {{
                      overview.policies.backlogQuota?.limit > 0
                        ? (overview.policies.backlogQuota?.limit | bytes)
                        : '-'
                    }}
                  </span>
                </li>
              </ul>
            }
          }
        </fieldset>
      </div>
    </div>
  </div>
  <c8y-data-grid
    class="content-fullpage d-flex d-col border-top border-bottom"
    [title]="tableTitle | translate"
    [loadingItemsLabel]="loadingItemsLabel | translate"
    [loadMoreItemsLabel]="loadMoreItemsLabel | translate"
    [columns]="columns"
    [pagination]="pagination"
    [serverSideDataCallback]="serverSideDataCallback"
    [refresh]="refresh"
    [hideReload]="true"
    [selectable]="selectable"
    [actionControls]="actionControls"
    [bulkActionControls]="bulkActionControls"
  >
    <c8y-ui-empty-state
      [icon]="stats?.size > 0 ? 'search' : 'input'"
      [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">
        <span title="{{ context.value }}">
          {{ context.value }}
        </span>
      </ng-container>
    </c8y-column>

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

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

    <c8y-column name="lastAcknowledgeDate">
      <ng-container *c8yCellRendererDef="let context">
        @if (context.value) {
          <span title="{{ context.value }}">
            {{ context.value | relativeTime }}
          </span>
        } @else {
          &ndash;
        }
      </ng-container>
    </c8y-column>

    <c8y-column name="unackMsgBacklog">
      <ng-container *c8yCellRendererDef="let context">
        <span title="{{ context.value | number }}">
          {{ context.value | number }}
        </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>