{strip}

{$_is_dialog = $wa->get('cart')}

{$_show_compare = true}
{if empty($theme_settings.enable_compare)}
    {$_show_compare = false}
{/if}

{if $_is_dialog}
    {include file="./product.cart.dialog.html" inline}

{else}
    <div class="s-product-cart">
        <form id="s-product-form" method="post" action="{$wa->getUrl('/frontendCart/add')}">
            <header class="s-cart-header">
                <div class="s-price-wrapper">
                    <div class="s-price js-product-price" data-price="{shop_currency($product.price, null, null, 0)}">{shop_currency_html($product.price)}</div>
                    <div class="s-compare-price js-compare-price {if !($product.compare_price > 0)}is-hidden{/if}" data-compare-price="{shop_currency_html($product.compare_price, null, null, 0)}" > {shop_currency_html($product.compare_price)} </div>
                </div>
            </header>

            <div class="s-cart-content">
                {if $product.sku_type}
                    {* SELECTABLE FEATURES selling mode *}
                    {$default_sku_features = $product.sku_features}
                    {$product_available = $product.status}

                    <div class="s-options-wrapper">
                        {if $theme_settings.selectable_features_control == "inline"}
                            {foreach $features_selectable as $f}
                                <div class="inline-select {if $f.type == 'color'}color{/if}">
                                    {foreach $f.values as $v_id => $v}
                                        {if !isset($default_sku_features[$f.id])}{$default_sku_features[$f.id]=$v_id}{/if}
                                        <a {if $v_id == ifset($default_sku_features[$f.id])}class="selected"{/if} data-sku-id="{$f.id}:{$v_id};" data-value="{$v_id}" href="javascript:void(0);" style="{if $f.type == 'color'}{$v->style}{/if}">
                                            {if $f.type == 'color'}
                                                <span class="color_name">{strip_tags($v)}</span>
                                            {else}
                                                {$v}
                                            {/if}
                                        </a>
                                    {/foreach}
                                    <input type="hidden" data-feature-id="{$f.id}" class="js-sku-feature sku-feature" name="features[{$f.id}]" value="{ifset($default_sku_features[$f.id])}">
                                </div>
                            {/foreach}
                        {else}
                            {foreach $features_selectable as $f}
                                <div class="s-option">
                                    <span class="s-label">{$f.name}:</span>
                                    <select class="js-sku-feature sku-feature" data-feature-id="{$f.id}" name="features[{$f.id}]">
                                        {foreach $f.values as $v_id => $v}
                                            <option value="{$v_id}" {if $v_id == ifset($default_sku_features[$f.id])}selected{/if}>{$v}</option>
                                        {/foreach}
                                    </select>
                                </div>
                            {/foreach}
                        {/if}
                    </div>

                    {* list all SKUs for Schema.org markup *}
                    {foreach $product.skus as $sku}
                        <div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
                            {$sku_available =  $product.status && $sku.available && ($wa->shop->settings('ignore_stock_count') || $sku.count === null || $sku.count > 0)}
                            {if $sku.name}<meta itemprop="name" content="{$sku.name|escape}">{/if}
                            <meta itemprop="price" content="{shop_currency($sku.price, $product.currency, null, 0)}">
                            <meta itemprop="priceCurrency" content="{$wa->shop->currency()}">
                            {if (!($sku.count === null) && $sku.count <= 0)}
                                <link itemprop="availability" href="http://schema.org/OutOfStock" />
                            {else}
                                <link itemprop="availability" href="http://schema.org/InStock" />
                            {/if}
                        </div>
                    {/foreach}

                {else}

                    {* FLAT SKU LIST selling mode *}
                    {$product_available = false}
                    {if count($product.skus) > 1}
                        <div class="s-skus-wrapper">
                            {foreach $product.skus as $sku}
                                {$sku_available =  $product.status && $sku.available && ($wa->shop->settings('ignore_stock_count') || $sku.count === null || $sku.count > 0)}
                                <div class="s-sku-item {if !$sku.available}is-disabled{/if}" itemscope itemtype="http://schema.org/Offer">
                                    <label class="s-label">
                                        <input name="sku_id" type="radio" value="{$sku.id}"
                                               data-compare-price="{shop_currency($sku.compare_price, $product.currency, null, 0)}"
                                               data-price="{shop_currency($sku.price, $product.currency, null, 0)}"
                                            {if !$sku.available} disabled="true"{/if}
                                            {if !$sku_available} data-disabled="1"{/if}
                                            {if $sku.id == $product.sku_id} checked="checked"{/if}
                                            {if $sku.image_id} data-image-id="{$sku.image_id}"{/if}>
                                        <span itemprop="name">{$sku.name|escape}</span>
                                        {if $sku.sku}<span class="s-hint">{$sku.sku|escape}</span>{/if}
                                        <meta itemprop="price" content="{shop_currency($sku.price, $product.currency, null, 0)}">
                                        <meta itemprop="priceCurrency" content="{$wa->shop->currency()}">
                                        <span class="price tiny nowrap">{shop_currency_html($sku.price, $product.currency)}</span>
                                        {if (!($sku.count === null) && $sku.count <= 0)}
                                            <link itemprop="availability" href="http://schema.org/OutOfStock" />
                                        {else}
                                            <link itemprop="availability" href="http://schema.org/InStock" />
                                        {/if}
                                    </label>
                                </div>
                                {$product_available = $product_available or $sku_available}
                            {/foreach}
                        </div>

                    {else}

                        {* in case there is only one SKU, don't display the selector *}
                        <div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
                            {$sku = $product.skus[$product.sku_id]}
                            {if $sku.sku}<span class="s-hint">{$sku.sku|escape}</span>{/if}
                            {if $sku.name}<meta itemprop="name" content="{$sku.name|escape}">{/if}
                            <meta itemprop="price" content="{shop_currency($sku.price, $product.currency, null, 0)}">
                            <meta itemprop="priceCurrency" content="{$wa->shop->currency()}">
                            {if !$sku.available}
                                <link itemprop="availability" href="http://schema.org/Discontinued" />
                                <p><em class="bold error">[`This product is not available for purchase`]</em></p>
                            {elseif !$wa->shop->settings('ignore_stock_count') && !($sku.count === null || $sku.count > 0)}
                                <link itemprop="availability" href="http://schema.org/OutOfStock" />
                                <div class="stocks"><strong class="stock-none"><i class="icon16 stock-transparent"></i>{if $wa->shop->settings('ignore_stock_count')}[`Pre-order only`]{else}[`Out of stock`]{/if}</strong></div>
                            {else}
                                <link itemprop="availability" href="http://schema.org/InStock" />
                            {/if}
                            <input name="sku_id" type="hidden" value="{$product.sku_id}">
                            {$product_available = $product.status && $sku.available && ($wa->shop->settings('ignore_stock_count') || $sku.count === null || $sku.count > 0)}
                        </div>

                    {/if}

                {/if}

                {if $product_available || count($product.skus) > 1}
                    <div class="s-stocks-wrapper">
                        {function name=in_stock n=0 low=5 critical=2}
                            {if $n > $low or $n === null}
                                <strong class="stock-high"><i class="s-icon green"></i> [`In stock`]</strong>
                            {elseif $n > $critical}
                                <strong class="stock-low"><i class="s-icon yellow"></i> {* _w("Only %d left in stock", "Only %d left in stock", $n) *}{_w("Only a few items left")}</strong>
                            {elseif $n > 0}
                                <strong class="stock-critical"><i class="s-icon red"></i> {_w("Only %d left in stock", "Only %d left in stock", $n)}</strong>
                            {else}
                                <strong class="stock-none"><i class="s-icon gray"></i> {if $wa->shop->settings('ignore_stock_count')}[`Pre-order only`]{else}[`Out of stock`]{/if}</strong>
                            {/if}
                        {/function}
                        {foreach $product.skus as $sku}
                            <div class="sku-{$sku.id}-stock" {if $sku.id != $product.sku_id}style="display:none"{/if} data-sku-count="{$sku.count}">
                                {if $sku.stock}
                                    {foreach $stocks as $stock_id => $stock}
                                        {if isset($sku.stock[$stock_id])}
                                            {$stock_count = $sku.stock[$stock_id]}
                                        {else}
                                            {$stock_count = null}
                                        {/if}
                                        <div class="s-stock-item">
                                            <span class="s-label">{$stock.name|escape}:</span>
                                            {in_stock n=$stock_count low=$stock.low_count critical=$stock.critical_count}
                                        </div>
                                    {/foreach}
                                {else}
                                    {in_stock n=$sku.count}
                                {/if}
                            </div>
                        {/foreach}
                        {if $product.sku_type}
                            <div class="sku-no-stock" style="display: none;">
                                <strong class="stock-none">[`Product with the selected option combination is not available for purchase`]</strong>
                            </div>
                        {/if}
                    </div>
                {/if}

                {if $services}
                    {* services *}
                    <div class="s-services-wrapper">
                        {foreach $services as $s}
                            <div class="service-item service-{$s.id}">
                                <label>
                                    <input data-price="{shop_currency($s.price, $s.currency, null, 0)}" {if !$product_available}disabled="disabled"{/if} type="checkbox" name="services[]" value="{$s.id}"> {$s.name|escape} {if $s.price && !isset($s.variants)}(+<span class="service-price">{shop_currency_html($s.price, $s.currency)}</span>){/if}
                                </label>
                                {if isset($s.variants)}
                                    <select data-variant-id="{$s.variant_id}" class="service-variants" name="service_variant[{$s.id}]" disabled>
                                        {foreach $s.variants as $v}
                                            <option {if $s.variant_id == $v.id}selected{/if} data-price="{shop_currency($v.price, $s.currency, null, 0)}" value="{$v.id}">{$v.name|escape} (+{shop_currency($v.price, $s.currency)})</option>
                                        {/foreach}
                                    </select>
                                {else}
                                    <input type="hidden" name="service_variant[{$s.id}]" value="{$s.variant_id}">
                                {/if}
                            </div>
                        {/foreach}
                    </div>
                {/if}
            </div>

            <footer class="s-cart-footer">
                <div class="s-layout">
                    <div class="s-column left middle">

                        <div class="s-button-wrapper">
                            <input class="s-submit-button js-submit-button" type="submit" value="[`Buy`]" {if !$product_available}disabled="disabled"{/if}>
                        </div>

                    </div>
                    {*
                    <div class="s-column right middle">
                        <div class="s-quantity-wrapper">
                            <input class="minus js-decrease" type="button" value="&minus;">
                            <input class="s-quantity-field js-quantity-field" type="text" name="quantity" value="1" data-max-quantity="{$product.count}">
                            <input class="plus js-increase" type="button" value="+">
                        </div>
                    </div>
                    *}
                    {if !empty($_show_compare)}
                        <div class="s-column right">
                            <a class="s-compare-button js-compare-product {if $wa->shop->inComparison($product.id)}is-active{/if}" href="javascript:void(0);" data-product="{$product.id}" title="{if $wa->shop->inComparison($product.id)}[`In comparison list`]{else}[`To comparison`]{/if}">
                                <i class="svg-icon compare size-11 {if $wa->shop->inComparison($product.id)}{else}active{/if}"></i>
                                <span class="s-name">{if $wa->shop->inComparison($product.id)}[`In comparison list`]{else}[`To comparison`]{/if}</span>
                            </a>
                        </div>
                    {/if}

                </div>
                <input type="hidden" name="product_id" value="{$product.id}">
            </footer>

        </form>

        <script>
            ( function($) {
                var $form = $("#s-product-form").removeAttr("id");

                new window.waTheme.init.shop.Product({
                    $form: $form,
                    is_dialog: false,
                    currency: {json_encode($currency_info)},
                    services: {if count($product.skus) > 1 or $product.sku_type}{json_encode($sku_services)}{else}false{/if},
                    features: {if $product.sku_type}{json_encode($sku_features_selectable)}{else}false{/if},
                    skus: {$product.skus|json_encode},
                    locales: {
                        to_compare: "[`To comparison`]",
                        in_compare: "[`In comparison list`]",
                        added: "[`Added`]",
                        buy: "{if $wa->shop->cart->total() > 0}[`Add to cart`]{else}[`Buy now`]{/if}"
                    }
                });
            })(jQuery);
        </script>
    </div>
{/if}

{/strip}