{% load i18n %}
<!-- ko if: $data.search -->
<div class="col-md-4 col-lg-3">
    <select class="resources" data-bind="
        attr: {'data-label': node.label},
        select2Query: {
            select2Config:{
                data: [
                    { text: $root.translations.sizeGreaterThan, id: 'gte' },
                    { text: $root.translations.sizeLessThan, id: 'lte' },
                    { text: $root.translations.hasNoValue, id: 'null' },
                    { text: $root.translations.hasAnyValue, id: 'not_null' },
                ],
                value: op,
            }}">
    </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.value, 'aria-label': node.label},
            textInput: searchValue
        "
    >
</div>
<!-- /ko -->

<!-- ko ifnot: $data.search -->
<div class="relative">
    <div class="node-config-item">
        <label class="col-xs-12 control-label widget-input-label">
            <p class="control-label node-widget-label">
                <span data-bind="text: $root.translations.maximumNumberOfFiles"></span>
            </p>
            <input class="form-control input-md widget-input widget-file" placeholder="1" type="number" data-bind="textInput: maxFiles"></input>
        </label>
    </div>
    <div class="node-config-item">
        <div class="pad-no">
            <div
                data-bind="
                    component: {
                        name: 'views/components/simple-switch',
                        params: {
                            value: imagesOnly,
                            config: {
                                label: $root.translations.imagesOnly,
                            }
                        }
                    }
                "
            ></div>
        </div>
    </div>
</div>
<!-- /ko -->
