<ul class="nav">
    <li ng-repeat="filterObj in filterObjects">
        <label class="control-label">
            <i class="ms-Icon ms-Icon--{{cmMetadataIcons[filterObj.metadataName]}}"></i>
            {{cmMetadata.getDisplayName(filterObj) | translate}}
        </label>

        <div ng-if="filterObj.metadataType === 'select'">
            <select class="form-control input-sm"
                    ng-model="filterObj.optionModel"
                    ng-change="filterChanged(filterObj, filterObj.optionModel)"
                    ng-options="option.name | translate for option in filterObj.definition.options">
                <option value="">{{'All' | translate}}</option>
            </select>
        </div>
        <div ng-if="filterObj.metadataType === 'text' || filterObj.metadataType === 'textarea' || filterObj.metadataType === 'email' || filterObj.metadataType === 'taxonomy'">
            <input type="text" class="form-control input-sm"
                   placeholder="{{'Contains text' | translate}}"
                   ng-model="filterObj.textModel"
                   ng-change="filterChanged(filterObj, filterObj.textModel)"
                   ng-model-options="{ updateOn: 'default blur', debounce: { 'default': 500, 'blur': 0 } }" />
        </div>

        <div ng-if="filterObj.metadataType === 'checkbox'">
            <select class="form-control input-sm"
                    ng-model="filterObj.optionModel"
                    ng-change="filterChanged(filterObj, filterObj.optionModel)">
                <option value="">{{'All' | translate}}</option>
                <option value="true">{{'Yes' | translate}}</option>
                <option value="false">{{'No' | translate}}</option>
            </select>
        </div>
        <div ng-if="filterObj.metadataType === 'number'">
            <input type="number" class="form-control input-sm"
                   placeholder="{{'From' | translate}}"
                   ng-model="filterObj.modelFrom"
                   ng-change="filterChanged(filterObj, filterObj.modelFrom + '|' + filterObj.modelTo)" />
            <input type="number" class="form-control input-sm"
                   placeholder="{{'To' | translate}}"
                   ng-model="filterObj.modelTo"
                   ng-change="filterChanged(filterObj, filterObj.modelFrom + '|' + filterObj.modelTo)" />
        </div>
        <div ng-if="filterObj.metadataType === 'radio'">
            <select class="form-control input-sm"
                    ng-model="filterObj.optionModel"
                    ng-change="filterChanged(filterObj, filterObj.optionModel)"
                    ng-options="option.name for option in filterObj.definition.options"></select>
        </div>
        <!-- Featuretoggle datetime select to old month selecter for frontend filtering and new with picker -->
        <div ng-if="filterObj.metadataType === 'datetime' && LoadCourseModuleWithoutFiltering">
            <select class="form-control input-sm"
                    ng-model="filterObj.optionModel"
                    ng-change="filterChanged(filterObj, filterObj.optionModel.value)"
                    ng-options="option.name for option in dateOptions">
                <option value="">{{'All' | translate}}</option>
            </select>
        </div>
        <div ng-if="filterObj.metadataType === 'datetime' && !LoadCourseModuleWithoutFiltering">

            <label>{{filterObj.name | translate}}</label>
            <div class="form-group">
                <div 
                     wizdom365-datetime-picker=""
                     min-date=""
                     date="filterObj.optionModel.value[0]"
                     disable-weekends="false"
                     show-date-picker="true"
                     show-time-picker="false"
                     update-fn="enddateChanged"
                     ></div>
            </div>

            <div class="form-group">
                <div 
                     wizdom365-datetime-picker=""
                     min-date=""
                     date="filterObj.optionModel.value[1]"
                     disable-weekends="false"
                     show-date-picker="true"
                     show-time-picker="false"
                     update-fn="enddateChanged"
                     ></div>
            </div>
        </div>
    </li>
    <li ng-repeat="filterRole in filterRolesObj">
        <label class="control-label">
            <i class="ms-Icon ms-Icon--{{cmMetadataIcons[filterRole.internalName]}}"></i>
            {{filterRole.name | translate}}
        </label>

        <div>
            <wizdom365-principalpicker principals="filterRole.optionModel.selectedPrincipals"
                                       mode="users"
                                       allowmultiple="false"
                                       add-fn="selectPrincipalInRoleFilter(principal, filterRole)"
                                       remove-fn="removePrincipalInRoleFilter(principal, filterRole)"
                                       class="principal-picker"></wizdom365-principalpicker>
        </div>
    </li>
</ul>