<div class="filterSearch container-fluid">

    <div class="alert alert-info" ng-show="filterObjects.length">
        <div class="container-fluid">
            <div class="row" ng-repeat="filterObject in filterObjects">
                <div ng-if="filterObject.columnType === 'role'">
                    <div class="col-xs-12 col-sm-4">
                        {{filterObject.name}}
                    </div>
                    <div class="col-xs-10 col-sm-6">
                        <div wizdom365-principalpicker
                             principals="filterObject.value"
                             allowmultiple="false"
                             alloweveryone="false"
                             add-fn="rolesFilterChanged(principal)"
                             remove-fn="rolesFilterChanged(principal)">
                        </div>
                    </div>
                </div>
                <div ng-if="filterObject.columnType === 'metadata'">
                    <div class="col-xs-12 col-sm-4">
                        {{filterObject.metadataName}}
                    </div>
                    <div class="col-xs-10 col-sm-6">
                        <div ng-if="filterObject.metadataType === 'text' || filterObject.metadataType === 'textarea' || filterObject.metadataType === 'email' || filterObject.metadataType === 'taxonomy'">
                            <input type="text" class="form-control input-sm"
                                   placeholder="{{'Contains text' | translate}}"
                                   ng-model="textModel"
                                   ng-change="filterChanged(filterObject, textModel)"
                                   ng-model-options="{ updateOn: 'default blur', debounce: { 'default': 500, 'blur': 0 } }" />
                        </div>
                        <div ng-if="filterObject.metadataType === 'checkbox'">
                            <input ng-init="filterChanged(filterObject, false)" type="checkbox" class="input-sm"
                                   value="false"
                                   ng-model="model"
                                   ng-change="filterChanged(filterObject, model)" />
                        </div>
                        <div ng-if="filterObject.metadataType === 'imagepicker'">
                            <span ng-init="filterChanged(filterObject, true)"></span>
                            {{'Contains image' | translate}}
                        </div>
                        <div ng-if="filterObject.metadataType === 'number'">
                            <input type="number" class="form-control input-sm"
                                   placeholder="{{'From' | translate}}"
                                   ng-model="modelFrom"
                                   ng-change="filterChanged(filterObject, modelFrom + '|' + modelTo)"
                                   ng-model-options="{ updateOn: 'default blur', debounce: { 'default': 500, 'blur': 0 } }" />
                            <input type="number" class="form-control input-sm"
                                   placeholder="{{'To' | translate}}"
                                   ng-model="modelTo"
                                   ng-change="filterChanged(filterObject, modelFrom + '|' + modelTo)"
                                   ng-model-options="{ updateOn: 'default blur', debounce: { 'default': 500, 'blur': 0 } }" />
                        </div>
                        <div ng-if="filterObject.metadataType === 'radio'">
                            <select class="form-control input-sm"
                                    ng-model="optionModel"
                                    ng-change="filterChanged(filterObject, optionModel)"
                                    ng-options="option.name for option in filterObject.definition.options"></select>
                        </div>
                        <div ng-if="filterObject.metadataType === 'select'">
                            <select class="form-control input-sm"
                                    ng-model="optionModel"
                                    ng-change="filterChanged(filterObject, optionModel)"
                                    ng-options="option.name for option in filterObject.definition.options"></select>
                        </div>
                        <div ng-if="filterObject.metadataType === 'datetime'">
                            <input ng-model="datetimeFrom"
                                   type="text"
                                   datepicker-popup="dd-MM-yyyy"
                                   datepicker-options="datepicker.options"
                                   is-open="datepicker.opened['from']"
                                   class="form-control ng-hide"
                                   ng-change="datetimeFromFormatted = (datetimeFrom | date:'dd-MMM-yyyy'); filterChanged(filterObject, datetimeFrom + '|' + datetimeTo)" />
                            <input type="text" class="form-control input-sm"
                                   placeholder="{{'From' | translate}}"
                                   ng-model="datetimeFromFormatted"
                                   ng-click="datepicker.toggleDatepicker('from')" />
                            <input ng-model="datetimeTo"
                                   type="text"
                                   datepicker-popup="dd-MM-yyyy"
                                   datepicker-options="datepicker.options"
                                   is-open="datepicker.opened['to']"
                                   class="form-control ng-hide"
                                   ng-change="datetimeToFormatted = (datetimeTo | date:'dd-MMM-yyyy'); filterChanged(filterObject, datetimeFrom + '|' + datetimeTo)" />
                            <input type="text" class="form-control input-sm"
                                   placeholder="{{'To' | translate}}"
                                   ng-model="datetimeToFormatted"
                                   ng-click="datepicker.toggleDatepicker('to')" />
                        </div>
                    </div>
                </div>

                <div class="col-xs-2 col-sm-2">
                    <input class="btn btn-primary btn-sm remove" type="button" ng-click="removeFilter(filterObject)" value="{{'Remove' | translate}} &times;" />
                </div>
            </div>
        </div>
    </div>
</div>
