<!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
{% block sw_condition_value_content %}
<div class="sw-condition-line-item-property sw-condition__condition-value">
    <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
    {% block sw_condition_line_item_properties_field_operator %}
    <sw-condition-operator-select
        v-bind="{ operators, condition }"
        :plural="matchesAll"
        :disabled="disabled || undefined"
    />
    {% endblock %}

    <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
    {% block sw_condition_line_item_properties_field_identifiers %}
    <sw-entity-multi-select
        size="medium"
        entity="property_group_option"
        :disabled="disabled || undefined"
        :entity-collection="options"
        :criteria="optionCriteria"
        @select-collapsed="onSelectCollapsed"
        @search-term-change="setSearchTerm"
        @update:entity-collection="setOptions"
    >

        <template #selection-label-property="{ item }">
            <slot
                name="selection-label-property"
                v-bind="{ item }"
            >
                {{ item.group.translated.name || item.group.name }}: {{ item.translated.name || item.name }}
            </slot>
        </template>

        <template #result-label-property="{ item, searchTerm, highlightSearchTerm }">
            <slot
                name="result-label-property"
                v-bind="{ item, searchTerm, highlightSearchTerm }"
            >
                <sw-highlight-text
                    v-if="highlightSearchTerm"
                    :text="item.translated.name || item.name"
                    :search-term="searchTerm"
                />
                <template v-else>
                    {{ item.translated.name || item.name }}
                </template>
            </slot>
        </template>

        <template #result-description-property="{ item, searchTerm, highlightSearchTerm }">
            <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
            {% block sw_condition_line_item_properties_field_description %}
            <slot
                name="result-description-property"
                v-bind="{ item, searchTerm, highlightSearchTerm }"
            >
                <!-- eslint-disable-next-line sw-deprecation-rules/no-twigjs-blocks -->
                {% block sw_condition_line_item_properties_field_description_default %}
                <sw-highlight-text
                    v-if="highlightSearchTerm"
                    :text="item.group.translated.name || item.group.name"
                    :search-term="searchTerm"
                />
                <template v-else>
                    {{ item.group.translated.name || item.group.name }}
                </template>
                {% endblock %}
            </slot>
            {% endblock %}
        </template>
    </sw-entity-multi-select>
    {% endblock %}
</div>
{% endblock %}
