{strip}

{$_title = _w("New product quantity unit")}
{$_button_text = _w("Create")}
{if !empty($unit.id)}
    {$_title = sprintf(_w("Product quantity unit “%s”"), $unit.name|default:"")}
    {$_button_text = _w("Save")}
{/if}

{/strip}

<div class="dialog s-settings-unit-dialog s-settings-unit-edit-dialog" id="js-settings-unit-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="{$unit.id|default:""|escape}">

                <div class="s-fields-wrapper">
                    <div class="wa-table-box fixed space-10">
                        <div class="s-column">
                            <div class="s-field-section">
                                <div class="s-label-wrapper">
                                    <label class="s-label">[`Unit name`]</label>
                                </div>
                                <input class="s-field js-autofocus" type="text" name="unit[name]" value="{$unit.name|default:""|escape}" required>
                            </div>

                            <div class="s-field-section">
                                <div class="s-label-wrapper">
                                    <label class="s-label" data-tooltip-id="unit_dialog_code">
                                        <span>[`Code`]</span>
                                        <span class="s-icon"><i class="icon10 info"></i></span>
                                    </label>
                                </div>
                                <input class="s-field" type="text" name="unit[okei_code]" value="{$unit.okei_code|default:""|escape}" required>
                            </div>

                            <div class="s-field-section">
                                <div class="s-label-wrapper">
                                    <label class="s-label" data-tooltip-id="unit_dialog_short_name">
                                        <span>[`Symbol`]</span>
                                        <span class="s-icon"><i class="icon10 info"></i></span>
                                    </label>
                                </div>
                                <input class="s-field js-field-short-name" type="text" name="unit[short_name]" value="{$unit.short_name|default:""|escape}" required>
                            </div>

                            <div class="s-field-section">
                                <div class="s-label-wrapper">
                                    <label class="s-label" data-tooltip-id="unit_dialog_storefront_name">
                                        <span>[`Name for storefront`]</span>
                                        <span class="s-icon"><i class="icon10 info"></i></span>
                                    </label>
                                </div>
                                <input class="s-field js-field-storefront-name" type="text" name="unit[storefront_name]"
                                       value="{$unit.storefront_name|default:""|escape}"
                                       placeholder="{$unit.short_name|default:""|escape}">
                            </div>

                            <div class="s-message-wrapper alert">
                                <div class="flexbox space-8">
                                    <span class="icon"><i class="fas fa-info-circle"></i></span>
                                    <div class="wide">
                                        <div class="small">
                                            <p>{sprintf(_w("In the “%s” field value, you may need to use various special characters. Frequently used characters are provided in the table below—just copy a desired character and paste into the settings field. A more detailed list of special characters is available in the <a href=\"%s\">help article</a>."), _w('Name for storefront'), "https://support.webasyst.ru/40538/special-characters/")}</p>
                                            <p>[`Characters:`]</p>
                                        </div>
                                        <ul class="chips custom-mt-8">
                                            <li><span class="chip">¹</span></li>
                                            <li><span class="chip">²</span></li>
                                            <li><span class="chip">³</span></li>
                                            <li><span class="chip">¼</span></li>
                                            <li><span class="chip">½</span></li>
                                            <li><span class="chip">¾</span></li>
                                            <li><span class="chip">‘</span></li>
                                            <li><span class="chip">’</span></li>
                                            <li><span class="chip">´</span></li>
                                            <li><span class="chip">«</span></li>
                                            <li><span class="chip">»</span></li>
                                            <li><span class="chip">˜</span></li>
                                        </ul>
                                    </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="button green js-submit-button" type="submit">{$_button_text|escape}</button>
                        <button class="button js-close-dialog light-gray">[`Cancel`]</button>
                    </div>
                </div>
            </footer>
            {$wa->csrf()}
        </form>
    </div>

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

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