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

    <div class="sidebar width-adaptive-wider blank">

        <div class="box custom-mt-8">
            <a href="{$marketing_url}coupons/create/" class="button light-gray full-width"><i class="fas fa-tag text-green"></i> <span>[`New coupon`]</span></a>
        </div>

        {if $pages_count > 1 || strlen($coupon_name)}
            <form class="s-coupon-search state-with-inner-icon left width-100">
                <input class="s-coupon-field small full-width custom-mr-0" id="coupon-name" type="search" name="coupon_name" value="{$coupon_name}" placeholder="[`Coupons search`]" autocomplete="off">
                <button class="icon js-coupon-name-submit" type="submit"><i class="fas fa-search"></i></button>
            </form>
        {/if}


        <ul class="menu large">
            {foreach $coupons as $_coupon}
                {$_is_active = false}
                {if !empty($coupon) && $coupon.id === $_coupon.id}
                    {$_is_active = true}
                {/if}

                {$_classes = []}
                {if !$_coupon.enabled}
                    {$_classes[] = "opacity-50"}
                {/if}
                {if !empty($_is_active)}
                    {$_classes[] = "accented"}
                {/if}

                <li class="{$_classes|join:" "}">
                    {$params = []}
                    {if $page_number > 1}
                        {$params['page'] = $page_number}
                    {/if}
                    {if strlen($coupon_name)}
                        {$params['coupon_name'] = $coupon_name}
                    {/if}
                    {$page_params = ''}
                    {if $params}
                        {$page_params = "?{http_build_query($params)}"}
                    {/if}
                    <a href="{$marketing_url}coupons/{$_coupon.id}/{$page_params}" class="gray" data-coupon-id="{$_coupon.id}">
                        <span class="count">{$_coupon.hint}</span>
                        <i class="fas fa-tag"></i> <span>{$_coupon.code}</span>
                    </a>
                </li>
            {/foreach}
        </ul>

        {if $pages_count > 1}
            <div class="box pagination s-coupon-list-pagination">
                {wa_pagination page=$page_number coupon_name=$coupon_name total=$pages_count attrs=['class' => "paging"] url="`$wa_app_url`marketing/coupons/" nb=3}
            </div>
        {/if}

    </div>

    <div class="content">

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

                {include file="./MarketingCouponsEditor.html" inline}

            </div>
        </div>

    </div>

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

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

            $.shop.marketing.load(sources).then( function() {
                $.shop.marketing.init.couponsPage({
                    $wrapper: $("#js-coupons-page"),
                    coupon_id: {if !empty($coupon.id)}{$coupon.id|json_encode}{else}null{/if},
                    urls: {
                        "delete": "{$marketing_url}?module=marketingCouponDelete",
                        "coupons": "{$marketing_url}coupons/?page=%page_number%&coupon_name=%coupon_name%",
                        "coupon": "{$marketing_url}coupons/%id%/?page=%page_number%&coupon_name=%coupon_name%",
                        "first_page": "{$marketing_url}coupons/"
                    },
                    locales: {
                        "url_no_valid": {_w("Invalid URL")|json_encode},
                        "url_max_len": {_w("Maximum URL length is 2048 characters")|json_encode},
                        "incorrect_1": {_w("Must be a value from 0 to 100")|json_encode},
                        "delete": {_w("This will permanently delete discount coupon %s. Are you sure?")|json_encode},
                        "required": {_w("This field is required.")|json_encode}
                    }
                });
            });

            $(".wa-tooltip").waTooltip();
        })(jQuery);
    </script>
</div>