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

    <ng-form name="datePickerForm">

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

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

                <div class="input-append">
                    <input type="text"
                           name="datepicker"
                           id="{{model.alias}}"
                           ng-model="model.datetimePickerValue"
                           ng-blur="inputChanged()"
                           ng-required="model.validation.mandatory"
                           val-server="value"
                           class="datepickerinput" />
                    <button type="button" class="btn-clear" ng-click="clearDate()" ng-show="hasDatetimePickerValue === true || datePickerForm.datepicker.$error.pickerError === true">
                        <umb-icon icon="icon-delete"></umb-icon>
                        <span class="sr-only"><localize key="content_removeDate">Clear date</localize></span>
                    </button>
                    <span class="add-on">
                        <umb-icon icon="icon-{{ datePickerConfig.noCalendar ? 'time' : 'calendar' }}"></umb-icon>
                    </span>
                </div>

            </umb-date-time-picker>

        </div>

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

        <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>
