{{!
  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.fetchClientActivity.isRunning}}
    <VaultLogoSpinner />
  {{else}}
    {{#if this.activityData}}
      <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" data-test-updated-timestamp>
          Updated
          {{date-format this.updatedAt "MMM d yyyy, h:mm:ss aaa" withTimeZone=true}}
        </small>
      </div>
    {{else}}
      <Clients::NoData @config={{this.activityConfig}} />
    {{/if}}
  {{/if}}
</Hds::Card::Container>