{capture assign="_component_table_filters_features"}
<div class="s-filter-features-section s-pane-item dropbox">
    <div class="s-dropbox-toggle js-dropbox-toggle">
        <span class="s-icon icon shift-0 text-light-gray"><i class="fas fa-filter"></i></span>
        <span class="s-name is-adaptive">[`Features`]</span>
    </div>
    <div class="dropbox-body right">
        <div class="s-dropbox-content-section">
            <div class="s-section-header">
                <component-table-filters-search
                    v-if="items.length"
                    class="s-search-form"
                    v-model="search_string"
                    v-bind:placeholder="'{_w("Find parameter")|escape}'"></component-table-filters-search>
                <div class="s-empty-wrapper" v-else>[`Parameters not found.`]</div>
            </div>
            <div class="s-section-body" v-if="items.length">
                <div class="s-features-list">
                    <template v-for="item in items">
                        <component-table-filters-features-item
                            v-show="!item.is_hide"
                            v-bind:item="item"
                            v-on:success="success"
                            v-on:feature_dialog="hide"></component-table-filters-features-item>
                    </template>
                    <div class="js-lazyloading align-center">
                        <div
                            v-show="!empty_search_result"
                            class="custom-py-4"
                            :style="{ visibility: states.is_fetching ? 'visible' : 'hidden' }"
                        >
                            <i class="fas fa-spinner fa-spin"></i>
                        </div>
                    </div>

                    <div v-if="empty_search_result || (!states.is_fetching && !items.length)"
                        class="s-empty-wrapper align-center custom-mt-0 custom-py-4"
                    >[`Parameters not found.`]</div>
                </div>
            </div>

        </div>
    </div>
</div>
{/capture}
{$_components["component-table-filters-features"] = $_component_table_filters_features|strip}

{capture assign="_component_table_filters_features_item"}
<div class="s-feature-wrapper cursor-pointer" v-on:click="toggle">
    <div class="s-name-wrapper flexbox space-8">
        <div v-if="item.icon_img">
            <span class="s-icon icon size-12 shift-inherit"><img v-bind:src="item.icon_img"/></span>
        </div>
        <div v-else-if="item.icon_class">
            <span class="s-icon icon size-12 shift-inherit"><i v-bind:class="item.icon_class"></i></span>
        </div>
        <div v-else-if="item.id || item.display_type === 'feature'">
            <span class="s-icon icon size-12 shift-inherit"><i class="fas fa-sitemap"></i></span>
        </div>
        <div>
            <span class="s-name" v-text="item.name"></span>
            <span class="s-code hint" v-if="item.code" v-text="item.code"></span>
        </div>
    </div>
</div>
{/capture}
{$_components["component-table-filters-features-item"] = $_component_table_filters_features_item|strip}