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

<Hds::Card::Container @hasBorder={{true}} class="has-padding-l" data-test-card="client-count">
  <div class="is-flex-between">
    <h2 class="title is-4 has-bottom-margin-xxs" data-test-client-count-title>
      Client count
    </h2>

    <LinkTo @route="vault.cluster.clients">Details</LinkTo>
  </div>

  <hr class="has-background-gray-100" />

  {{#if this.hasActivity}}
    {{#if this.fetchClientActivity.isRunning}}
      <VaultLogoSpinner />
    {{else}}
      <div class="is-grid grid-2-columns grid-gap-2 has-top-margin-m grid-align-items-start is-flex-v-centered">
        <StatText @label="Total" @value={{this.activityData.total.clients}} @size="l" @subText={{this.statSubText.total}} />
        <StatText @label="New" @value={{this.currentMonthActivityTotalCount}} @size="l" @subText={{this.statSubText.new}} />
      </div>

      <div class="has-top-margin-l is-flex-center">
        <Hds::Button
          @text="Refresh"
          @isIconOnly={{true}}
          @color="tertiary"
          @icon="sync"
          disabled={{this.fetchClientActivity.isRunning}}
          class="has-padding-xxs"
          {{on "click" (perform this.fetchClientActivity)}}
          data-test-refresh
        />
        <small class="has-left-margin-xs has-text-grey">
          Updated
          {{date-format this.updatedAt "MMM d yyyy, h:mm:ss aaa" withTimeZone=true}}
        </small>
      </div>
    {{/if}}
  {{else}}
    {{! This will likely never show since the clients activity api has changed to always return data. In the past it
  would return no activity data. Adding this empty state here to match the current client count behavior }}
    <Clients::NoData @config={{hash enabled="On"}} />
  {{/if}}
</Hds::Card::Container>