{% load i18n %}
<!-- ko if: $data.search -->
<div class="col-md-4 col-lg-3">
    <select 
        class="resources" 
        data-bind="
            value: op, 
            chosen: {width: '100%', disable_search_threshold: 15},
            optionsText: 'text',
            optionsValue: 'value',
            options: [
                { text: $root.translations.like, value: '~' },
                { text: $root.translations.notLike, value: '!~' },
                { text: $root.translations.equals, value: 'eq' },
                { text: $root.translations.not, value: '!eq' },
                { 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-3 col-lg-2">
    <select 
        data-bind="
            options: languages, 
            optionsText: function(item){return item.name + ' (' + item.code + ')'}, 
            value: language, chosen:{width:'100%'}, 
            attr: {'aria-label': $root.translations.languages}
        "
    ></select>
</div>
<div class="col-md-5 col-lg-7" data-bind="visible: op() !== 'null' && op() !== 'not_null'">
    <input 
        type="text" 
        class="form-control input-lg" 
        style="height: 36px;" 
        data-bind="
            attr: {placeholder: $root.translations.name, 'aria-label': $root.translations.name},
            value: searchValue, 
            valueUpdate: 'keyup'
        "
    >
</div>
<!-- /ko -->
