{$_tooltips["stock-error"] = [
    "id" => "stock-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"
]}

{$_tooltips["stock-edit-disabled"] = [
    "id" => "stock-edit-disabled",
    "html" => _w("You can enter stock values in the table mode with SKUs or in the product editor."),
    "position" => "top",
    "hover" => false
]}

{$_tooltips["stock-virtual-edit-disabled"] = [
    "id" => "stock-virtual-edit-disabled",
    "html" => _w("You can view the quantity available on a virtual stock in the table mode with SKUs or in the product editor."),
    "position" => "top"
]}

{capture assign="_component_product_column_stock"}
    <div class="vue-render-type-stock">
        <template v-if="editable">
            <template v-if="states.is_locked">
                <span class="s-icon icon" v-bind:key="'fa-spinner'"><i class="fas fa-spinner fa-spin"></i></span>
            </template>
            <template v-else>
                <div class="s-field-wrapper">
                    <div class="s-stock-wrapper is-edit">
                        <div class="s-icon-wrapper">
                            <span class="icon shift-up-1" v-bind:class="icon_class"><svg><use xlink:href='{$_sprite_url}#warehouse'></use></svg></span>
                        </div>
                        <template v-if="states.is_preview">
                            <input class="s-field small full-width s-square-field" placeholder="∞" type="text" readonly
                                   v-bind:class="{ 'state-error' : errors['stock_error'] }"
                                   v-on:focus="togglePreview(false)"
                                   v-on:click="togglePreview(false)"
                                   v-model="formatted_value">
                        </template>
                        <template v-else>
                            <component-input
                                class="s-field small full-width s-square-field"
                                v-model="column_data.value"
                                v-bind:cancel="true"
                                v-bind:focus="true"
                                v-bind:class="{ 'state-error' : errors['stock_error'] }"
                                v-bind:validate="'number-negative'"
                                v-bind:fraction_size="3"
                                v-bind:placeholder="'∞'"
                                v-on:input="onInput"
                                v-on:cancel="togglePreview(true)"
                                v-on:change="onChange"></component-input>
                        </template>
                    </div>

                    <div class="state-error-hint" v-if="errors['stock_error']">
                        {_w("Invalid value")|escape}
                        <span class="s-tooltip-icon" data-tooltip-id="stock-error"><i class="fas fa-question-circle text-red"></i></span>
                    </div>
                </div>
            </template>
        </template>
        <template v-else>
            <div class="s-stock-wrapper" v-if="display_value">
                <div class="s-icon-wrapper">
                    <span class="icon shift-up-1" v-bind:class="icon_class" v-if="stock && stock.is_virtual"><svg><use xlink:href='{$_sprite_url}#warehouse_stroke'></use></svg></span>
                    <span class="icon shift-up-1" v-bind:class="icon_class" v-else><svg><use xlink:href='{$_sprite_url}#warehouse'></use></svg></span>
                </div>
                <div class="s-count-wrapper">{ { column_data.value ? formatted_value : '∞' } }</div>
            </div>
            <template v-else>
                <div class="s-stock-wrapper" v-if="stock && stock.is_virtual">
                    <div class="s-icon-wrapper" data-tooltip-id="stock-virtual-edit-disabled">
                        <span class="icon shift-up-1 text-light-gray"><svg><use xlink:href='{$_sprite_url}#warehouse_stroke'></use></svg></span>
                    </div>
                    <div class="s-count-wrapper">{ { column_data.value ? formatted_value : '∞' } }</div>
                </div>

                <div class="s-stock-wrapper is-edit" v-else  data-tooltip-id="stock-edit-disabled">
                    <div class="s-icon-wrapper">
                        <span class="icon shift-up-1 text-light-gray"><svg><use xlink:href='{$_sprite_url}#warehouse'></use></svg></span>
                    </div>
                    <input class="s-field small full-width s-square-field is-disabled" type="text" readonly
                           v-bind:value="column_data.value ? formatted_value : '∞'">
                </div>
            </template>
        </template>
    </div>
{/capture}
{$_components["component-product-column-stock"] = $_component_product_column_stock|strip}