{$_locales = []}
{$_tooltips = []}
{$_templates = []}
{$_components = []}

{$_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"
]}

{$_urls = [
    "feature_value" => "{$wa_app_url}?module=prod&action=filterGetFeaturesOptions"
]}

{capture assign="_component_feature_value_checkbox"}
<div class="vue-component-feature-value-checkbox">
    {* Активные *}
    <div class="s-table-section" v-if="active_items.length">
        <template v-for="item in active_items">
            <component-feature-value-checkbox-item v-bind:item="item" v-on:change="onToggleSwitch"></component-feature-value-checkbox-item>
        </template>
    </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">
            <template v-for="item in inactive_items">
                <component-feature-value-checkbox-item v-bind:item="item" v-on:change="onToggleSwitch"></component-feature-value-checkbox-item>
            </template>
        </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-color icon color shift-3 size-12" v-if="item.code" v-bind:style="{ 'background-color' : item.code }"></span>
            <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}

<div class="wa-dialog s-category-condition-edit-dialog" id="js-category-condition-edit-dialog">
    <div class="dialog-background"></div>
    <div class="dialog-body">
        <div class="js-vue-section" style="visibility: hidden;">
            <div class="dialog-header">
                <div class="flexbox space-12">
                    <div class="s-title-wrapper wide">
                        <h3 class="s-title">{_w("Parameter editing")}</h3>
                        <div class="s-details">
                            <span class="s-label" v-if="item.type === 'feature'">[`Feature`]</span>
                            <span class="s-label" v-if="item.type === 'product'">[`Product property`]</span>
                            <span class="s-label" v-if="item.type === 'sku'">[`SKU property`]</span>
                            <span class="s-label" v-if="item.type === 'dynamic'">[`Dynamic property`]</span>
                            <span class="s-name bold text-gray-dark"> [`“`]{ { item.name } }[`”`]</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="dialog-content">

                <div class="s-item-section">
                    {* BOOLEAN *}
                    <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' }">
                                    <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-hint" 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-color icon color shift-2 size-12" v-if="item.code" v-bind:style="{ 'background-color' : item.code }"></span>
                                        <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>

                    <template v-else-if="item_data.render_type === 'checkbox'">
                        <component-feature-value-checkbox v-bind:item_data="item_data"></component-feature-value-checkbox>
                    </template>

                    <template v-else>
                        TODO: неизвестный формат
                    </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-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">[`Apply`]</span>
                </button>
                <button class="js-dialog-close button light-gray" type="button">[`Cancel`]</button>
            </div>
        </div>
    </div>

    <script>
        ( function($) {
            var $dialog = $("#js-category-condition-edit-dialog").removeAttr("id"),
                dialog = $dialog.data("dialog");

            dialog.options.initDialog($dialog, dialog, {
                components: {$_components|json_encode},
                templates: {$_templates|json_encode},
                tooltips: {$_tooltips|json_encode},
                locales: {$_locales|json_encode},
                urls: {$_urls|json_encode},

                values: {$values|json_encode}
            });

        })(jQuery);
    </script>
</div>