<div class="umb-property-editor umb-datepicker" ng-controller="Umbraco.PropertyEditors.DatepickerController">

    <ng-form name="datePickerForm">

        <div id="datepicker{{model.alias}}">

            <umb-flatpickr
                ng-model="model.value"
                options="datePickerConfig"
                on-setup="datePickerSetup(fpItem)"
                on-change="datePickerChange(dateStr)">

                <div class="input-append">
                    <input
                        name="datepicker"
                        id="{{model.alias}}"
                        type="text"
                        ng-model="model.datetimePickerValue"
                        ng-blur="inputChanged()"
                        ng-required="model.validation.mandatory"
                        val-server="value"
                        class="datepickerinput">
                    <span class="on-top" ng-click="clearDate()" ng-show="hasDatetimePickerValue === true || datePickerForm.datepicker.$error.pickerError === true">
                        <i class="icon-delete"></i>
                    </span>
                    <span class="add-on">
                        <i class="icon-calendar"></i>
                    </span>
                </div>

            </umb-flatpickr>

        </div>

        <span ng-messages="datePickerForm.datepicker.$error" show-validation-on-submit >
            <span class="help-inline" ng-message="required"><localize key="general_required">Required</localize></span>
            <span class="help-inline" ng-message="valServer">{{datePickerForm.datepicker.errorMsg}}</span>
            <span class="help-inline" ng-message="pickerError"><localize key="validation_invalidDate">Invalid date</localize></span>
        </span>

        <p ng-if="model.config.offsetTime === '1' && serverTimeNeedsOffsetting && model.value" class="muted">
            <small><localize key="content_scheduledPublishServerTime">This translates to the following time on the server:</localize> {{serverTime}}</small><br />
            <small><localize key="content_scheduledPublishDocumentation">What does this mean?</localize></small>
        </p>

    </ng-form>
</div>
