{* PAGE *}
<div class="s-discounts-page content flexbox" id="js-discounts-page">

    {* SIDEBAR *}
    <div class="sidebar width-23rem blank">
        {$discounts_sidebar}
    </div>

    {* CONTENT *}
    <div class="s-page-content content">

        <div class="article">
        <div class="article-body">

        {* HEADER *}
        <header class="s-page-header">
            <h1 class="s-title">[`By customer category`]</h1>
        </header>

        <div class="s-discounts-category-section">
            <form action="" id="s-discounts-category-form">
                <div class="fields">
                    <div class="fields-group">
                        <div class="field">
                            <div class="name for-switch">[`Status`]</div>
                            <div class="value">
                                <div class="switch-with-text">
                                    <span class="switch js-switch-discount-type-status smaller">
                                        <input type="checkbox" id="s-discount-type-status" name="enabled" value="1"{if $enabled} checked{/if}>
                                    </span>
                                    <label for="s-discount-type-status" data-active-text="[`Enabled`]" data-inactive-text="[`Disabled`]">{if $enabled}[`Enabled`]{else}[`Disabled`]{/if}</label>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="fields-group{if !$enabled} hidden{/if}">
                        <div class="field">
                            <div class="name">[`Discounts`]</div>
                            <div class="value">
                                {if count($categories)}
                                    {$_pattern = '^\d*\.?\d*$'}

                                    <table class="zebra full-width small">
                                        {foreach $categories as $c}
                                            <tr class="rate-row">
                                                <td class="min-width"><span class="icon text-gray">{$wa->shop->getIcon($c.icon)}</span></td>
                                                <td>{$c.name|escape}</td>
                                                <td style="width: 60%;">
                                                    <input type="text" class="numerical shortest" name="categories[{$c.id}]" value="{$c.value}" pattern="{$_pattern}" required>%
                                                </td>
                                            </tr>
                                        {/foreach}
                                    </table>
                                {else}
                                    <p>{sprintf('[`No customer categories are defined in your store. Define one using the main <a href="%s">Customers</a> screen.`]',"`$wa_app_url`?action=customers")}</p>
                                {/if}
                            </div>
                        </div>
                    </div>

                    <div class="custom-mx-16 custom-my-20{if !$enabled} hidden{/if}">
                        <input class="button green js-submit-button" type="submit" value="[`Save`]">
                    </div>

                </div>
                <input type="hidden" name="dummy" value="1">
            </form>
        </div>

        </div>
        </div>

    </div>

    <script>
        ( function($) { "use strict";
            $.shop.marketing.setTitle({_w("By customer category")|json_encode});

            const sources = [{
                id: "wa-shop-marketing-discounts-js",
                type: "js",
                uri: "{$wa_app_static_url}js/backend/marketing/discounts.js?v={$wa->version()}"
            }];

            $.shop.marketing.load(sources).then( function() {
                const page = $.shop.marketing.init.discountsPage({
                    $wrapper: $("#js-discounts-page"),
                    urls: {
                        "discounts_enable": "{$wa_app_url}marketing/?module=marketingDiscountsEnable",
                        "save": "{$wa_app_url}marketing/?module=marketing&action=discountsCategorySave"
                    },
                    locales: {
                        "incorrect_1": {_w("Must be a value from 0 to 100")|json_encode},
                        "incorrect_2": {_w("Must be a positive value or zero")|json_encode}
                    }
                });

                page.initCategories();
            });

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