{{!
  Copyright (c) HashiCorp, Inc.
  SPDX-License-Identifier: BUSL-1.1
}}

{{#if (gt @byMonthNewClients.length 1)}}
  <Clients::CountsCard
    @title="Client usage trends for selected billing period"
    @description={{this.chartContainerText}}
    @legend={{this.chartLegend}}
  >

    <:dataLeft>
      <StatText
        @label="New client total and type distribution"
        @subText="The number of new clients which interacted with Vault during the selected period."
        @value={{@runningTotals.clients}}
        @size="m"
        @tooltipText="This number is the total for the queried date range. The chart displays a monthly breakdown of total new clients per month."
      />

      <div class="has-top-padding-l is-flex-row gap-16">
        <StatText @label="Entity" @value={{@runningTotals.entity_clients}} @size="m" />
        <StatText @label="Non-entity" @value={{@runningTotals.non_entity_clients}} @size="m" />
      </div>
      <div class="has-top-padding-m is-flex-row gap-16">
        <StatText @label="ACME" @value={{@runningTotals.acme_clients}} @size="m" />
        {{#if @isSecretsSyncActivated}}
          <StatText @label="Secret sync" @value={{@runningTotals.secret_syncs}} @size="m" />
        {{/if}}
      </div>
    </:dataLeft>

    <:dataRight>
      <div class="flex space-between has-bottom-margin-xl left-padding-16">
        <Hds::Text::Body @tag="p">Client usage by month</Hds::Text::Body>
        <Hds::Form::Toggle::Field
          data-test-input="toggle view"
          {{on "change" (fn (mut this.showStacked) (not this.showStacked))}}
          as |F|
        >
          <F.Label>Split by client type</F.Label>
        </Hds::Form::Toggle::Field>
      </div>
      {{#if this.showStacked}}
        <Clients::Charts::VerticalBarStacked
          @chartTitle="Client usage by month"
          @data={{this.runningTotalData}}
          @chartLegend={{this.chartLegend}}
          @chartHeight={{200}}
        />
      {{else}}
        <Clients::Charts::VerticalBarBasic
          @chartTitle="Client usage by month"
          @data={{this.runningTotalData}}
          @dataKey="new_clients"
          @chartHeight={{200}}
        />
      {{/if}}
    </:dataRight>
  </Clients::CountsCard>
{{else}}
  {{#let (get @byMonthNewClients "0") as |singleMonthData|}}
    {{#if (and @isHistoricalMonth singleMonthData.clients)}}
      <Clients::UsageStats @title="Vault client counts" @description={{this.chartContainerText}}>
        <div class="column" data-test-new>
          <StatText
            @label="New clients"
            @subText="This is the number of clients which were created in Vault for the first time in the selected month."
            @value={{singleMonthData.clients}}
            @size="l"
            class="has-bottom-margin-l"
          />
          <div class="flex row-wrap gap-36">
            <StatText @label="Entity" @value={{singleMonthData.entity_clients}} @size="m" />
            <StatText @label="Non-entity" @value={{singleMonthData.non_entity_clients}} @size="m" />
            <StatText @label="ACME" @value={{singleMonthData.acme_clients}} @size="m" />
            {{#if @isSecretsSyncActivated}}
              <StatText @label="Secret sync" @value={{singleMonthData.secret_syncs}} @size="m" />
            {{/if}}
          </div>
        </div>
      </Clients::UsageStats>
    {{else}}
      {{! Renders when viewing the current month or for activity log data that predates the monthly breakdown added in 1.11 }}
      <Clients::UsageStats
        @title="Total usage"
        @description="These totals are within this {{or @mountPath 'namespace and all its children'}}. {{if
          @isCurrentMonth
          "Only totals are available when viewing the current month. To see a breakdown of new and total clients for this month, select the 'Current billing period' filter."
        }}"
      >
        <StatText
          class="column"
          @label="Total clients"
          @value={{@runningTotals.clients}}
          @size="l"
          @subText="The number of clients which interacted with Vault during this month. This is Vault’s primary billing metric."
        />
        <StatText
          class="column"
          @label="Entity"
          @value={{@runningTotals.entity_clients}}
          @size="l"
          @subText="Representations of a particular user, client, or application that created a token via login."
        />
        <StatText
          class="column"
          @label="Non-entity"
          @value={{@runningTotals.non_entity_clients}}
          @size="l"
          @subText="Clients created with a shared set of permissions, but not associated with an entity."
        />
        <StatText
          class="column"
          @label="ACME"
          @value={{@runningTotals.acme_clients}}
          @size="l"
          @subText="Each ACME request counts as one client."
        />
        {{#if @isSecretsSyncActivated}}
          <StatText
            class="column"
            @label="Secret sync"
            @value={{@runningTotals.secret_syncs}}
            @size="l"
            @subText="A secret with a configured sync destination qualifies as a unique and active client."
          />
        {{/if}}
      </Clients::UsageStats>
    {{/if}}
  {{/let}}
{{/if}}