<div class="box is-sideless is-fullwidth is-marginless is-bottomless">
  <p class="has-bottom-margin-xl">
    This dashboard will surface Vault client usage over time. Clients represent a user or service that has authenticated to
    Vault. Documentation is available
    <DocLink @path="/vault/docs/concepts/client-count">here.</DocLink>
    Date queries are sent in UTC.
  </p>
  <h2 class="title is-6 has-bottom-margin-xs">
    {{this.versionText.label}}
  </h2>
  <div data-test-start-date-editor class="is-flex-align-baseline">
    {{#if this.formattedStartDate}}
      <p class="is-size-6" data-test-date-display>{{this.formattedStartDate}}</p>
      <button type="button" class="button is-link" {{on "click" (fn (mut this.showBillingStartModal) true)}}>
        Edit
      </button>
    {{else}}
      <DateDropdown @handleSubmit={{this.handleClientActivityQuery}} @dateType="startDate" @submitText="Save" />
    {{/if}}
  </div>
  <p class="is-8 has-text-grey has-bottom-margin-xl">
    {{this.versionText.description}}
  </p>
  {{#if this.noActivityData}}
    {{#if (eq @model.config.enabled "On")}}
      <EmptyState
        @title="No data received  {{if this.dateRangeMessage this.dateRangeMessage}}"
        @message="Tracking is turned on and Vault is gathering data. It should appear here within 30 minutes."
      />
    {{else}}
      <EmptyState
        @title="Data tracking is disabled"
        @message="Tracking is disabled, and no data is being collected. To turn it on, edit the configuration."
      >
        {{#if @model.config.configPath.canUpdate}}
          <p>
            <LinkTo @route="vault.cluster.clients.config">
              Go to configuration
            </LinkTo>
          </p>
        {{/if}}
      </EmptyState>
    {{/if}}
  {{else if this.errorObject}}
    <Clients::Error @error={{this.errorObject}} />
  {{else}}
    {{#if (eq @model.config.enabled "Off")}}
      <AlertBanner data-test-tracking-disabled @type="warning" @title="Tracking is disabled">
        Tracking is currently disabled and data is not being collected. Historical data can be searched, but you will need to
        <LinkTo @route="vault.cluster.clients.edit">
          edit the configuration
        </LinkTo>
        to enable tracking again.
      </AlertBanner>
    {{/if}}
    {{#if (or this.totalUsageCounts this.hasAttributionData)}}
      <div class="is-subtitle-gray has-bottom-margin-m">
        FILTERS
        <Toolbar data-test-clients-filter-bar>
          <ToolbarFilters>
            <CalendarWidget
              @startTimestamp={{this.startMonthTimestamp}}
              @endTimestamp={{this.endMonthTimestamp}}
              @selectMonth={{this.handleClientActivityQuery}}
            />
            {{#if this.namespaceArray}}
              <SearchSelect
                @id="namespace-search-select"
                @options={{this.namespaceArray}}
                @selectLimit="1"
                @disallowNewItems={{true}}
                @fallbackComponent="input-search"
                @onChange={{this.selectNamespace}}
                @placeholder={{"Filter by namespace"}}
                @displayInherit={{true}}
                class="is-marginless"
              />
            {{/if}}
            {{#if (not (is-empty this.authMethodOptions))}}
              <SearchSelect
                @id="auth-method-search-select"
                @options={{this.authMethodOptions}}
                @selectLimit="1"
                @disallowNewItems={{true}}
                @fallbackComponent="input-search"
                @onChange={{this.setAuthMethod}}
                @placeholder={{"Filter by auth method"}}
                @displayInherit={{true}}
              />
            {{/if}}
          </ToolbarFilters>
        </Toolbar>
      </div>

      {{#if (or this.upgradeDuringActivity this.startTimeDiscrepancy)}}
        <AlertBanner @type="warning" @title="Warning">
          <ul class={{if (and this.versionUpdateText this.startTimeDiscrepancy) "bullet"}}>
            {{#if this.startTimeDiscrepancy}}
              <li>{{this.startTimeDiscrepancy}}</li>
            {{/if}}
            {{#if this.upgradeDuringActivity}}
              <li>
                {{this.upgradeVersionAndDate}}
                {{this.upgradeExplanation}}
                <DocLink
                  @path="/vault/docs/concepts/client-count/faq#q-which-vault-version-reflects-the-most-accurate-client-counts"
                >
                  Learn more here.
                </DocLink>
              </li>
            {{/if}}
          </ul>
        </AlertBanner>
      {{/if}}
      {{#if this.isLoadingQuery}}
        <LayoutLoading />
      {{else}}
        {{#if this.totalUsageCounts}}
          {{#unless this.byMonthActivityData}}
            {{! UsageStats render when viewing a single, historical month AND activity data predates new client breakdown (< v1.10.0)
             or viewing the current month filtered down to auth method }}
            <Clients::UsageStats
              @title="Total usage"
              @description="These totals are within 
              {{if this.selectedAuthMethod this.selectedAuthMethod 'this namespace and all its children'}}.
              {{if
                this.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."
              }}"
              @totalUsageCounts={{this.totalUsageCounts}}
            />
          {{/unless}}
          {{#if this.byMonthActivityData}}
            <Clients::RunningTotal
              @chartLegend={{this.chartLegend}}
              @selectedAuthMethod={{this.selectedAuthMethod}}
              @byMonthActivityData={{this.byMonthActivityData}}
              @isHistoricalMonth={{and (not this.isCurrentMonth) (not this.isDateRange)}}
              @isCurrentMonth={{this.isCurrentMonth}}
              @runningTotals={{this.totalUsageCounts}}
              @upgradeData={{this.upgradeDuringActivity}}
              @responseTimestamp={{this.responseTimestamp}}
            />
          {{/if}}
          {{#if this.hasAttributionData}}
            <Clients::Attribution
              @chartLegend={{this.chartLegend}}
              @totalUsageCounts={{this.totalUsageCounts}}
              @newUsageCounts={{this.newClientCounts}}
              @totalClientAttribution={{this.totalClientAttribution}}
              @newClientAttribution={{this.newClientAttribution}}
              @selectedNamespace={{this.selectedNamespace}}
              @startTimestamp={{this.startMonthTimestamp}}
              @endTimestamp={{this.endMonthTimestamp}}
              @responseTimestamp={{this.responseTimestamp}}
              @isHistoricalMonth={{and (not this.isCurrentMonth) (not this.isDateRange)}}
              @upgradeExplanation={{this.upgradeExplanation}}
            />
          {{/if}}
          {{#if this.hasMultipleMonthsData}}
            <Clients::MonthlyUsage
              @chartLegend={{this.chartLegend}}
              @verticalBarChartData={{this.byMonthActivityData}}
              @responseTimestamp={{this.responseTimestamp}}
            />
          {{/if}}
        {{/if}}
      {{/if}}
    {{else if (and (not @model.licenseStartTimestamp) (not this.startMonthTimestamp))}}
      {{! Empty state for no billing/license start date }}
      <EmptyState @title={{this.versionText.title}} @message={{this.versionText.message}} />
    {{else}}
      <EmptyState
        @title="No data received  {{if this.dateRangeMessage this.dateRangeMessage}}"
        @message="Select a different start date above, or choose a different end date here:"
      >
        <DateDropdown
          @handleSubmit={{this.handleClientActivityQuery}}
          @validateDate={{this.isEndBeforeStart}}
          @dateType="endDate"
          @submitText="View"
        />
      </EmptyState>
    {{/if}}
  {{/if}}

  {{! BILLING START DATE MODAL }}

  <Modal
    @title="Edit start month"
    @onClose={{action (mut this.showBillingStartModal) false}}
    @isActive={{this.showBillingStartModal}}
    @showCloseButton={{true}}
  >
    <section class="modal-card-custom has-padding-m">
      <p class="has-bottom-margin-s">
        {{this.versionText.description}}
      </p>
      <p><strong>{{this.versionText.label}}</strong></p>
    </section>
    <DateDropdown
      @handleSubmit={{this.handleClientActivityQuery}}
      @dateType="startDate"
      @submitText="Save"
      @handleCancel={{fn this.handleClientActivityQuery (hash dateType="cancel")}}
    />
  </Modal>
</div>