{strip}

{$_title = _w("New product type")}
{if !empty($type.id)}
    {$_title = _w("Product type settings")}
{/if}

{*array(
    'id' => '4',
    'sort' => '3',
    'name' => 'FFF',
    'icon' => 'ZZZ',
    'cross_selling' => 'alsobought',
    'upselling' => '0',
    'count' => '0',
)*}

{$_active_icon = $type.icon_class}
{$_icon_uri = $type.icon_url}

{* LOCALES *}

{$_locales = [
    "units_unique_error" => _w("A stock and a base unit must be different."),
    "order_multiplicity_factor_error" => _w("Enter a number from 0.001 to 999,999.999. Maximum 3 decimal digits.")|escape,
    "order_count_step_error" => _w("The quantity adjustment value with “+/-” buttons must be greater than 0 and must be divisible by the add-to-cart step without remainder.")|escape,
    "order_count_min_error" => _w("The minimum orderable product quantity must be greater than 0 and must be divisible by the add-to-cart step without remainder.")|escape,
    "stock_base_ratio_required" => _w("The value must be greater than 0.")|escape,
    "denominator_step_required" => _w("Specify the add-to-cart step to set the quantity adjustment value in the shopping cart with “+/-” buttons.")|escape,
    "denominator_min_required" => _w("Specify the add-to-cart step to set the minimum orderable product quantity.")|escape
]}

{* ШАБЛОНЫ *}

{$_templates = []}

{capture assign="_component_switch"}
{literal}
    <div class="vue-component-switch flexbox middle space-4">
        <div v-if="title_data">
            <span class="wa-tooltip icon size-14 text-dark-gray top"
                v-bind:data-wa-tooltip-content="title_data">
                <i class="fas fa-question-circle"></i>
            </span>
        </div>
        <div class="switch small" v-bind:class="class_switch"><input type="checkbox" v-model="modelValue" v-bind:disabled="prop_disabled"></div>
    </div>
{/literal}
{/capture}
{$_templates["component-switch"] = $_component_switch}

{capture assign="_confirm_fractional_dialog"}{include file="./SettingsTypefeatTypeEditConfirm.html" type=$type inline}{/capture}
{$_templates["dialog-confirm-fractional"] = $_confirm_fractional_dialog}

{/strip}

<div class="dialog s-settings-type-add-dialog" id="js-settings-type-add-dialog">
    <div class="dialog-background"></div>
    <div class="wa-dialog-body dialog-body">
        {* HEADER *}
        <header class="dialog-header">
            <h1 class="s-title">{$_title|escape}</h1>
        </header>

        {* CONTENT *}
        <form action="" method="post">
            <div class="dialog-content">

                {* TOGGLE *}
                {strip}
                {if !empty($type_templates)}
                    <div class="toggle js-type-toggle-section" id="toggle-tabs">
                        <span class="s-field selected" data-section="custom">[`Custom product type`]</span>
                        <span class="s-field" data-section="template">[`Select from templates`]</span>
                    </div>
                {/if}
                {/strip}

                <div class="s-fields-wrapper">
                    <div class="field-group" data-content-id="custom">
                        <div class="field">
                            <div class="name">[`Product type name`]</div>
                            <div class="value">
                                <input type="text" name="name" class="width-50" value="{$type.name|default:""|escape}">
                            </div>
                        </div>
                        <div class="field custom-mt-16">
                            <div class="name">[`Product type icon`]</div>
                            <div class="value">
                                <ul class="chips s-type-icons-list js-type-icons-list">
                                    {foreach $icons as $_icon_class}
                                        <li class="s-toggle-wrapper">
                                            <label class="chip s-label">
                                                <input class="s-field" type="radio" name="icon" value="{$_icon_class}" {if !empty($_active_icon) && $_active_icon === $_icon_class}checked{/if}>
                                                <span class="icon"><i class="{$wa->shop->convertIcon($_icon_class)}"></i></span>
                                            </label>
                                        </li>
                                    {/foreach}
                                </ul>

                                <div class="s-custom-icon-wrapper">
                                    <div class="s-description small">[`Or enter icon URL (should be a 16x16 px image)`]:</div>
                                    <input class="s-field width-50" type="text" name="icon_url" value="{$_icon_uri|default:""|escape}">
                                </div>
                            </div>
                        </div>

                        {if !empty($is_premium)}
                        <div class="field s-fractional-wrapper">
                            <div class="name">
                                <div class="s-label">[`Quantity units<br>and adding to the shopping cart`]</div>
                                <div class="s-label-small">[`Specify default values to be applied to newly-added products.`]</div>
                            </div>
                            <div class="value">

                                {$_tooltips = [
                                    "disabled" => sprintf_wp("Enable selection of different quantity units in the <a href=\"%s\" target=\"_blank\">settings</a> to make this option available.", '?action=settings#/unit/'),
                                    "stock_unit" => _w("A stock quantity unit is used for storing product stock quantities and for adding products to the shopping cart."),
                                    "base_unit" => _w("A base quantity unit can be used for the comparison of product prices in the storefront. For instance, pound—to compare the prices of weight products with packages of different size."),
                                    "stock_base_ratio" => _w("Numeric conversion ratio between a stock and a base unit. For example, weight value corresponding to a standard product package. Editable in product properties."),
                                    "order_multiplicity_factor" => _w("Minimal value by which the product quantity in the shopping cart can be changed."),
                                    "order_multiplicity_factor_disabled" => sprintf_wp("To set up an add-to-cart step, enable fractional product support in the <a href=\"%s\" target=\"_blank\">settings</a>.", '?action=settings#/unit/'),
                                    "order_count_min" => _w("Minimal product quantity that can be added to the shopping cart."),
                                    "order_count_min_disabled" => sprintf_wp("To set up a minimum orderable quantity, enable fractional product support in the <a href=\"%s\" target=\"_blank\">settings</a>.", '?action=settings#/unit/'),
                                    "order_count_step" => _w("The value by which the product quantity must be changed via the “+/-” buttons in the shopping cart."),
                                    "order_count_step_disabled" => sprintf_wp("To set up a quantity adjustment value via “+/-” buttons, enable fractional product support in the <a href=\"%s\" target=\"_blank\">settings</a>.", '?action=settings#/unit/')
                                ]}

                                <div class="s-fractional-section js-fractional-section">
                                    <div class="s-options-list">

                                        {* Складская единица *}
                                        <div class="s-option-wrapper">
                                            <div class="s-column-switch">
                                                <component-switch
                                                    class="s-switch"
                                                    v-model="fractional.stock_unit.enabled"
                                                    v-bind:class_switch="'js-switch-stock-unit'"
                                                    v-bind:title="!fractional.stock_unit.status ? '{$_tooltips["disabled"]|escape}' : ''"
                                                    v-bind:disabled="!fractional.stock_unit.status"
                                                    v-on:change="onChangeStockUnitEnabled"></component-switch>

                                                <input name="stock_unit_fixed" type="hidden" v-model="stock_unit_fixed">
                                            </div>
                                            <div class="s-column-content"
                                                 v-bind:class="{ 'is-disabled': !fractional.stock_unit.status }">

                                                <div class="flexbox space-12">
                                                    <div class="s-title-wrapper">
                                                        <span class="s-title">[`Stock unit`] </span>
                                                        <span class="wa-tooltip text-dark-gray size-12 icon baseline" data-wa-tooltip-content="{$_tooltips['stock_unit']|escape}">
                                                            <i class="fas fa-question-circle"></i>
                                                        </span>
                                                    </div>
                                                    <div class="s-default-wrapper wide">
                                                        <div class="wa-select smallest">
                                                            <select name="stock_unit_id"
                                                                v-bind:class="{ 'wa-error-field' : errors['units_error'] }"
                                                                v-bind:disabled="!fractional.stock_unit.status || !fractional.stock_unit.enabled"
                                                                v-on:change="onChangeStockUnit"
                                                                v-model="fractional.stock_unit.value">
                                                                {foreach $fractional["units"] as $_unit}
                                                                    <option value="{$_unit.value|escape}">{$_unit.name|escape}</option>
                                                                {/foreach}
                                                            </select>
                                                        </div>
                                                        <div class="wa-error-text"
                                                             v-if="errors['units_error']"
                                                             v-html="errors['units_error'].text"></div>

                                                        <template v-if="fractional.stock_unit.status && fractional.stock_unit.enabled">
                                                            <div class="s-rights-wrapper small custom-mt-4">
                                                                <label>
                                                                    <input class="s-checkbox js-checkbox" type="checkbox"
                                                                           type="text"
                                                                           v-on:change="onChangeStockUnitEditable"
                                                                           v-model="fractional.stock_unit.editable">
                                                                    <span class="s-label"> [`Allow to change in product properties`]</span>
                                                                </label>
                                                            </div>
                                                        </template>
                                                        <template v-else>
                                                            <div class="hint">[`For all products of this type`]</div>
                                                        </template>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        {* Базовая единица *}
                                        <div class="s-option-wrapper">
                                            <div class="s-column-switch">
                                                <component-switch
                                                    v-model="fractional.base_unit.enabled"
                                                    v-bind:class_switch="'js-switch-base-unit'"
                                                    v-bind:title="!fractional.base_unit.status ? '{$_tooltips["disabled"]|escape}' : ''"
                                                    v-bind:disabled="!fractional.base_unit.status"
                                                    v-on:change="onChangeBaseUnitEnabled"></component-switch>

                                                <input name="base_unit_fixed" type="hidden" v-model="base_unit_fixed">
                                            </div>
                                            <div class="s-column-content"
                                                 v-bind:class="{ 'is-disabled': !fractional.base_unit.status }">

                                                <div class="flexbox space-12">
                                                    <div class="s-title-wrapper">
                                                        <span class="s-title">[`Base unit`] </span>
                                                        <span class="wa-tooltip text-dark-gray size-12 icon baseline" data-wa-tooltip-content="{$_tooltips['base_unit']|escape}">
                                                            <i class="fas fa-question-circle"></i>
                                                        </span>
                                                    </div>

                                                    <div class="s-default-wrapper wide">
                                                        <div class="wa-select smallest">
                                                            <select name="base_unit_id"
                                                                v-bind:class="{ 'wa-error-field' : errors['units_error'] }"
                                                                v-bind:disabled="!fractional.base_unit.status || !fractional.base_unit.enabled"
                                                                v-on:change="onChangeBaseUnit"
                                                                v-model="fractional.base_unit.value">
                                                                    <option value="">[`Not specified`]</option>
                                                                {foreach $fractional["units"] as $_unit}
                                                                    <option value="{$_unit.value|escape}" {if $_unit.value === $fractional["base_unit"]["value"]}selected{/if}>{$_unit.name|escape}</option>
                                                                {/foreach}
                                                            </select>
                                                        </div>

                                                        <div class="wa-error-text"
                                                             v-if="errors['units_error']"
                                                             v-html="errors['units_error'].text"></div>

                                                        <template v-if="fractional.base_unit.status && fractional.base_unit.enabled">
                                                            <div class="s-rights-wrapper small custom-mt-4">
                                                                <label>
                                                                    <input class="s-checkbox js-checkbox"
                                                                           type="checkbox"
                                                                           v-on:change="onChangeBaseUnitEditable"
                                                                           v-model="fractional.base_unit.editable">
                                                                    <span class="s-label"> [`Allow to change in product properties`]</span>
                                                                </label>
                                                            </div>
                                                        </template>
                                                        <template v-else>
                                                            <div class="hint">[`For all products of this type`]</div>
                                                        </template>
                                                    </div>
                                                </div>

                                                <div class="s-ratio-wrapper flexbox space-12"
                                                     v-show="fractional.base_unit.status && fractional.base_unit.enabled && fractional.base_unit.value">

                                                    <div class="s-title-wrapper">
                                                        <span class="s-title">[`Units ratio`] </span>
                                                        <span class="wa-tooltip text-dark-gray size-12 icon baseline" data-wa-tooltip-content="{$_tooltips['stock_base_ratio']|escape}">
                                                            <i class="fas fa-question-circle"></i>
                                                        </span>
                                                    </div>

                                                    {strip}
                                                    <div class="s-default-wrapper wide">
                                                        <input name="stock_base_ratio_fixed" type="hidden" v-model="stock_base_ratio_fixed">
                                                        <span>
                                                            {sprintf(_w("1 %s"), "{ { selected_stock_unit } }")}&nbsp;=&nbsp;
                                                            <input class="is-number smallest"
                                                                    type="text"
                                                                    name="stock_base_ratio"
                                                                   v-bind:class="{ 'wa-error-field' : errors['stock_base_ratio_error'] }"
                                                                   v-on:input="checkStockBaseRatio"
                                                                   v-on:change="onChangeStockBaseRatio"
                                                                   v-model="fractional.stock_base_ratio.value">&nbsp;{ { selected_base_unit } }</span>

                                                        <div class="wa-error-text"
                                                             v-if="errors['stock_base_ratio_error']"
                                                             v-html="errors['stock_base_ratio_error'].text"></div>
                                                        <div class="s-label small">[`Can be changed in product properties`]</div>
                                                    </div>
                                                    {/strip}
                                                </div>
                                            </div>
                                        </div>

                                        {* Дробность/Шаг добавления в корзину *}
                                        <div class="s-option-wrapper">
                                            <div class="s-column-switch">
                                                <component-switch
                                                    class="s-switch"
                                                    v-model="fractional.order_multiplicity_factor.enabled"
                                                    v-bind:title="!fractional.order_multiplicity_factor.status ? '{$_tooltips["order_multiplicity_factor_disabled"]|escape}' : ''"
                                                    v-bind:disabled="!fractional.order_multiplicity_factor.status"
                                                    v-on:change="onChangeCountDenominatorEnabled"></component-switch>

                                                <input name="order_multiplicity_factor_fixed" type="hidden" v-model="order_multiplicity_factor_fixed">
                                            </div>
                                            <div class="s-column-content"
                                                 v-bind:class="{ 'is-disabled': !fractional.order_multiplicity_factor.status }">

                                                <div class="flexbox space-12">
                                                    <div class="s-title-wrapper">
                                                        <span class="s-title">[`Add-to-cart step`] </span>
                                                        <span class="wa-tooltip text-dark-gray size-12 icon baseline" data-wa-tooltip-content="{$_tooltips['order_multiplicity_factor']|escape}">
                                                            <i class="fas fa-question-circle"></i>
                                                        </span>
                                                    </div>
                                                    <div class="s-default-wrapper wide">
                                                        <input class="is-number smallest"
                                                                type="text"
                                                                name="order_multiplicity_factor"
                                                               v-model="fractional.order_multiplicity_factor.value"
                                                               v-bind:class="{ 'wa-error-field' : errors['order_multiplicity_factor_error'] }"
                                                               v-bind:disabled="!fractional.order_multiplicity_factor.status || !fractional.order_multiplicity_factor.enabled"
                                                               v-on:change="onChangeCountDenominator"
                                                               v-on:input="onInputCountDenominator">&nbsp;<span class="s-stock-unit-name">{ { selected_stock_unit } }</span>

                                                        <template v-if="fractional.order_multiplicity_factor.status && fractional.order_multiplicity_factor.enabled">
                                                            <div class="wa-error-text"
                                                                 v-if="errors['order_multiplicity_factor_error']"
                                                                 v-html="errors['order_multiplicity_factor_error'].text"></div>

                                                            <div class="s-rights-wrapper small custom-mt-4">
                                                                <label>
                                                                    <input class="s-checkbox js-checkbox" type="checkbox"
                                                                           v-on:change="onChangeCountDenominatorEditable"
                                                                           v-model="fractional.order_multiplicity_factor.editable">
                                                                    <span class="s-label"> [`Allow to change in product properties`]</span>
                                                                </label>
                                                            </div>
                                                        </template>
                                                        <template v-else>
                                                            <div class="hint">[`For all products of this type`]</div>
                                                        </template>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        {* Минимальное количество заказа *}
                                        <div class="s-option-wrapper">
                                            <div class="s-column-switch">
                                                <component-switch
                                                    class="s-switch"
                                                    v-model="fractional.order_count_min.enabled"
                                                    v-bind:title="!fractional.order_count_min.status ? '{$_tooltips["order_count_min_disabled"]|escape}' : ''"
                                                    v-bind:disabled="!fractional.order_count_min.status"
                                                    v-on:change="onChangeOrderCountMinEnabled"></component-switch>

                                                <input name="order_count_min_fixed" type="hidden" v-model="order_count_min_fixed">

                                            </div>
                                            <div class="s-column-content"
                                                 v-bind:class="{ 'is-disabled': !fractional.order_count_min.status }">

                                                <div class="flexbox space-12">
                                                    <div class="s-title-wrapper">
                                                        <span class="s-title">[`Minimum orderable quantity`] </span>
                                                        <span class="wa-tooltip text-dark-gray size-12 icon baseline" data-wa-tooltip-content="{$_tooltips['order_count_min']|escape}">
                                                            <i class="fas fa-question-circle"></i>
                                                        </span>
                                                    </div>

                                                    <div class="s-default-wrapper wide">
                                                    <template v-if="is_fractional_order_multiplicity_factor">
                                                        <template v-if="fractional.order_count_min.status && fractional.order_count_min.enabled">
                                                            <input class="is-number smallest"
                                                                    type="text"
                                                                    name="order_count_min"
                                                                   v-model="fractional.order_count_min.value"
                                                                   v-bind:class="{ 'wa-error-field' : errors['order_count_min_error'] }"
                                                                   v-on:change="onChangeOrderCountMinValue"
                                                                   v-on:input="checkOrderCountMin">&nbsp;<span class="s-stock-unit-name">{ { selected_stock_unit } }</span>
                                                        </template>
                                                        <template v-else>
                                                            <input class="is-number smallest" type="text" name="order_count_min" disabled
                                                                   v-model="fractional.order_multiplicity_factor.value">&nbsp;<span class="s-stock-unit-name">{ { selected_stock_unit } }</span>
                                                        </template>
                                                    </template>
                                                    <template v-else>
                                                        <span class="wa-tooltip" data-wa-tooltip-content="{$_locales['denominator_min_required']}">
                                                            <input class="is-number smallest" type="text" :value="fractional.order_count_min.value" disabled>&nbsp;<span class="s-stock-unit-name" v-text="selected_stock_unit"></span>
                                                        </span>
                                                    </template>

                                                    <template v-if="fractional.order_count_min.status && fractional.order_count_min.enabled">
                                                        <div class="wa-error-text"
                                                             v-if="errors['order_count_min_error']"
                                                             v-html="errors['order_count_min_error'].text"></div>

                                                        <template v-if="!fractional.order_multiplicity_factor.enabled || !fractional.order_multiplicity_factor.editable">
                                                            <div class="s-rights-wrapper small custom-mt-4">
                                                                <label>
                                                                    <input class="s-checkbox js-checkbox" type="checkbox"
                                                                           v-on:change="onChangeOrderCountMinEditable"
                                                                           v-model="fractional.order_count_min.editable">
                                                                    <span class="s-label"> [`Allow to change in product properties`]</span>
                                                                </label>
                                                            </div>
                                                        </template>
                                                        <template v-else>
                                                            <div class="s-rights-wrapper small custom-mt-4">
                                                                <span class="s-label">[`Can be changed in product properties`]</span>
                                                            </div>
                                                        </template>
                                                    </template>
                                                    <template v-else>
                                                        <div class="hint">[`For all products of this type`]</div>
                                                    </template>
                                                </div>
                                                </div>
                                            </div>
                                        </div>

                                        {* Шаг добавления в корзину/Изменение количества кнопками +/- *}
                                        <div class="s-option-wrapper">
                                            <div class="s-column-switch">
                                                <component-switch
                                                    class="s-switch"
                                                    v-model="fractional.order_count_step.enabled"
                                                    v-bind:title="!fractional.order_count_step.status ? '{$_tooltips["order_count_step_disabled"]|escape}' : ''"
                                                    v-bind:disabled="!fractional.order_count_step.status"
                                                    v-on:change="onChangeOrderCountStepEnabled"></component-switch>

                                                <input name="order_count_step_fixed" type="hidden" v-model="order_count_step_fixed">

                                            </div>
                                            <div class="s-column-content"
                                                 v-bind:class="{ 'is-disabled': !fractional.order_count_step.status }">

                                                <div class="flexbox space-12">
                                                    <div class="s-title-wrapper">
                                                        <span class="s-title">[`Quantity adjustment with “+/-” buttons`] </span>
                                                        <span class="wa-tooltip text-dark-gray size-12 icon baseline" data-wa-tooltip-content="{$_tooltips['order_count_step']|escape}">
                                                            <i class="fas fa-question-circle"></i>
                                                        </span>
                                                    </div>

                                                    <div class="s-default-wrapper wide">
                                                        <template v-if="fractional.order_multiplicity_factor.value">
                                                            <template v-if="fractional.order_count_step.status && fractional.order_count_step.enabled">
                                                            <input class="is-number smallest"
                                                                    type="text"
                                                                    name="order_count_step"
                                                                   v-model="fractional.order_count_step.value"
                                                                   v-bind:class="{ 'wa-error-field' : errors['order_count_step_error'] }"
                                                                   v-on:change="onChangeOrderCountStepValue"
                                                                   v-on:input="checkOrderCountStep">&nbsp;<span class="s-stock-unit-name">{ { selected_stock_unit } }</span>
                                                            </template>
                                                            <template v-else>
                                                                <input class="is-number smallest" type="text" name="order_count_step" disabled
                                                                       v-model="fractional.order_multiplicity_factor.value">&nbsp;<span class="s-stock-unit-name">{ { selected_stock_unit } }</span>
                                                            </template>
                                                        </template>
                                                        <template v-else>
                                                            <span class="wa-tooltip" data-wa-tooltip-content="{$_locales['denominator_step_required']}">
                                                                <input class="is-number smallest" type="text" disabled :value="fractional.order_count_step.value">&nbsp;<span class="s-stock-unit-name" v-text="selected_stock_unit"></span>
                                                            </span>
                                                        </template>

                                                        <template v-if="fractional.order_count_step.status && fractional.order_count_step.enabled">
                                                            <div class="wa-error-text"
                                                                 v-if="errors['order_count_step_error']"
                                                                 v-html="errors['order_count_step_error'].text"></div>

                                                            <template v-if="!fractional.order_multiplicity_factor.enabled || !fractional.order_multiplicity_factor.editable">
                                                                <div class="s-rights-wrapper small custom-mt-4">
                                                                    <label>
                                                                        <input class="s-checkbox js-checkbox" type="checkbox"
                                                                               v-on:change="onChangeOrderCountStepEditable"
                                                                               v-model="fractional.order_count_step.editable">
                                                                        <span class="s-label"> [`Allow to change in product properties`]</span>
                                                                    </label>
                                                                </div>
                                                            </template>
                                                            <template v-else>
                                                                <div class="s-rights-wrapper small custom-mt-4">
                                                                    <span class="s-label">[`Can be changed in product properties`]</span>
                                                                </div>
                                                            </template>
                                                        </template>
                                                        <template v-else>
                                                            <div class="hint">[`For all products of this type`]</div>
                                                        </template>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                        {/if}

                        <div class="field" style="margin-top: 15px;">
                            <div class="name">[`Select storefront`]</div>
                            <div class="value">

                                {$selected_storefront = null}

                                <div class="s-field-section js-storefront-field-section">
                                    <div class="s-radio-list">
                                        <div class="s-radio-wrapper {if !$selected_storefront && !empty($all_storefronts_is_checked)}is-active{/if}">
                                            <label class="s-radio-label">
                                                <span class="wa-radio">
                                                    <input class="js-storefront-group-field" type="radio" name="type[all_storefronts_is_checked]" value="all" {if !$selected_storefront && !empty($all_storefronts_is_checked)}checked{/if}>
                                                    <span></span>
                                                </span>
                                            <span class="s-text{if !$selected_storefront} bold{/if}">[`Use for all storefronts`]</span>
                                            </label>
                                        </div>
                                        <div class="s-radio-wrapper {if !$selected_storefront && empty($all_storefronts_is_checked)}is-active{/if}">
                                            <label class="s-radio-label">
                                                <span class="wa-radio">
                                                    <input class="js-storefront-group-field" type="radio" name="type[all_storefronts_is_checked]" value="0" {if !$selected_storefront && empty($all_storefronts_is_checked)}checked{/if}>
                                                    <span></span>
                                                </span>
                                                <span class="s-text">[`Use only for selected storefronts`]</span>
                                            </label>

                                            {strip}
                                                <div class="s-checkbox-list">
                                                    {$_all_is_checked = true}
                                                    {foreach $storefronts as $_storefront}
                                                        {if empty($_storefront.is_checked)}
                                                            {$_all_is_checked = false}
                                                            {break}
                                                        {/if}
                                                    {/foreach}

                                                    <label class="s-checkbox-wrapper s-all-checkbox-wrapper">
                                                        <span class="wa-checkbox">
                                                            <input class="js-all-storefronts-field" type="checkbox" {if !empty($_all_is_checked)}checked{/if}>
                                                            <span>
                                                                <span class="icon">
                                                                    <i class="fas fa-check"></i>
                                                                </span>
                                                            </span>
                                                        </span>
                                                        <span class="s-text">[`Select all`]</span>
                                                    </label>
                                                    {foreach $storefronts as $_storefront}
                                                        <label class="s-checkbox-wrapper">
                                                            <span class="wa-checkbox">
                                                                <input class="js-storefront-field" type="checkbox" name="storefronts[{$_storefront.domain|escape}][{$_storefront.url|escape}]" value="{$_storefront.url|escape}" {if !empty($_storefront.is_checked)}checked{/if}>
                                                                <span>
                                                                    <span class="icon">
                                                                        <i class="fas fa-check"></i>
                                                                    </span>
                                                                </span>
                                                            </span>
                                                            <span class="s-text">{$_storefront.domain|escape}/{$_storefront.url|escape}</span>
                                                        </label>
                                                    {/foreach}
                                                </div>
                                            {/strip}
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>

                    {if !empty($type_templates)}
                        <div class="field-group" data-content-id="template" style="display: none;">
                            <div class="field">
                                <div class="name">[`Product type template`]</div>
                                <div class="value">
                                    <ul class="s-templates-list chips">
                                        {foreach $type_templates as $template_id => $info}
                                            <li class="s-template-wrapper">
                                                <label class="chip">
                                                    <span class="wa-radio">
                                                        <input class="s-field" type="radio" name="template" value="{$template_id|escape}">
                                                        <span></span>
                                                    </span>
                                                    <span class="icon gray"><i class="{$wa->shop->convertIcon($info.icon)}"></i></span>
                                                    <span class="s-name">{$info.name|escape}</span>
                                                    {if !empty($info.description)}
                                                    <span class="s-description hint">{$info.description}</span>
                                                    {/if}
                                                </label>
                                            </li>
                                        {/foreach}
                                    </ul>
                                </div>
                            </div>
                        </div>
                    {/if}
                </div>

                <div class="s-errors-place js-errors-place"></div>
            </div>

            {* FOOTER *}
            <footer class="dialog-footer">
                <button class="s-button button green js-submit-button" type="submit">[`Save`]</button>
                <a href="javascript:void(0);" class="js-close-dialog button light-gray">[`Cancel`]</a>
            </footer>

            <input type="hidden" name="id" value="{$type.id|default:""|escape}">
            {$wa->csrf()}
        </form>
    </div>

    <script>
        ( function($) {
            var $wrapper = $("#js-settings-type-add-dialog").removeAttr("id"),
                dialog = $wrapper.data("dialog");

            {if ($type.count <= 0)}
            setTimeout(function () {
               $wrapper.find('input[name="name"]').focus();
            }, 150);
            {/if}

            dialog.options.initDialog({
                $wrapper: $wrapper,
                dialog: dialog,

                locales: {$_locales|json_encode},
                templates: {$_templates|json_encode},
                fractional: {$fractional|json_encode},
                is_premium: {if !empty($is_premium)}true{else}false{/if},
                type: {
                    count: {if ($type.count > 0)}{$type.count}{else}0{/if}
                },

                onSuccess: function(new_type_id) {
                    // console.log( new_type_id );
                }
            });

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