<div class="chart-wrapper" data-test-usage-stats>
  <div class="chart-header has-header-link has-bottom-margin-m">
    <div class="header-left">
      <h2 class="chart-title">{{@title}}</h2>
      <p class="chart-description"> {{or @description "These totals are within this namespace and all its children."}}</p>
    </div>
    <div class="header-right">
      <DocLink @path="/vault/tutorials/monitoring/usage-metrics">
        Learn more
      </DocLink>
    </div>
  </div>

  <div class="columns">
    <div class="column">
      <StatText
        @label="Total clients"
        @value={{@totalUsageCounts.clients}}
        @size="l"
        @subText="The sum of entity clientIDs and non-entity clientIDs; this is Vault’s primary billing metric."
        data-test-stat-text="total-clients"
      />
    </div>
    <div class="column">
      <StatText
        class="column"
        @label="Entity clients"
        @value={{@totalUsageCounts.entity_clients}}
        @size="l"
        @subText="Representations of a particular user, client, or application that created a token via login."
        data-test-stat-text="entity-clients"
      />
    </div>
    <div class="column">
      <StatText
        class="column"
        @label="Non-entity clients"
        @value={{@totalUsageCounts.non_entity_clients}}
        @size="l"
        @subText="Clients created with a shared set of permissions, but not associated with an entity. "
        data-test-stat-text="non-entity-clients"
      />
    </div>
  </div>
</div>