{% load i18n %}
<!-- ko ifnot: $data.search -->
<div class="node-widget-label new-option-field">
    <div class="control-label">
        <span data-bind="text: $root.translations.domainOptions"></span>
    </div>
    <div class="domain-container">
        <div data-bind="text: $data.search"></div>
        <input 
            class="domain-input" 
            type="text" 
            class="form-control library-search" 
            data-bind="
                attr: {placeholder: $root.translations.addNewOption + '...', 'aria-label': $root.translations.addNewOption},
                disable: !isEditable, 
                value: newOptionLabel, valueUpdate: 'keyup'
            "
        >
        <a href="#" data-bind="disable: !$parent.isEditable, click: function(){if(isEditable){addNewOption()}}, attr: {'aria-label': $root.translations.addNewOption}">
             <i class="fa fa-plus-circle" style="text-align: start"></i>
        </a>
        <div data-bind="sortable: {data: options}">
            <div class="added-domain-option">
                <span class="domain-drag-handle">
                    <i class="fa fa-ellipsis-v option-drag-handle" aria-hidden="true">  </i>
                </span>
                <input class="domain-input-item"  type="text" class="form-control library-search" data-bind="disable: !$parent.isEditable, value: text, valueUpdate: 'keyup'">
                <a href="#" data-bind="disable: !$parent.isEditable, click: function(){if($parent.isEditable){remove()}}, attr: {'aria-label': $root.translations.removeOption + ' ' + text()}">
                     <i class="fa fa-minus-circle" style="text-align: start"></i>
                </a>
            </div>
        </div>
    </div>
</div>
<!-- /ko -->

<!-- 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.equals, id: 'eq' },
                    { text: $root.translations.not, id: '!eq' },
                    { text: $root.translations.hasNoValue, id: 'null' },
                    { text: $root.translations.hasAnyValue, id: 'not_null' },
                ],
                value: op
        }}">
    </select>
</div>
<div class="col-md-8 col-lg-9" data-bind="visible: op() !== 'null' && op() !== 'not_null'">
    <select
        class="form-control library-search" 
        data-bind="
            attr: {'data-label': node.label},
            select2Query: {
                select2Config:{
                    data: options,
                    value: searchValue,
                    allowClear: true,
                    placeholder: $root.translations.selectAnOption,
            }},
        "
    ></select>
</div>
<!-- /ko -->

