<div class="ui-datepicker" local-class="ui-datepicker" ...attributes>
  <Asm::Ui::Popover local-class="ui-popover" disabled={{this.isDisabled}} @renderInPlace={{true}} as |Popover|>
    <Popover.Trigger local-class="trigger">
      <Asm::Ui::Button class="ui-datepicker-trigger-button">
        {{svg-jar "calendar-3" local-class="calendar-icon" class="ui-datepicker-calendar-icon" }}

        {{#if (and (is-empty this.selected) (is-empty this.rangeStart))}}
          <div local-class="no-dates">
            {{this.placeholder}}
          </div>
        {{else if (eq this.mode "single")}}
          <div local-class="single-date">
            {{moment-format this.selected.firstObject "Do MMMM YYYY"}}
          </div>
        {{else if (eq this.mode "multiple")}}
          <div local-class="multiple-dates">
            <div local-class="from">
              {{moment-format this.selected.firstObject "Do MMMM YYYY"}}
            </div>
            {{#if (gt this.selected.length 1)}}
              <div local-class="separator">
                ...
              </div>
              <div local-class="to">
                {{moment-format this.selected.lastObject "Do MMMM YYYY"}}
              </div>
            {{/if}}
          </div>
        {{else if (eq this.mode "range")}}
          <div local-class="multiple-dates">

            {{#if (is-same this.rangeStart this.rangeFinish)}}
              <div local-class="from">
                {{moment-format this.rangeStart "Do MMMM YYYY"}}
              </div>
            {{else}}
              <div local-class="from">
                {{moment-format this.rangeStart "Do MMM YYYY"}}
              </div>
              <div local-class="separator">
                to
              </div>
              <div local-class="to">
                {{moment-format this.rangeFinish "Do MMM YYYY"}}
              </div>
            {{/if}}
          </div>
        {{/if}}
      </Asm::Ui::Button>

    </Popover.Trigger>
    <Popover.Content class="ui-popover-content ui-popover-animated options">
      <Asm::Ui::Calendar
        @mode={{this.mode}}
        @center={{this.center}}
        @selected={{this.selected}}
        @rangeStart={{this.rangeStart}}
        @rangeFinish={{this.rangeFinish}}
        @onChangeCenter={{this.onChangeCenter}}
        @onChangeSelection={{fn this.onChangeDateSelection Popover.actions.close}}
        @onChangeRange={{fn this.onChangeDateRange Popover.actions.close}}
      />
    </Popover.Content>
  </Asm::Ui::Popover>
</div>