<div class="future-date-input">
  <div class="control-group">
    <label class={{this.labelClasses}}>
      {{#if this.displayLabelIcon}}{{d-icon
          this.displayLabelIcon
        }}{{/if}}{{this.displayLabel}}
    </label>
    <FutureDateInputSelector
      @value={{readonly this.selection}}
      @content={{this.shortcuts}}
      @clearable={{this.clearable}}
      @onChangeInput={{this.onChangeInput}}
      @onChange={{action (mut this.selection)}}
      @options={{hash none="time_shortcut.select_timeframe"}}
    />
  </div>

  {{#if this.displayDateAndTimePicker}}
    <div class="control-group future-date-input-date-picker">
      {{d-icon "calendar-alt"}}
      <DatePickerFuture
        @value={{this._date}}
        @defaultDate={{this._date}}
        @onSelect={{action "onChangeDate"}}
      />
    </div>

    <div class="control-group future-date-input-time-picker">
      {{d-icon "far-clock"}}
      <Input
        placeholder="--:--"
        @type="time"
        class="time-input"
        @value={{this._time}}
        disabled={{this.timeInputDisabled}}
        {{on "input" (action "onChangeTime" value="target.value")}}
      />
    </div>
  {{/if}}
</div>