<!-- components/oxi-section/form/field/datetime -->
<div class="row">
    <div class="col-lg-8">
        <div class="input-group has-validation">
            <!--
              @allowInput={{true}} is required so that upon validation errors
              the input field gets a red border and the error message is shown in
              <div class="invalid-feedback">.
            -->
            <EmberFlatpickr
                class="form-control"
                @date={{this.date}}
                @onReady={{this.onReady}}
                @onChange={{this.datePicked}}
                @enableTime={{true}}
                @dateFormat={{t 'component.oxifield_datetime.date_format'}}
                @locale={{this.oxiLocale.shortLocale}}
                @allowInput={{true}}
                placeholder={{@content.placeholder}}
                required={{not @content.is_optional}}
            />
            {{#if this.allowClearing}}
                <BsButton
                    @onClick={{this.flatpickr.clear}}
                    @icon="glyphicon glyphicon-trash"
                    @type="light"
                    class="oxi-btn-cancel btn-sm"
                >
                </BsButton>
            {{/if}}
            <BsButton
                @onClick={{this.flatpickr.open}}
                @icon="glyphicon glyphicon-calendar"
            >
            </BsButton>
            <div class="invalid-feedback">{{@error}}</div>
        </div>
    </div>
    <div class="col-lg-4">
        <input class="form-control" type="text" placeholder={{t 'component.oxifield_datetime.timezone' tz=this.timezoneLabel}} disabled/>
    </div>
</div>
