{capture assign="_component_product_column_badge"}
<div class="vue-column-type-badge">
    <template v-if="states.is_locked">
        <span class="s-icon icon"><i class="fas fa-spinner fa-spin"></i></span>
    </template>
    <template v-else>
        <div class="s-flexbox flexbox middle">
            <div class="s-dropdown-wrapper">
                <component-dropdown
                    v-model="value"
                    v-bind:button_class="'s-square-field'"
                    v-bind:options="options"
                    v-on:change="onChange"></component-dropdown>
            </div>
            <div class="s-setup-wrapper" v-if="value === 'custom'">
                <span class="s-setup icon size-12 cursor-pointer" v-on:click="showDialog"><i class="fas fa-pen"></i></span>
            </div>
        </div>
    </template>
</div>
{/capture}
{$_components["component-product-column-badge"] = $_component_product_column_badge|strip}

{capture assign="_dialog_product_column_badge"}
<div class="wa-dialog s-product-column-badge-dialog">
    <div class="dialog-background"></div>
    <div class="dialog-body">
        <div class="js-vue-section" style="visibility: hidden;">
            <div class="dialog-header">
                <h3>{_w("My badge")}</h3>
            </div>
            <div class="dialog-content">
                <component-textarea
                    v-model="column_data.value"
                    v-bind:focus="true"
                    v-bind:class="'small wide'"></component-textarea>

                <div class="s-code-wrapper">
                    <div class="wa-message small white flexbox space-8">
                        <div class="message-icon">
                            <i class="fas fa-info-circle"></i>
                        </div>
                        <div class="message-text wide">
                            <div class="s-title">[`Code example:`]</div>
                            <code class="s-code" v-text="badge.code"></code>
                        </div>
                    </div>
                </div>

            </div>
            <div class="dialog-footer">
                <button class="button yellow" type="button"
                        v-if="is_changed"
                        v-on:click="onSave"
                        v-bind:disabled="states.is_locked">
                    <span class="s-text">[`Save`]</span>
                    <span class="s-icon icon size-12" v-if="states.is_locked"><i class="fas fa-spinner fa-spin"></i></span>
                </button>
                <button class="js-dialog-close button green" type="button" v-else>
                    <span class="s-text">[`Save`]</span>
                </button>

                <button class="js-dialog-close button light-gray" type="button">[`Cancel`]</button>
            </div>
        </div>
    </div>
</div>
{/capture}
{$_templates["dialog-product-column-badge"] = $_dialog_product_column_badge|strip}