{$_locales["no_results"] = _w("Nothing found")}

{$_tooltips["price-error"] = [
    "id" => "price-error",
    "html" => sprintf(_w("Enter a number between 0 and %s99,999,999,999.9999%s with max. 4 decimal digits."), '<span class="nowrap">', "</span>"),
    "width" => "16rem"
]}

{capture assign="_dialog_list_feature_value"}
<div class="wa-dialog s-list-feature-value-dialog" id="js-list-feature-value-dialog">
    <div class="dialog-background"></div>
    <div class="dialog-body">
        <div class="js-vue-section" style="visibility: hidden;">
            <div class="dialog-header">
                <h3 class="s-title">[`Adding a filtering parameter`]</h3>
                <p class="hint" v-if="item_data.render_type !== 'custom'" style="margin-top: -.5rem;">[`Specify a value of this parameter to show only products with that value using a filter.`]</p>
                <div class="s-details">
                    <span class="s-label" v-if="item_data.display_type === 'feature' && item_data.render_type !== 'custom'">[`Feature`]</span>
                    <span class="s-label" v-if="item_data.display_type === 'product'">[`Product property`]</span>
                    <span class="s-label" v-if="item_data.display_type === 'sku'">[`SKU property`]</span>
                    <span class="s-label" v-if="item_data.display_type === 'dynamic'">[`Dynamic property`]</span>
                    <span class="s-name bold text-gray-dark">[`“`]{ { item_data.name } }[`”`]</span>
                </div>
            </div>
            <div v-if="states.is_fetching" class="skeleton box contentbox">
                <div class="skeleton-header"></div>
                <div class="skeleton-line"></div>
                <div class="skeleton-line"></div>
                <div class="skeleton-line"></div>
                <div class="skeleton-line"></div>
            </div>
            <template v-else>
            <div class="dialog-content">
                <div class="s-item-section">
                    {* BOOLEAN (radio) *}
                    <template v-if="item_data.render_type === 'boolean'">
                        <div class="s-fields-wrapper wa-list space-12">
                            <template v-for="option in item_data.options">
                                <div class="s-radio-wrapper" v-if="option.value">
                                    <label class="flexbox middle space-8">
                                        <component-radio v-model="item_data.value"
                                                         v-bind:val="option.value"
                                                         v-bind:name="item_data.rule_type"></component-radio>
                                        <span class="s-label">{ { option.name } }</span>
                                    </label>
                                </div>
                            </template>
                        </div>
                    </template>

                    <template v-else-if="item_data.render_type === 'range'">
                        <div class="s-fields-wrapper flexbox space-12">
                            <template v-for="(option, index) in item_data.options">
                                <div class="s-field-wrapper with-divider" v-bind:class="{ 'is-price' : format === 'price', 'custom-pl-4': index > 0 }">
                                    <component-input class="s-field small"
                                                     v-model="option.value"
                                                     v-bind:class="{ 'state-error': errors['value_error_' + index] }"
                                                     v-bind:validate="validate"
                                                     v-bind:format="format"></component-input>
                                    <span class="s-currency" v-if="item_data.currency" v-html="item_data.currency.sign_html"></span>

                                    <div class="state-error custom-mt-4" v-if="errors['value_error_' + index]">
                                        {_w("Invalid value")|escape}
                                        <span class="s-tooltip-icon" data-tooltip-id="price-error"><i class="fas fa-question-circle text-red"></i></span>
                                    </div>
                                </div>
                            </template>
                            <div class="s-units-wrapper" v-if="item_data.active_unit">
                                <component-dropdown
                                    v-model="item_data.active_unit.value"
                                    v-bind:button_class="'gray-field'"
                                    v-bind:options="item_data.units"></component-dropdown>
                            </div>
                        </div>
                    </template>

                    <template v-else-if="item_data.render_type === 'range.date'">
                        <div class="s-fields-wrapper flexbox space-12">
                            <template v-for="option in item_data.options">
                                <div class="s-field-wrapper with-divider">
                                    <component-date-picker
                                        v-model="option.value"
                                        v-bind:field_class="'s-field small'"></component-date-picker>
                                </div>
                            </template>
                        </div>
                    </template>

                    <template v-else-if="item_data.render_type === 'tags'">
                        <div class="s-tags-section">
                            <div class="s-value-list" v-if="item_data.options.length">
                                <template v-for="item in item_data.options">
                                    <div class="s-value-wrapper">
                                        <span class="s-name" v-text="item.name"></span>
                                        <span class="s-icon icon cursor-pointer" v-on:click="removeItem(item)"><i class="fas fa-times"></i></span>
                                    </div>
                                </template>
                            </div>

                            <div class="s-search-section">
                                <div class="s-field-wrapper">
                                    <input class="s-field js-autocomplete small" type="text" placeholder="{_w("Enter a value")|escape}">
                                    <div class="s-loading-wrapper" v-if="states.is_loading">
                                        <span class="icon top text-light-gray"><i class="fas fa-spinner fa-spin"></i></span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </template>

                    {* CHECKBOX (checklist) *}
                    <template v-else-if="item_data.render_type === 'checkbox'">
                        <component-feature-value-checkbox v-bind:item_data="item_data"></component-feature-value-checkbox>
                    </template>

                    {* CUSTOM dialog from plugin controller *}
                    <template v-else-if="item_data.render_type === 'custom'">
                        <div v-if="custom_html_error">
                            [`Unable to load content from URL:`]
                            <br>{ { item_data.dialog_url } }
                        </div>
                        <div class="skeleton" v-else-if="!custom_html">
                            <span class="skeleton-line"></span>
                            <span class="skeleton-line"></span>
                            <span class="skeleton-line"></span>
                        </div>
                        <div v-else-if="custom_html">
                            <form v-html="custom_html"></form>
                        </div>
                    </template>

                    <template v-else>
                        <span id="s-unknown-render-type">[`Error: unknown “render_type” (possibly broken field from a plugin).`]</span>
                    </template>
                </div>

                {*
                <div class="s-test-data" style="margin-top: 2rem;">{ { item_data.render_type } }</div>
                <div class="s-test-data" style="margin-top: 2rem;">{ { item_data } }</div>
                *}
            </div>
            <div class="dialog-footer">
                <button class="button" type="button"
                        v-if="!custom_html_error"
                        v-bind:disabled="disabled"
                        v-on:click.prevent="save">
                    <span class="s-icon" v-if="states.locked"><i class="fas fa-spinner fa-spin"></i></span>
                    <span class="s-name">[`Add`]</span>
                </button>
                <button class="js-dialog-close button light-gray" type="button">[`Cancel`]</button>
            </div>
            </template>
        </div>
    </div>
</div>
{/capture}
{$_templates["dialog-list-feature-value"] = $_dialog_list_feature_value|strip}

{capture assign="_component_feature_value_checkbox"}
    <div class="vue-component-feature-value-checkbox">
        {* Активные *}
        <div class="s-table-section" v-if="active_items.length">
            <component-feature-value-checkbox-item v-for="item in active_items" v-bind:item="item"></component-feature-value-checkbox-item>
        </div>

        {* Форма добавления *}
        <template v-if="inactive_items.length">
            <div class="s-search-column-wrapper">
                <div class="s-search-section flexbox space-8">
                    <div class="s-field-wrapper wide">
                        <input class="s-field" placeholder="{_w("Search")|escape}" v-model="search_string" v-on:input="search">
                    </div>
                    <template v-if="search_string.length">
                        <div class="s-actions-wrapper flexbox space-8">
                            <div class="s-action is-active"
                                 v-on:click.prevent="revert">
                                <span class="s-icon icon size-14"><i class="fas fa-times"></i></span>
                            </div>
                        </div>
                    </template>
                </div>
            </div>

            <div class="s-table-section">
                <component-feature-value-checkbox-item v-for="item in inactive_items" v-bind:item="item"></component-feature-value-checkbox-item>
            </div>
        </template>
    </div>
{/capture}
{$_components["component-feature-value-checkbox"] = $_component_feature_value_checkbox|strip}

{capture assign="_component_feature_value_checkbox_item"}
    <div class="s-item-wrapper" v-bind:class="item_class" v-bind:key="item.value" v-if="item.states.display">
        <div class="s-item-table">
            <div class="s-column s-column-enable">
                <component-switch v-bind:model-value="item.states.enabled" v-on:change="onToggleSwitch"></component-switch>
            </div>
            <div class="s-column s-column-name">
                <span class="s-name" v-text="item.name"></span>
            </div>
        </div>
    </div>
{/capture}
{$_components["component-feature-value-checkbox-item"] = $_component_feature_value_checkbox_item|strip}