{capture assign="title_text"}
    {$settings.name|escape}
    <i class="icon16 {if $settings.type == shopCategoryModel::TYPE_STATIC}folder{else}folder-dynamic{/if}"></i>
    <span class="hint float-right">id: {$settings.id}</span>
{/capture}
{$name_text =  "[`Name`]"}

{capture frontend_url}
<div class="field-group">
    <div class="field">
        <div class="name">
            [`Storefront link`]
        </div>
        <div class="value no-shift">
            {foreach $settings.frontend_urls as $frontend_url}
                {if $frontend_url@first}
                    {strip}
                        <span class="s-frontend-base-url" style="display:none;">
                            {$frontend_url.base}
                        </span>
                        <a href="{$frontend_url.url}" class="s-frontend-base-url" target="_blank">
                            {$frontend_url.base}
                            <span id="s-settings-frontend-url">{$settings.url}</span>
                            <span class="slash"></span>
                        </a>
                    {/strip}
                    <i class="icon10 new-window"></i>
                    <input type="text" id="s-settings-frontend-url-input" value="{$settings.url}" name="url" style="display:none;">
                    <a href="javascript:void(0);" class="small inline-link" id="s-settings-frontend-url-edit-link"><i class="icon10 edit"></i><b><i>edit</i></b></a>
                    <em class="errormsg"></em>
                {else}
                    <a href="{$frontend_url.url}" target="_blank">{$frontend_url.url}</a>
                    <i class="icon10 new-window"></i>
                {/if}
            {/foreach}
        </div>
        <div class="value no-shift">
            <label>
                <input value="1" name="hidden" {if !$settings.status}checked{/if} type="checkbox" name="hidden">
                [`Hidden category`] <span class="hint">[`When enabled, this category will be temporarily hidden from the storefront`]</span>
            </label>
        </div>
    </div>
</div>
{/capture}

{capture frontend_display}
<div class="field">
    <div class="name">
        <label for="custom-settings">
        [`Frontend display`]
        </label>
    </div>
    <div class="value no-shift">
        [`Default product sort order`]:
        <select name="sort_products">
            {if $settings.type == shopCategoryModel::TYPE_STATIC}
                <option value="" {if empty($settings.sort_products)}selected="selected"{/if}>[`Manual (as defined in the backend)`]</option>
            {/if}
            <option value="name ASC" {if $settings.sort_products == 'name ASC'}selected="selected"{/if}>[`By name`]</option>
            <option value="price DESC"  {if $settings.sort_products == 'price DESC'}selected="selected"{/if}>[`Most expensive`]</option>
            <option value="price ASC"   {if $settings.sort_products == 'price ASC'}selected="selected"{/if}>[`Least expensive`]</option>
            <option value="rating DESC" {if $settings.sort_products == 'rating DESC'}selected="selected"{/if}>[`Highest rated`]</option>
            <option value="rating ASC"  {if $settings.sort_products == 'rating ASC'}selected="selected"{/if}>[`Lowest rated`]</option>
            <option value="total_sales DESC" {if $settings.sort_products == 'total_sales DESC'}selected="selected"{/if}>[`Best sellers`]</option>
            <option value="total_sales ASC" {if $settings.sort_products == 'total_sales ASC'}selected="selected"{/if}>[`Worst sellers`]</option>
            <option value="count DESC" {if $settings.sort_products == 'count DESC'}selected="selected"{/if}>[`In stock`]</option>
            {if $settings.type == shopCategoryModel::TYPE_DYNAMIC}
                <option value="" {if empty($settings.sort_products)}selected="selected"{/if}>[`Date added`]</option>
            {else}
                <option value="create_datetime DESC" {if $settings.sort_products == 'create_datetime DESC'}selected="selected"{/if}>[`Date added`]</option>
            {/if}
        </select>
        <label class="small">
            <input type="checkbox" name="enable_sorting" {if $settings.enable_sorting}checked="checked"{/if} value="1"> [`Customers can select preferable product sort order`]
        </label>
    </div>
    <div class="value no-shift"{if $settings.type == shopCategoryModel::TYPE_DYNAMIC} style="display: none;"{/if}>
        <label>
            <input type="checkbox" name="include_sub_categories" {if $settings.include_sub_categories}checked="checked"{/if} value="1"> [`Include products from sub-categories`]
            <span class="hint">[`When enabled, products will be fetched from both the current category and all its sub-categories — and shown in one list`]</span>
        </label>
    </div>
    <div class="value no-shift">
        <label>
            <input type="checkbox" name="allow_filter" value="1" id="s-category-allow-filter" {if $settings.allow_filter}checked{/if}> [`Allow product filtering`]
            <span class="hint">[`Product filtering allows your customers to filter (search) products within this category by feature values, e.g. by color, manufacturer, price`]</span>
        </label>
        <div class="block" id="s-category-filter" {if !$settings.allow_filter}style="display:none;"{/if}>
            <ul class="menu-v compact small">
                {foreach $settings.filter as $feature}
                    <li>
                        <i class="icon16 sort"></i> 
                        <label><input type="checkbox" name="filter[]" value="{$feature.id}"
                                            {if !empty($feature.checked) || ($feature.id == 'price' && !$settings.allow_filter)}checked="checked"{/if}>
                                {$feature.name|escape}
                        </label>
                    </li>
                {/foreach}
            </ul>
        </div>
    </div>
</div>
{/capture}

{capture description}
<div class="field-group">
    <div class="field">

    </div>
</div>

<div class="field-group">
    <div class="field">
        <div class="name">[`Title`]</div>
        <div class="value">
            <input value="{$settings.meta_title|escape}" 
                        id="s-meta-title"
                        name="meta_title" 
                        placeholder="{$settings.name|escape}" class="long bold">
        </div>
    </div>
    <div class="field">
        <div class="name">[`META Keywords`]</div>
        <div class="value">
            <textarea name="meta_keywords">{$settings.meta_keywords|escape}</textarea>
        </div>
    </div>
    <div class="field">
        <div class="name">[`META Description`]</div>
        <div class="value">
            <textarea name="meta_description">{$settings.meta_description|escape}</textarea>
        </div>
    </div>
</div>

<div class="field-group">
    <div class="field description">
        <div class="name">
            <label for="description">
                [`Description`]
            </label>
        </div>
        <div class="value">
            <div class="wa-editor-core-wrapper s-editor-core-wrapper" style="display: none">
                <ul class="wa-editor-wysiwyg-html-toggle s-wysiwyg-html-toggle">
                    <li class="selected"><a class="wysiwyg" href="#">[s`WYSIWYG`]</a></li>
                    <li><a class="html" href="#">HTML</a></li>
                </ul>
                <div>
                    <textarea style="display:none" id="s-category-description-content" name="description">{if $settings.description}{$settings.description}{/if}</textarea>
                </div>
            </div>
        </div>
    </div>
</div>

{/capture}

{capture ext_fields}
    <div class="field">
        <div class="name">
            [`Category visibility`]
        </div>
        <div class="value no-shift">
            <label><input type="radio" name="storefront" value="" {if !$settings.routes}checked="checked"{/if}>
                [`All storefronts`]
            </label>
        </div>
        <div class="value no-shift">
            <label><input type="radio" name="storefront" value="route" {if $settings.routes}checked="checked"{/if}>
                [`Selected storefronts only`]
            </label>
            {if !empty($routes)}
            </div>
            <div class="value">
                {foreach $routes as $domain => $domain_routes}
                    {foreach $domain_routes as $route}
                        {$url = $domain|cat:"/":$route.url}
                        <label>
                            <input {if in_array($url, $settings.routes)}checked{/if} {if !$settings.routes}disabled{/if} type="checkbox" name="routes[]" value="{$url}"> {$url}
                        </label><br>
                    {/foreach}
                {/foreach}
            {/if}
        </div>
    </div>
{/capture}

{capture custom_params}
<div class="field-group">
    <div class="field">
        <div class="name">
            <label for="custom-settings">
            [`Custom parameters`]
            </label>
        </div>
        <div class="value">
            <textarea name="params" rows="10" cols="5">{if $settings.params}{foreach $settings.params as $k=>$v}{if $k!='order'}{$k}={$v|escape|cat:"\n"}{/if}{/foreach}{/if}</textarea><br>
            <span class="hint">[`Optional set of custom <em>key=value</em> parameters which can be used within a frontend's theme template as <em>&#123;$category.params.key&#125;</em>. Each key=value pair should be on a separate line.`]</span>
        </div>
    </div>
</div>
{/capture}

{capture dynamic_settings}
{if $settings.type == shopCategoryModel::TYPE_DYNAMIC}
<div class="field-group" id="s-category-dynamic-settings">
    <script type="text/javascript" src="{$wa_app_static_url}js/rate.widget.js?v={$wa->version()}"></script>
    <div class="field">
        <div class="name">
            [`Product filtering options`]
        </div>
        <div class="value">
            <table class="zebra">
                <tbody>
                    <tr>
                        <td class="min-width">
                            <input id="s-condition-price-interval" type="checkbox" name="condition[price]" value="price" {if isset($settings.conditions.price)}checked{/if}>
                        </td>
                        <td>
                            <label for="s-condition-price-interval">[`Price`]</label>
                        </td>
                        <td colspan="2">
                            <label>
                                [`from`]
                                <input type="text" name="price[0]" class="short" placeholder="0" value="{if isset($settings.conditions.price[0][1])}{$settings.conditions.price[0][1]}{/if}">
                            </label>
                            <label>
                                [`to`]
                                <input type="text" name="price[1]" class="short" placeholder="&infin;" value="{if isset($settings.conditions.price[1][1])}{$settings.conditions.price[1][1]}{/if}">
                            </label>
                            {$currency}
                        </td>
                    </tr>
                    <tr>
                        <td class="min-width">
                            <input id="s-condition-rate" type="checkbox" name="condition[rating]" value="rating" {if isset($settings.conditions.rating)}checked{/if}>
                        </td>
                        <td>
                            <label for="s-condition-rate">[`Rating`]</label>
                        </td>
                        <td>
                            <select name="rating[]">
                                <option value=">=" {if isset($settings.conditions.rating[0]) && $settings.conditions.rating[0] == '>='}selected{/if}>[`is greater or equal`]</option>
                                <option value="<=" {if isset($settings.conditions.rating[0]) && $settings.conditions.rating[0] == '<='}selected{/if}>[`is lesser or equal`]</option>
                            </select>
                        </td>
                        <td>
                            <input type="hidden" name="rating[]" id="s-c-category-rate-value" value="{if isset($settings.conditions.rating[1])}{$settings.conditions.rating[1]}{else}0{/if}">
                            <a href="javascript:void(0);" class="s-rate-photo" title="Rate photo" id="s-category-rate" class="s-rate-photo" data-rate="{if isset($settings.conditions.rating[1])}{$settings.conditions.rating[1]}{else}0{/if}">
                                {$wa->shop->ratingHtml(0, 16, true)}
                            </a>
                        </td>
                    </tr>
                    {if !empty($settings.cloud)}
                    <tr>
                        <td class="min-width">
                            <input id="s-condition-tag" type="checkbox" name="condition[tag]" value="tag" {if isset($settings.conditions.tag)}checked{/if}>
                        </td>
                        <td>
                            <label for="s-condition-tag">[`Tags`]</label>
                        </td>
                        <td colspan="2">
                            <div class="block double-padded align-center">
                            {foreach $settings.cloud as $tag}
                                <label><span class="s-tag nowrap" style="font-size: {$tag.size}%;" data-id="{$tag.id}"><input type="checkbox" name="tag[]" value="{$tag.name|escape}" {if isset($tag.checked)}checked{/if}> {$tag.name|escape}</span></label>
                            {/foreach}
                            </div>
                        </td>
                    </tr>
                    {/if}
                    <tr>
                        <td class="min-width">
                            <input id="s-condition-count" type="checkbox" name="condition[count]" value="count" {if isset($settings.conditions.count)}checked{/if}>
                        </td>
                        <td>
                            <label for="s-condition-count">[`In stock`]</label>
                        </td>
                        <td>
                            <select name="count[]">
                                <option value=">=" {if isset($settings.conditions.count[0]) && $settings.conditions.count[0] == '>='}selected{/if}>[`is greater or equal`]</option>
                                <option value="<=" {if isset($settings.conditions.count[0]) && $settings.conditions.count[0] == '<='}selected{/if}>[`is lesser or equal`]</option>
                            </select>
                        </td>
                        <td>
                            <input type="text" name="count[]" id="s-c-category-count-value" value="{if isset($settings.conditions.count[1])}{$settings.conditions.count[1]}{else}0{/if}">
                        </td>
                    </tr>
                    <tr>
                        <td class="min-width">
                            <input id="s-condition-compare_price" type="checkbox" name="condition[compare_price]" value="compare_price" {if isset($settings.conditions.compare_price)}checked{/if}>
                        </td>
                        <td colspan="3">
                            <label for="s-condition-compare_price">[`Compare at price`]</label>
                        </td>
                    </tr>
                    {foreach $settings.features as $f}
                        <tr>
                            <td class="min-width">
                                <input id="s-condition-feature-{$f.code}" type="checkbox" name="condition[feature][]" value="{$f.code}" {if isset($settings.conditions.feature[$f.code])}checked{/if}>
                            </td>
                            <td>
                                <label for="s-condition-feature-{$f.code}">{$f.name|escape}</label>
                            </td>
                            <td colspan="2">
                                <div style="max-width: 600px; overflow: hidden;">
                                <select name="feature_values[{$f.code}]" class="s-feature_value" data-feature-id="{$f.code}">
                                    {foreach $f.values as $v_id => $value}
                                        <option value="{$v_id}"{if is_object($value)} style="{$value.style|default:''}"{/if} {if isset($settings.conditions.feature[$f.code][1]) && $settings.conditions.feature[$f.code][1] == $v_id}selected{/if}>
                                            {$value|escape}
                                        </option>
                                    {/foreach}
                                </select>
                                </div>
                            </td>
                        </tr>
                    {/foreach}
                </tbody>
            </table>
            <!-- extra custom condition items -->
            <input type="hidden" name="custom_conditions" value="{$settings['custom_conditions']}">
        </div>
    </div>
</div>
{/if}
{/capture}

{capture js}

<script type="text/javascript">

    var d = $('#s-product-list-settings-dialog');
    var wa_url  = '{$wa_url}';
    var wa_app  = 'shop';
    var wa_lang = '{$lang}';

    if ($('#s-category-dynamic-settings', d).length) {
        $('#s-category-rate', d).rateWidget({
            withClearAction: false,
            onUpdate: function(rate) {
                $('#s-c-category-rate-value').val(rate);
            }
        });
        // check corresponding checkbox when change control
        $('select[name^=rating]', d).change(function() {
            $('#s-condition-rate').attr('checked', true);
        });
        $('#s-category-rate', d).click(function() {
            $('#s-condition-rate').attr('checked', true);
        });
        $('select[name^=count]', d).change(function() {
            $('#s-c-condition-count').attr('checked', true);
        });
        $('#s-category-count-value', d).click(function() {
            $('#s-condition-count').attr('checked', true);
        });
        d.on('change', 'input[name^=tag]', function() {
            $('#s-condition-tag').attr('checked', true);
        });
        d.on('keyup', 'input[name^=price]', function() {
            $('#s-condition-price-interval').attr('checked', true);
        });
        d.on('change', 'select.s-feature_value', function() {
            $('#s-c-condition-feature-' + $(this).data('featureCode')).attr('checked', true);
        });
    }
    $('#s-category-allow-filter', d).click(function() {
        if (this.checked) {
            $('#s-category-filter').show();
        } else {
            $('#s-category-filter').hide();
        }
    });

    $('input[name=storefront]', d).change(function() {
        if (this.value == 'route') {
            $('input[name="routes[]"]', d).attr('disabled', false);
        } else {
            $('input[name="routes[]"]', d).attr('disabled', true);
        }
    });

    var frontend_url = $('#s-settings-frontend-url');
    frontend_url.inlineEditable({
        editLink : '#s-settings-frontend-url-edit-link',
        editOnItself : false,
        minSize : {
            width : 100
        },
        makeReadableBy : [],
        beforeMakeEditable : function(input) {
            var self = $(this);
            var parent_div = self.parents('div:first');
            var slash = parent_div.find('span.slash');
            var new_window = parent_div.find('i.new-window');
            $(input).after(slash);
            new_window.hide();

            parent_div.find('span.s-frontend-base-url').html(parent_div.find('a.s-frontend-base-url').hide().contents()).show();
        },
        beforeBackReadable : function(input, data) {
            var self = $(this);
            var parent_div = self.parents('div:first');
            var slash = parent_div.find('span.slash');
            var new_window = parent_div.find('i.new-window');
            self.after(slash);
            new_window.show();

            parent_div.find('a.s-frontend-base-url').html(parent_div.find('span.s-frontend-base-url').hide().contents()).show();
        }
    });

    // change meta title input placeholder automaticly on changing name of category
    (function() {
        var timeout = 450;
        var timer_id = null;
        var title_input = $('input[name=meta_title]', d);
        var name_input  = $('input[name=name]', d);
        name_input.bind('keydown', function() {
            if (timer_id) {
                clearTimeout(timer_id);
                timer_id = null;
            }
            timer_id = setTimeout(function() {
                title_input.attr('placeholder', name_input.val());
            }, timeout);
        });
    })();

    $.shop.makeFlexibleInput('s-meta-title');
    
    $('#s-category-filter').sortable({
        distance: 5,
        opacity: 0.75,
        items: 'li',
        handle: '.sort',
        cursor: 'move',
        tolerance: 'pointer'
    });
    
    d.data('uploadFields', {
        '_csrf': "{waRequest::cookie('_csrf', '')}"
    });

</script>
{/capture}

{* extend base template *}
{include file="./DialogProductListSettings.html"}