<div class="card">
    <div class="card-header">
        <h2 class="card-title ng-binding ng-scope" ng-if="!vm.isEditMode">{{::vm.translate.get('Create Product Display Widget')}}</h2>
        <h2 class="card-title ng-binding ng-scope" ng-if="vm.isEditMode">{{::vm.translate.get('Edit Product Display Widget')}}</h2>
    </div>
    <div class="card-body">
        <form name="pageForm" class="form-horizontal">
            <div class="col-sm-offset-2 bg-danger" ng-show="vm.validationErrors">
                <ul>
                    <li ng-repeat="error in vm.validationErrors">{{error}}</li>
                </ul>
            </div>
            <div class="form-group">
                <label class="control-label">{{::vm.translate.get('Widget Name')}}</label>
                <div>
                    <input name="name" ng-model="vm.widgetInstance.name" class="form-control" />
                </div>
            </div>
            <div class="form-group">
                <label class="control-label">{{::vm.translate.get('Widget Zone')}}</label>
                <div>
                    <select ng-model="vm.widgetInstance.widgetZoneId" class="form-control"
                            ng-options="zone.id as zone.name for zone in vm.widgetZones"></select>
                </div>
            </div>
            <div class="form-group">
                <label class="control-label">{{::vm.translate.get('Publish Start')}}</label>
                <div>
                    <p class="input-group simpl-datetime-picker">
                        <input type="text" class="form-control" datetime-picker="dd MMM yyyy HH:mm" ng-model="vm.widgetInstance.publishStart" is-open="vm.datePickerPublishStart.open" datepicker-options="vm.datePickerPublishStart.datepickerOptions" />
                        <span class="input-group-append">
                            <button type="button" class="btn btn-default" ng-click="vm.openCalendar($event, 'datePickerPublishStart')"><i class="fa fa-calendar"></i></button>
                        </span>
                    </p>
                </div>
            </div>
            <div class="form-group">
                <label class="control-label">{{::vm.translate.get('Publish End')}}</label>
                <div>
                    <p class="input-group simpl-datetime-picker">
                        <input type="text" class="form-control" datetime-picker="dd MMM yyyy HH:mm" ng-model="vm.widgetInstance.publishEnd" is-open="vm.datePickerPublishEnd.open" datepicker-options="vm.datePickerPublishEnd.datepickerOptions" />
                        <span class="input-group-append">
                            <button type="button" class="btn btn-default" ng-click="vm.openCalendar($event, 'datePickerPublishEnd')"><i class="fa fa-calendar"></i></button>
                        </span>
                    </p>
                </div>
            </div>
            <div class="form-group">
                <label class="control-label">{{::vm.translate.get('Display Order')}}</label>
                <div>
                    <select ng-model="vm.widgetInstance.displayOrder" class="form-control"
                            ng-options="n for n in vm.numberOfWidgets"></select>
                </div>
            </div>
            <div class="form-group">
                <label class="control-label">{{::vm.translate.get('Category')}}</label>
                <div>
                    <select class="form-control" ng-model="vm.widgetInstance.setting.categoryId"
                            ng-options="category.id as category.name for category in vm.categories">
                        <option value="">@Localizer["All Categories"]</option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="control-label">{{::vm.translate.get('Number of Products')}}</label>
                <div>
                    <input name="name" ng-model="vm.widgetInstance.setting.numberOfProducts" class="form-control" />
                </div>
            </div>
            <div class="form-group">
                <label class="control-label">{{::vm.translate.get('Order By')}}</label>
                <div>
                    <select ng-model="vm.widgetInstance.setting.orderBy" class="form-control"
                            ng-options="sort.id as sort.name for sort in vm.sorts"></select>
                </div>
            </div>
            <div class="form-group">
                <div>
                    <div class="checkbox">
                        <label>
                            <input type="checkbox" ng-model="vm.widgetInstance.setting.featuredOnly"> {{::vm.translate.get('Is Featured Products Only')}}
                        </label>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <div>
                    <button class="btn btn-success float-right" ng-click="vm.save()"><span class="fa fa-save"></span> {{::vm.translate.get('Save')}}</button>
                    <button ui-sref="widget" class="btn btn-default">{{::vm.translate.get('Cancel')}}</button>
                </div>
            </div>
        </form>
    </div>
</div>
