{{!
  Copyright (c) HashiCorp, Inc.
  SPDX-License-Identifier: BUSL-1.1
~}}
{{#if this.flags.secretsSyncIsActivated}}
  {{#if (not this.byMonthActivityData)}}
    {{! byMonthActivityData is an empty array if there is no monthly data (monthly breakdown was added in 1.11)
    this means the user has queried dates before sync clients existed. we render an empty state instead of
    "0 sync clients" (which is what the activity response returns) to be more explicit }}
    <EmptyState
      @title="No secrets sync clients"
      @message="There is no sync data available for this {{if this.isDateRange 'date range' 'month'}}."
      class="is-shadowless"
    />
  {{else if this.isDateRange}}
    <Clients::ChartContainer
      @title={{this.title}}
      @description={{this.description}}
      @timestamp={{@activity.responseTimestamp}}
      @hasChartData={{true}}
      class="no-legend"
    >
      <:subTitle>
        <StatText
          @label="Total sync clients"
          @subText="The total number of secrets synced from Vault to other destinations during this date range."
          @value={{this.totalUsageCounts.secret_syncs}}
          @tooltipText="This number is the total for the queried date range. The chart displays a monthly breakdown of total sync clients per month."
          @size="l"
        />
      </:subTitle>

      <:chart>
        <Clients::Charts::VerticalBarBasic
          @chartTitle={{this.title}}
          @data={{this.byMonthActivityData}}
          @dataKey="secret_syncs"
          @chartHeight={{200}}
        />
      </:chart>
    </Clients::ChartContainer>

    {{! no need to render two empty charts! hide this one if there is no sync data }}
    {{#if this.totalUsageCounts.secret_syncs}}
      <Clients::ChartContainer
        @title="Monthly new"
        @description="Secrets sync clients which interacted with Vault for the first time each month. Each bar represents the total new sync clients for that month."
        @timestamp={{@activity.responseTimestamp}}
        @hasChartData={{true}}
        class="no-legend"
      >
        <:stats>
          {{#let (this.average this.byMonthNewClients "secret_syncs") as |avg|}}
            {{#if avg}}
              <StatText
                @label="Average new sync clients per month"
                @value={{avg}}
                @size="m"
                class="chart-subTitle has-top-padding-l"
              />
            {{/if}}
          {{/let}}
        </:stats>

        <:chart>
          <Clients::Charts::VerticalBarBasic
            @chartTitle="Monthly new"
            @data={{this.byMonthNewClients}}
            @dataKey="secret_syncs"
            @chartHeight={{200}}
          />
        </:chart>
      </Clients::ChartContainer>
    {{/if}}
  {{else}}
    <Clients::UsageStats @title={{this.title}} @description={{this.description}}>
      <StatText @label="Total sync clients" @value={{this.totalUsageCounts.secret_syncs}} @size="l" class="column" />
    </Clients::UsageStats>
  {{/if}}
{{else}}
  <EmptyState
    @title="No Secrets Sync clients"
    @message="No data is available because Secrets Sync has not been activated."
    class="is-shadowless"
  >
    <Hds::Link::Standalone
      @icon="chevron-right"
      @iconPosition="trailing"
      @text="Activate Secrets Sync"
      @route="vault.cluster.sync.secrets.overview"
    />
  </EmptyState>
{{/if}}