{strip}

{$_title = _w("New product code")}
{$_button_text = _w("Save")}
{if !empty($code.id)}
    {$_title = sprintf("[`Product code “%s”`]", $code.name|default:"")}
{/if}
{if !empty($_is_divider)}
    {$_title = "[`Feature group heading`]"}
{/if}

{/strip}

<div class="dialog s-settings-code-edit-dialog" id="js-settings-code-edit-dialog">
    <div class="dialog-background"></div>
    <div class="wa-dialog-body dialog-body">

        <form action="" method="post">
            {* HEADER *}
            <header class="dialog-header">
                <h1 class="s-title">{$_title|escape}</h1>
            </header>

            {* CONTENT *}
            <div class="dialog-content">
                <input type="hidden" name="id" value="{$code.id|default:""|escape}">

                <div class="s-fields-wrapper">
                    <div class="wa-table-box fixed space-10">
                        <div class="s-column">
                            {if !empty($code.logo) && $code_plugin_enabled}
                                <div class="s-field-section-logo">
                                    <img src="/{$code.logo}" data-debug-url="{$wa_url}">
                                </div>
                            {/if}

                            <div class="s-field-section">
                                <label class="s-label">[`Name`]</label>
                                <input class="s-field js-name-field" type="text" name="code[name]" value="{$code.name|default:""|escape}" {if $protected_code}readonly{else}required{/if}>
                            </div>

                            <div class="s-field-section">
                                <label class="s-label">[`Identifier`]</label>
                                <input class="s-field js-code-field" type="text" name="code[code]" value="{$code.code|default:""|escape}" {if $protected_code}readonly{else}required{/if}>
                            </div>

                            <div class="s-field-section js-type-field-section">
                                <label class="s-label">[`Product types`]</label>

                                <div class="s-radio-list">
                                    {if $selected_type}
                                        <div class="s-radio-wrapper is-active">
                                            <label class="s-radio-label">
                                                <span class="wa-radio">
                                                    <input class="js-type-group-field" type="radio" name="code[all_types_is_checked]" value="{$selected_type.id}" checked>
                                                    <span></span>
                                                </span>
                                                <span class="s-text">{sprintf_wp('Use for product type “<strong>%s</strong>”', $selected_type.name|escape)}</span>
                                            </label>
                                        </div>
                                    {/if}
                                    <div class="s-radio-wrapper {if !$selected_type && !empty($all_types_is_checked)}is-active{/if}">
                                        <label class="s-radio-label">
                                            <span class="wa-radio">
                                                <input class="js-type-group-field" type="radio" name="code[all_types_is_checked]" value="all" {if !$selected_type && !empty($all_types_is_checked)}checked{/if}>
                                                <span></span>
                                            </span>
                                            <span class="s-text{if !$selected_type} bold{/if}">[`Use for all product types`]</span>
                                        </label>
                                    </div>
                                    <div class="s-radio-wrapper {if !$selected_type && empty($all_types_is_checked)}is-active{/if}">
                                        <label class="s-radio-label">
                                            <span class="wa-radio">
                                                <input class="js-type-group-field" type="radio" name="code[all_types_is_checked]" value="0" {if !$selected_type && empty($all_types_is_checked)}checked{/if}>
                                                <span></span>
                                            </span>
                                            <span class="s-text">[`Use only for selected types`]</span>
                                        </label>
                                        {strip}
                                        <ul class="chips s-checkbox-list custom-ml-8">
                                            {$_all_is_checked = true}
                                            {foreach $types as $_type}
                                                {if empty($_type.is_checked)}
                                                    {$_all_is_checked = false}
                                                    {break}
                                                {/if}
                                            {/foreach}
                                            <li>
                                                <label class="chip s-checkbox-wrapper s-all-checkbox-wrapper">
                                                    <span class="wa-checkbox">
                                                        <input class="js-all-types-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 bold">[`Select all`]</span>
                                                </label>
                                                </li>
                                            {foreach $types as $_type}
                                                <li>
                                                    <label class="chip s-checkbox-wrapper">
                                                        <span class="wa-checkbox">
                                                            <input class="js-type-field" type="checkbox" name="types[{$_type.id}]" value="{$_type.id}" {if !empty($_type.is_checked)}checked{/if}>
                                                            <span>
                                                                <span class="icon">
                                                                    <i class="fas fa-check"></i>
                                                                </span>
                                                            </span>
                                                        </span>
                                                        <span class="s-icon-text icon text-light-gray">{$wa->shop->getIcon($_type.icon)}</span>
                                                        <span class="s-text">{$_type.name|escape}</span>
                                                    </label>
                                                </li>
                                            {/foreach}
                                        </ul>
                                        {/strip}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {* FOOTER *}
            <footer class="dialog-footer">
                <div class="s-errors-place js-errors-place"></div>

                <div class="wa-table-box middle">
                    <div class="s-column">
                        <button class="s-button button green js-submit-button" type="submit">{$_button_text|escape}</button>
                        <a href="javascript:void(0);" class="js-close-dialog button light-gray">[`Cancel`]</a>
                    </div>
                    <div class="s-column align-right">
                        {*if !empty($code.id)}
                            <a href="javascript:void(0);" class="s-delete-link js-code-delete"><i class="icon16 delete"></i> [`Delete`]</a>
                        {/if*}
                    </div>
                </div>
            </footer>
            {$wa->csrf()}
        </form>
    </div>

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

            dialog.options.scope.initCodeEditDialog({
                $wrapper: $wrapper,
                dialog: dialog,
                code_id: {if !empty($code.id)}{$code.id|json_encode}{else}null{/if}
            });
        })(jQuery);
    </script>
</div>