
<div class="gh-date-picker" ...attributes>
    <PowerDatepicker
        @selected={{@value}}
        @center={{@value}}
        @onSelect={{this.onDateSelected}}
        @renderInPlace={{true}}
        @disabled={{@disabled}}
        as |dp|
    >
        <dp.Trigger @tabindex="-1" data-test-date-picker-trigger>
            <div class="{{if this.error "error"}}">
                <input
                    type="text"
                    placeholder={{this.dateFormat}}
                    value={{moment-format @value this.dateFormat}}
                    disabled={{@disabled}}
                    aria-label="Selected date"
                    class="gh-input gh-datepicker-input"
                    {{on "input" (fn this.onDateInput dp)}}
                    {{on "blur" this.onDateBlur}}
                    {{on "keydown" (fn this.onDateKeydown dp)}}
                    {{did-update this.resetInputValue @value}}
                    data-test-date-picker-input
                />
                {{svg-jar "calendar" class="gh-date-picker-cal-icon"}}
            </div>
        </dp.Trigger>
        <dp.Content class="dropdown-menu">
            {{#if (has-block)}}
                {{yield (assign
                    dp
                    (hash
                        select=this.onDateSelected
                        Triger=null
                        Content=null
                        Nav=dp.Nav
                        Days=(component dp.Days minDate=this.minDate maxDate=this.maxDate weekdayFormat="min")
                    )
                )}}
            {{else}}
                <dp.Nav />
                <dp.Days @minDate={{this.minDate}} @maxDate={{this.maxDate}} @weekdayFormat="min" />
            {{/if}}
        </dp.Content>
    </PowerDatepicker>

    {{#if this.error}}
        <div class="gh-date-time-picker-error" data-test-date-picker-error>{{this.error}}</div>
    {{/if}}
</div>