{if !empty($product_types) && !empty($type_id)}
    
<div class="fields form">
{$product_features = $product.features}

{$feature_type=0}

<div class="field">
    <div class="name">[`Product type`]</div>
    <div class="value no-shift">
        <span class="js-type-icon">{shopHelper::getIcon($product.type.icon)}</span>
        <strong>{$product.type.name|escape}</strong>&nbsp;
        {if $type_id != $product.type_id}&nbsp;&rarr;&nbsp;{shopHelper::getIcon($product_types[$type_id]['icon'])}
            <strong>{$product_types[$type_id]['name']}</strong>{/if}
        <a href="#/product/{$product.id}/edit/main/type/select/" class="inline-link js-action"><b><i>[`Change type`]</i></b></a>
    </div>
</div>


{foreach $features as $code => $feature}
    {if strpos($code,'.') == false}
        <div class="field{if $feature.type eq 'divider'} divider{/if}" data-type="{$feature.type}" data-multiple="{$feature.multiple}"
             data-selectable="{$feature.selectable}" data-code="{$code|escape}">
            <div class="name"><label for="product-features-{$code}">
                    {if empty($feature.internal)}<i class="icon10 exclamation"
                                                    title="[`This feature is not listed for the product type this product belongs to`]"></i> {/if}{$feature.name|escape}
                </label></div>


                {if $feature.selectable}
                    {if $feature.multiple}
                        <input type="hidden" name="product[features][{$code}][]" value="">
                        {foreach $feature.values as $value_id => $value}
                            <div class="value">
                            <label>
                                <input type="checkbox" name="product[features][{$code}][]" value="{$value|escape}"{if !empty($product_features[$code][$value_id])} checked="checked"{/if}>
                                {if is_object($value) && isset($value.icon)}{$value.icon}{/if}{$value|escape}
                            </label>
                            </div>
                        {/foreach}

                        {if empty($smarty.capture) || empty($smarty.capture['feature-value-multiple-template-js'])}
                                <!-- {capture name="feature-value-multiple-template-js"}{literal} edit feature jquery template -->
                            <div class="value">
                            <label>
                            <input type="checkbox" checked="checked" disabled="disabled"
                                   name="product[features][{%=o.feature.input%}]" value="">
                            {% include (o.feature.value_template, {'feature': o.feature}); %}
                            <a href="#/product/{/literal}{$product.id}{literal}/edit/features/value/delete/" class="inline-link js-action" title="[`Cancel`]">
                            <i class="icon10 delete"></i>
                            </a>
                            </label>
                            </div>
                            <!-- {/literal}{/capture} -->
                        {/if}

                    {else}{* $feature.multiple*}
                        <div class="value">

                        <select name="product[features][{$code}]">
                            <option value=""{if empty($product_features[$code])} selected="selected"{/if}>&nbsp;</option>
                            {foreach $feature.values as $value_id => $value}
                                {$selected_ =  (!empty($product_features[$code]) && ((string)$product_features[$code] == $value))}
                                <option value="{$value|escape}"{if $selected_} selected="selected"{/if}{if is_object($value)} style="{$value.style|default:''}"{/if}>{$value|escape}</option>
                            {/foreach}
                            {if empty($smarty.capture) && empty($smarty.capture['feature-value-template-js'])}
                                    <!-- {capture name="feature-value-template-js"}{literal} edit feature jquery template -->
                                <option value="{%=o.value%}">{%=o.value%}</option>
                                <!-- {/literal}{/capture} -->
                            {/if}
                        </select>
                        </div>
                    {/if}
                    <div class="value">
                        <a href="#/product/{$product.id}/edit/features/value/add/" class="inline-link hint js-action"><b><i>[`other`]</i></b></a>
                    </div>
                {else}
                    <div class="value">
                {*$feature.selectable*}

                    {if (strpos($feature.type,'2d') === 0) || (strpos($feature.type,'3d') === 0)}
                        {$type = substr($feature.type,3)}
                        {if strpos($type,'dimension') === 0}
                            {$units = shopDimension::getUnits($type)}
                            {$d=intval($feature.type)}
                            {$feature_unit = null}
                            {if !$feature_unit && isset($product_features[$code][$d-1])}
                                {$feature_unit=$product_features[$code][$d-1]->unit}
                            {/if}
                            {for $i=0;$i<$d;$i++}
                                {$code_="`$code`.`$i`"}
                                {if !$feature_unit && isset($product_features[$code][$i])}
                                    {$feature_unit=$product_features[$code][$i]->unit}
                                {/if}
                                {if $i}×{/if}
                                <input id="product-features-{$code_}" type="text"
                                       value="{if isset($product_features[$code][$i])}{$product_features[$code][$i]->convert($feature_unit,false)|escape}{/if}"
                                       name="product[features][{$code_}][value]" class="numerical short">
                            {/for}
                            <select name="product[features][{$code}.0][unit]">
                                {foreach $units as $unit}
                                    {$selected_ = (!$feature_unit && $unit@first)||(($feature_unit == $unit.value))}
                                    <option value="{$unit.value|escape}"
                                            title="{$unit.title|escape}"{if $selected_} selected="selected"{/if}>{$unit.title|escape}</option>
                                {/foreach}
                            </select>
                        {else}
                            {for $i=0;$i<intval($feature.type);$i++}
                                {$code_="`$code`.`$i`"}
                                {if $i}×{/if}
                                <input id="product-features-{$code_}" type="text"
                                       value="{if isset($product_features[$code][$i])}{$product_features[$code][$i]|escape}{/if}"
                                       name="product[features][{$code_}]" class="numerical short">
                            {/for}
                        {/if}
                    {elseif strpos($feature.type,'dimension') === 0}
                        {$units = shopDimension::getUnits($feature.type)}
                        <input id="product-features-{$code}" type="text"
                               value="{if isset($product_features[$code])}{$product_features[$code]->value|escape}{/if}"
                               name="product[features][{$code}][value]">
                        <select name="product[features][{$code}][unit]">
                            {foreach $units as $unit}
                                {$selected_ = (!isset($product_features[$code]) && $unit@first)||(isset($product_features[$code]) && ($product_features[$code]->unit == $unit.value))}
                                <option value="{$unit.value|escape}"
                                        title="{$unit.title|escape}"{if $selected_} selected="selected"{/if}>{$unit.title|escape}</option>
                            {/foreach}
                        </select>
                    {elseif strpos($feature.type,'range') === 0}
                        <input id="product-features-{$code}" type="text"
                               value="{if isset($product_features[$code]) && !$product_features[$code]->begin->is_null()}{$product_features[$code]->begin->value|escape}{/if}"
                               name="product[features][{$code}][value][begin]" class="numerical short">
                        —
                        <input id="product-features-{$code}" type="text"
                               value="{if isset($product_features[$code]) && !$product_features[$code]->end->is_null()}{$product_features[$code]->end->value|escape}{/if}"
                               name="product[features][{$code}][value][end]" class="numerical short">
                        {$units = shopDimension::getUnits($feature.type)}
                        {if $units}
                            <select name="product[features][{$code}][unit]">
                                {foreach $units as $unit}
                                    {$selected_ = (!isset($product_features[$code]) && $unit@first)||(isset($product_features[$code]) && ($product_features[$code]->unit == $unit.value))}
                                    <option value="{$unit.value|escape}"
                                            title="{$unit.title|escape}"{if $selected_} selected="selected"{/if}>{$unit.title|escape}</option>
                                {/foreach}
                            </select>
                        {/if}
                    {elseif strpos($feature.type,'text') === 0}
                        <textarea id="product-features-{$code}"
                                  name="product[features][{$code}]">{if isset($product_features[$code])}{$product_features[$code]|escape}{/if}</textarea>

                    {elseif strpos($feature.type,'color') === 0}
                        <input name="product[features][{$code}][value]" type="text" value="{$product_features[$code]['value']|default:''|escape}" placeholder="[`color name`]">
                        <a href="#/product/{$product.id}/edit/features/value/color/" class="inline-link js-action" style="display: inline;">
                            <i class="icon16 color" style="background: {$product_features[$code]['hex']|default:'#FFFFFF'};"></i>
                        </a>
                        #<input name="product[features][{$code}][code]" type="text" value="{$product_features[$code]['hex']|default:''|replace:'#':''|escape}" placeholder="[`000000`]" class="small">


                    {elseif strpos($feature.type,'boolean') === 0}
                        {if isset($product_features[$code])}
                            {$value = $product_features[$code]->value}
                        {else}
                            {$value = false}
                        {/if}
                        <label>
                            <input type="radio" name="product[features][{$code}]"
                                   value="1"{if $value===1} checked="checked"{/if}>
                            [`Yes`]
                        </label>
                        </div>
                        <div class="value">
                        <label>
                            <input type="radio" name="product[features][{$code}]"
                                   value="0"{if $value === 0} checked="checked"{/if}>
                            [`No`]
                        </label>
                        </div>
                        <div class="value">
                        <label>
                            <input type="radio" name="product[features][{$code}]"
                                   value=""{if $value === false} checked="checked"{/if}>
                            [`Not defined`]
                        </label>
                    {elseif strpos($feature.type,'divider') === 0}
                        <input type="hidden" value="-" name="product[features][{$code}]">
                    {else}
                        <input id="product-features-{$code}" type="text" name="product[features][{$code}]" data-type="{$feature.type}"
                               value="{if isset($product_features[$code])}{$product_features[$code]|escape}{/if}">
                    {/if}
                    </div>
                {/if}
        </div>
    {/if}
    {foreachelse}
    [`Product features undefined`]
{/foreach}

{foreach $product_features as $code => $value}
    {if empty($features[$code])}
        <div class="field">
            <div class="name">{$code}</div>
            <div class="value">{$value}</div>
        </div>
    {/if}
{/foreach}


{* new feature templates namespace = product[features][{%=code}] *}
<!-- {capture name="feature-add-template-js"} -->
<div class="field" {literal} data-type="{%=o.feature.type%}" data-multiple="{%=o.feature.multiple%}" data-selectable="{%=o.feature.selectable%}" data-code="{%=o.feature.code%}"{/literal}>
    <div class="name">
        {literal}
    <input type="text" placeholder="[`Feature name`]" name="product[features][{%=o.feature.input%}][name]"
           value="{%=o.feature.name%}">
    <input type="hidden" value="{%=o.feature.type%}" name="product[features][{%=o.feature.input%}][type]">
        <input type="hidden" value="{/literal}{$type_id}{literal}"
               name="product[features][{%=o.feature.input%}][types][]">
        {/literal}
    </div>

    <div class="value no-shift">
        {* value templates *}
        {literal}
            {% o.feature.input = o.feature.input +'][value'; %}
            {% include (o.feature.value_template, {feature: o.feature}); %}
        {/literal}
        <!-- {capture name="feature-value-template-js"} -->
    <input type="text" value="" placeholder="[`Feature value`]"
           name="{literal}product[features][{%=o.feature.input%}]{/literal}">
        <!-- {/capture} values here -->

        <!-- {capture name="feature-value-text-template-js"} -->
        <textarea name="{literal}product[features][{%=o.feature.input%}]{/literal}"></textarea>
        <!-- {/capture} values here -->

        <!-- {capture name="feature-value-divider-template-js"} -->
        <hr/>
        <input type="hidden" value="-" name="{literal}product[features][{%=o.feature.input%}]{/literal}">
        <!-- {/capture} values here -->

        <!-- {capture name="feature-value-color-template-js"} -->

        <input name="{literal}product[features][{%=o.feature.input%}]{/literal}[value]" type="text" value="" placeholder="[`color name`]">

        <a href="#/product/{$product.id}/edit/features/value/color/" class="inline-link js-action" style="display: inline;">
            <i class="icon16 color" style="background: #FFFFFF;"></i>
        </a>
        #<input name="{literal}product[features][{%=o.feature.input%}]{/literal}[code]" type="text" value="" placeholder="FFFFFF" class="small">

        <!-- {/capture} values here -->

        <!-- {capture name="feature-value-boolean-template-js"} -->
        <label>
            <input type="radio" name="{literal}product[features][{%=o.feature.input%}]{/literal}" value="1"
                   checked="checked">
            [`Yes`]

        </label>
    </div>
    <div class="value">
        <label>
            <input type="radio" name="{literal}product[features][{%=o.feature.input%}]{/literal}" value="0">
            [`No`]
        </label>
    </div>
    <div class="value">
        <label>
            <input type="radio" name="{literal}product[features][{%=o.feature.input%}]{/literal}" value="">
            [`Not defined`]
        </label>
        <!-- {/capture} values here -->

        {$dimension = shopDimension::getInstance()}
        {$dimensions = $dimension->getList()}
        {foreach $dimensions as $code=>$unit}
                <!-- {capture name="feature-value-dimension-`$code`-template-js"} -->
            <input type="text" name="{literal}product[features][{%=o.feature.input%}][value]{/literal}" value=""
                   placeholder="{$unit.name}">
            {$units = shopDimension::getUnits($code)}
            {if $units}
                <select name="{literal}product[features][{%=o.feature.input%}][unit]{/literal}">
                    {foreach $units as $unit}
                        <option value="{$unit.value|escape}">{$unit.title|escape}</option>
                    {/foreach}
                </select>
            {/if}
            <!-- {/capture} -->
        {/foreach}

        <!-- {capture name="feature-value-range-double-template-js"} -->
    <input type="text" name="{literal}product[features][{%=o.feature.input%}][value][begin]{/literal}" value=""
           placeholder="[`Feature value`]" class="numerical short">
        <span class="input">—</span>
    <input type="text" name="{literal}product[features][{%=o.feature.input%}][value][end]{/literal}" value=""
           placeholder="[`Feature value`]" class="numerical short">

        <!-- {/capture} -->

        {foreach $dimensions as $code=>$unit}
                <!-- {capture name="feature-value-range-`$code`-template-js"} -->
            <input type="text" name="{literal}product[features][{%=o.feature.input%}][value][begin]{/literal}" value=""
                   placeholder="{$unit.name}">
            <span class="input">—</span>
            <input type="text" name="{literal}product[features][{%=o.feature.input%}][value][end]{/literal}" value=""
                   placeholder="{$unit.name}">
            {$units = shopDimension::getUnits($code)}
            {if $units}
                <select name="{literal}product[features][{%=o.feature.input%}][unit]{/literal}">
                    {foreach $units as $unit}
                        <option value="{$unit.value|escape}">{$unit.title|escape}</option>
                    {/foreach}
                </select>
            {/if}
            <!-- {/capture} -->
        {/foreach}

        {include file="../../includes/featuresValuesTypes.html" base="/product/`$product.id`/edit/features/feature/type" class="js-action" link=true inline}
    </div>
</div>
<!-- {/capture} -->

<div class="field">
    <div class="value">
        <br>
        <a href="#/product/{$product.id}/edit/features/add/" class="inline-link js-action"><i class="icon16 add"></i><b><i>[`New feature`]</i></b></a>
    </div>
</div>


</div>
<div class="clear"></div>
{*
<p><pre>{var_export($product_features,true)|escape}</pre></p>
<p><pre>{var_export($changed_features,true)|escape}</pre></p>
<p><pre>{var_export($features,true)|escape}</pre></p>
*}

<script src="{$wa_app_static_url}js/product/features.js?{$wa->version()}" type="text/javascript"></script>
<script src="{$wa_url}wa-content/js/farbtastic/farbtastic.js" type="text/javascript"></script>
<link rel="stylesheet" href="{$wa_url}wa-content/js/farbtastic/farbtastic.css" type="text/css" />
<script type="text/javascript">
    $.product = $.extend(true, $.product, {
        features_values:{$changed_features|json_encode}
    });
    {literal}
    $.product.init({
        value_templates: {{/literal}
            {$dimensions = $dimension->getList()}
            {foreach $dimensions as $code => $var}'dimension.{$code|escape}': '-dimension-{$code|escape}',
            {/foreach}
            {foreach $dimensions as $code => $var}'range.{$code|escape}': '-range-{$code|escape}',
            {/foreach}{literal}
            'range.double': '-range-double',
            boolean: '-boolean',
            color: '-color',
            divider:'-divider',
            text: '-text'
        }
    }, 'features');
    {/literal}
</script>


{foreach $smarty.capture as $name => $template} {if strpos($name,'template-js')}
    <script type="text/x-jquery-tmpl" id="{$name}">
        <!-- begin {$name} {$template|replace:'</':'<\\/'} end {$name} -->
    </script>
{/if} {/foreach}

{else if empty($product_types)}
    <div class="value">
        <p>[`To edit product custom features, add at least one product type on the <em>Settings → Product types & features</em> screen.`]</p>
    </div>
{else}
    <script src="{$wa_app_static_url}js/product/features.js?{$wa->version()}" type="text/javascript"></script>
    <script src="{$wa_url}wa-content/js/farbtastic/farbtastic.js" type="text/javascript"></script>
    <link rel="stylesheet" href="{$wa_url}wa-content/js/farbtastic/farbtastic.css" type="text/css" />
    <div class="fields form">
        <div class="value">
            <p class="hint">[`Assign this product to a particular product type to be able to edit product custom features.`]</p>
            <a href="#/product/{$product.id}/edit/main/type/select/" class="inline-link js-action"><b><i>[`Change type`]</i></b></a>
        </div>
        <script type="text/javascript">$.product.init({}, 'features');</script>
    </div>
{/if}