{% load i18n %}
<!-- ko if: $data.search -->
<div class="col-md-4 col-lg-3">
    <select 
        class="resources" 
        tabindex="-1" 
        style="display: none;" 
        data-bind="
            value: op, 
            chosen: {width: '100%', disable_search_threshold: 15},
            optionsText: 'text',
            optionsValue: 'value',
            options: [
                { text: '=', value: 'eq' },
                { text: '&gt;', value: 'gt' },
                { text: '&lt;', value: 'lt' },
                { text: '&ge;', value: 'gte' },
                { text: '&le;', value: 'lte' },
                { text: $root.translations.hasNoValue, value: 'null' },
                { text: $root.translations.hasAnyValue, value: 'not_null' },
            ],
            attr: {'aria-label': $root.translations.searchCriteria},
        "
    ></select>
</div>

<div class="col-md-8 col-lg-9" data-bind="visible: op() !== 'null' && op() !== 'not_null'">
    <input 
        class="form-control input-md widget-input" 
        data-bind="
            attr: {placeholder: $root.translations.date, 'aria-label': $root.translations.date},
            value: searchValue, 
            datepicker: {format: dateFormat, viewMode: 'days', minDate: false, maxDate: false}
        "
    >
</div>
<!-- /ko -->


<!-- ko ifnot: $data.search -->
<div class="control-label">
    <span data-bind="text: $root.translations.dateFormat"></span>
</div>
<div class="col-xs-12 pad-no crud-widget-container">
    <select
        data-bind="
            attr: {placeholder: $root.translations.dateFormat, 'aria-label': $root.translations.dateFormat},
            options:dateFormatOptions, 
            optionsText:'name', 
            optionsValue:'id', 
            event: {change: onDateFormatSelection},
            value: dateFormat, 
            chosen: {width: '100%', disable_search: true}
        "
    ></select>
</div>
<!-- /ko -->