{% load i18n %}
{% load template_tags %}

<!-- ko ifnot: $data.search -->
<div class="node-config-item">
    <div class="control-label">
        <span data-bind="text: $root.translations.conceptCollection"></span>
    </div>
    <div data-bind="if: conceptCollections().length > 0">
        <select 
            data-bind="
                disable: isEditable === false, 
                placeholder: $root.translations.selectAConceptCollection, 
                value: topConcept, 
                options: conceptCollections, 
                optionsText: 'label', 
                optionsValue: 'id', 
                chosen: {width: '100%', allow_single_deselect: true},
                attr: {'aria-label': $root.translations.conceptCollection}
            "
        ></select>
    </div>
</div>
<!-- /ko -->

<!-- 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.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-8 col-lg-9" data-bind="visible: op() !== 'null' && op() !== 'not_null'">
    <input style="display:inline-block;"
        data-bind="
            value: searchValue,
            select2Query: {
                select2Config: select2Config
            }
        ">
    <span style="z-index: 100; position:absolute; right: 24px; top: 8px;" data-bind="visible: select2Config.isEmpty() === false, click: function(){select2Config.clear();}, onEnterkeyClick, onSpaceClick" tabindex="0"><i class="fa fa-times-circle fa-lg"></i></span>
</div>
<!-- /ko -->
