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

<div ...attributes>
  <Hds::Text::Display @tag="p" class="has-bottom-margin-xs">
    Date range
  </Hds::Text::Display>

  <div class="is-flex-align-baseline">
    {{#if (and @startTime @endTime)}}
      <p class="is-size-6" data-test-date-range="start">{{this.formattedDate @startTime}}</p>
      <p class="has-left-margin-xs"> — </p>
      <p class="is-size-6 has-left-margin-xs" data-test-date-range="end">{{this.formattedDate @endTime}}</p>
      <Hds::Button
        class="has-left-margin-xs"
        @text="Edit"
        @color="tertiary"
        @icon="edit"
        @iconPosition="trailing"
        data-test-date-range-edit
        {{on "click" (fn (mut this.showEditModal) true)}}
      />
    {{else}}
      <Hds::Button
        @text="Set date range"
        @icon="edit"
        {{on "click" (fn (mut this.showEditModal) true)}}
        data-test-set-date-range
      />
    {{/if}}
  </div>

  {{#if this.showEditModal}}
    <Hds::Modal data-test-date-range-edit-modal @onClose={{this.onClose}} as |M|>
      <M.Header>
        Edit date range
      </M.Header>
      <M.Body>
        <p class="has-bottom-margin-s">
          The start date will be used as the client counting start time and all clients in that month will be considered new.
          {{#if this.version.isEnterprise}}
            We recommend setting this date as your license or billing start date to get the most accurate new and total
            client count estimations. These dates are only for querying data in storage. Editing the date range does not
            change any license or billing configurations.
          {{/if}}
        </p>
        <div class="clients-date-range-display">
          <div>
            <Hds::Form::Label for="start-month">Start</Hds::Form::Label>
            <input
              class="hds-form-text-input"
              type="month"
              value={{this.startDate}}
              max={{this.currentMonth}}
              id="start-month"
              name="start"
              {{on "change" this.updateDate}}
              data-test-date-edit="start"
            />
          </div>
          <div>
            <Hds::Form::Label for="end-month">End</Hds::Form::Label>
            <input
              class="hds-form-text-input"
              type="month"
              value={{this.endDate}}
              max={{this.currentMonth}}
              id="end-month"
              name="end"
              {{on "change" this.updateDate}}
              data-test-date-edit="end"
            />
          </div>
          <Hds::Button
            @text="Reset"
            @color="tertiary"
            @icon="reload"
            {{on "click" this.resetDates}}
            data-test-date-edit="reset"
          />
        </div>
        {{#if this.validationError}}
          <Hds::Form::Error
            class="has-top-margin-xs"
            data-test-date-range-validation
          >{{this.validationError}}</Hds::Form::Error>
        {{/if}}
        {{#if this.useDefaultDates}}
          <Hds::Alert @type="compact" @color="highlight" class="has-top-margin-xs" data-test-range-default-alert as |A|>
            <A.Description>Dashboard will use the default date range from the API.</A.Description>
          </Hds::Alert>
        {{/if}}
      </M.Body>
      <M.Footer as |F|>
        <Hds::Button data-test-save @text="Save" {{on "click" this.handleSave}} />
        <Hds::Button data-test-cancel @text="Cancel" @color="secondary" {{on "click" F.close}} />
      </M.Footer>
    </Hds::Modal>
  {{/if}}
</div>