{% 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.overlaps, id: 'overlaps' },
                    { text: '=', id: 'eq' },
                    { text: '&gt;', id: 'gt' },
                    { text: '&lt;', id: 'lt' },
                    { text: '&ge;', id: 'gte' },
                    { text: '&le;', id: 'lte' },
                    { 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'">
    <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="node-widget-label concept-label">

    <div class="control-label">
        <span data-bind="text: $root.translations.fuzzyYearPadding"></span>
    </div>
    <div class="edtf-input">
        <input 
            type="number" 
            class="form-control input-md widget-input" 
            data-bind="
                attr: {placeholder: $root.translations.fuzzyYearPadding, 'aria-label': $root.translations.fuzzyYearPadding},
                textInput: config.fuzzy_year_padding
            "
        >
    </div>
    <div class="control-label">
        <span data-bind="text: $root.translations.fuzzyMonthPadding"></span>
    </div>
    <div  class="edtf-input">
        <input 
            type="number" 
            class="form-control input-md widget-input" 
            data-bind="
                attr: {placeholder: $root.translations.fuzzyMonthPadding, 'aria-label': $root.translations.fuzzyMonthPadding},
                textInput: config.fuzzy_month_padding
            "
        >
    </div>
    <div class="control-label">
        <span data-bind="text: $root.translations.fuzzyDayPadding"></span>
    </div>
    <div class="edtf-input">
        <input 
            type="number" 
            class="form-control input-md widget-input" 
            data-bind="
                attr: {placeholder: $root.translations.fuzzyDayPadding, 'aria-label': $root.translations.fuzzyDayPadding},
                textInput: config.fuzzy_day_padding
            "
        >
    </div>
    <div class="control-label">
        <span data-bind="text: $root.translations.fuzzySeasonPadding"></span>
    </div>
    <div class="edtf-input">
        <input 
            type="number" 
            class="form-control input-md widget-input" 
            data-bind="
                attr: {placeholder: $root.translations.fuzzySeasonPadding, 'aria-label': $root.translations.fuzzySeasonPadding},
                textInput: config.fuzzy_season_padding
            "
        >
    </div>
    <div class="control-label">
        <span data-bind="text: $root.translations.multiplierIfDateIsUncertain"></span>
    </div>
    <div class="edtf-input">
        <input 
            type="number" 
            class="form-control input-md widget-input" 
            data-bind="
                attr: {placeholder: $root.translations.multiplierIfDateIsUncertain, 'aria-label': $root.translations.multiplierIfDateIsUncertain},
                textInput: config.multiplier_if_uncertain
            "
        >
    </div>
    <div class="control-label">
        <span data-bind="text: $root.translations.multiplierIfDateIsApproximate"></span>
    </div>
    <div class="edtf-input">
        <input 
            type="number" 
            class="form-control input-md widget-input" 
            data-bind="
                attr: {placeholder: $root.translations.multiplierIfDateIsApproximate, 'aria-label': $root.translations.multiplierIfDateIsApproximate},
                textInput: config.multiplier_if_approximate
            "
        >
    </div>
    <div class="control-label">
        <span data-bind="text: $root.translations.multiplierIfBoth"></span>
    </div>
    <div class="edtf-input">
        <input 
            type="number" 
            class="form-control input-md widget-input" 
            data-bind="
                attr: {placeholder: $root.translations.multiplierIfBoth, 'aria-label': $root.translations.multiplierIfBoth},
                textInput: config.multiplier_if_both
            "
        >
    </div>
</div>
<!-- /ko -->