{{!
  Copyright (c) HashiCorp, Inc.
  SPDX-License-Identifier: BUSL-1.1
}}
<div ...attributes>
  <div class="is-flex-column align-items-end">
    {{#if this.version.isEnterprise}}
      <Hds::Text::Display @tag="p" @size="100" class="has-bottom-margin-xs">
        Change billing period
      </Hds::Text::Display>
      <Hds::Dropdown class="has-left-margin-xs" @matchToggleWidth={{true}} as |D|>
        <D.ToggleButton @text="Billing start date" @color="secondary" data-test-date-range-edit />
        <D.Description @text="Current period" />
        <D.Checkmark
          {{on "click" (fn this.updateEnterpriseDateRange @billingStartTime)}}
          @selected={{eq this.selectedStart (this.formattedDate @billingStartTime)}}
          data-test-date-range-billing-start="0"
        >
          {{this.formattedDate @billingStartTime}}
        </D.Checkmark>
        {{#if this.historicalBillingPeriods.length}}
          <D.Separator />
          <D.Description @text="Historical periods" />
          {{#each this.historicalBillingPeriods as |period idx|}}
            <D.Checkmark
              {{on "click" (fn this.updateEnterpriseDateRange period)}}
              data-test-date-range-billing-start={{add idx 1}}
              @selected={{eq this.selectedStart (this.formattedDate period)}}
            >
              {{this.formattedDate period}}
            </D.Checkmark>
          {{/each}}
        {{/if}}
      </Hds::Dropdown>
    {{else}}
      {{#unless (and this.startDate this.endDate)}}
        <Hds::Button
          class="has-left-margin-xs"
          @text="Set date range"
          @icon="edit"
          {{on "click" (fn @setEditModalVisible true)}}
          data-test-date-range-edit
        />
      {{/unless}}
    {{/if}}

  </div>

  {{#if @showEditModal}}
    <Hds::Modal data-test-date-range-edit-modal @onClose={{this.onClose}} as |M|>
      <M.Header>
        Edit date range
      </M.Header>
      <M.Body>
        <Hds::Text::Body @tag="div">
          <p class="has-bottom-margin-s">
            Use custom date ranges to query historic client count data. Query results do not include the current month.
          </p>
          <ul class="has-bottom-margin-s">
            <li>
              <strong>Start</strong>
              sets the month and year (inclusive) for the first month of client counting.
            </li>
            <li>
              <strong>End</strong>
              sets the month and year (inclusive) for the final month of client counting.
            </li>
          </ul>
          <p class="has-bottom-margin-s">
            We recommend setting
            <strong>Start</strong>
            to your Vault deploy date to get the most accurate new and total client count estimations.</p>

          <div class="clients-date-range-display">
            <div>
              <Hds::Form::TextInput::Field
                @type="month"
                @value={{this.modalStart}}
                max={{this.previousMonth}}
                id="start-month"
                name="start"
                {{on "change" this.updateDate}}
                data-test-date-edit="start"
                as |F|
              >
                <F.Label>Start</F.Label>
              </Hds::Form::TextInput::Field>
            </div>
            <div>
              <Hds::Form::TextInput::Field
                @type="month"
                @value={{this.modalEnd}}
                max={{this.previousMonth}}
                id="end-month"
                name="end"
                {{on "change" this.updateDate}}
                data-test-date-edit="end"
                as |F|
              >
                <F.Label>End</F.Label>
              </Hds::Form::TextInput::Field>
            </div>
          </div>
          {{#if this.validationError}}
            <Hds::Form::Error
              class="has-top-margin-xs"
              data-test-date-range-validation
            >{{this.validationError}}</Hds::Form::Error>
          {{/if}}
        </Hds::Text::Body>
      </M.Body>
      <M.Footer as |F|>
        <Hds::Button @text="Save" {{on "click" this.handleSave}} data-test-submit />
        <Hds::Button @text="Cancel" @color="secondary" {{on "click" F.close}} data-test-cancel />
      </M.Footer>
    </Hds::Modal>
  {{/if}}
</div>