<input id="product_id" type="hidden" value="{{product_id}}">
<div class="top_container">
    <a class="back_button" title="{{i18n "mobile.return"}}" href="javascript:history.back();"></a>
</div>

<section class="product_container" itemscope="" itemtype="http://schema.org/Product">
    <span class="product_category">{{family_description}}</span>

    {{#if quantity}}
        <div class="product added" id="product_{{product_id}}" product_id="{{product_id}}">
    {{else}}
        <div class="product" id="product_{{product_id}}" product_id="{{product_id}}">
    {{/if}}



        {{#if mobile_promotion_media}}
            <img width="145" height="32" src="{{MEDIA_CONTENT_URL}}{{mobile_promotion_media}}" alt="{{long_promotion_text}}" class="promotion_image">
        {{/if}}

        <div class="product_row">

            <div class="product_data">
                <span class="name product_name" itemprop="name">{{product_description}}</span>
                <span class="data">{{i18n "mobile.product.brand"}} <span itemprop="brand">{{brand}}</span></span>

                <div class="product_price_container" itemprop="offers" itemscope="" itemtype="http://schema.org/Offer">
                    {{#if pum_weight}}
                        <span class="product_weight_price">
                            <span class="variable">{{i18n "mobile.product.variable.weight"}}</span>
                            <span class="price_per_kg">{{pum_weight}}</span>
                        </span>
                    {{else}}
                        <span class="product_weight_price">
                            <span class="price_per_kg">{{pum}}</span>
                        </span>
                    {{/if}}

                    {{#if additionalProductInfo.CAN_NET}}
                        <span class="product_weight_price">
                            <span class="price_per_kg">{{i18n "mobile.product.can_net"}}:&nbsp;</span>
                            <span class="price_per_kg">{{additionalProductInfo.CAN_NET}}&nbsp;{{additionalProductInfo.UNI_CNE}}</span>
                        </span>
                    {{/if}}

                   {{#if on_sale_price}}
                        <span class="product_previous_price"><span itemprop="price" id="list_price_{{product_id}}"></span>{{i18n "mobile.commons.euro_symbol"}}</span>
                        <span class="product_price"><span itemprop="price" id="sale_price_{{product_id}}"></span>{{i18n "mobile.commons.euro_symbol"}}</span>
                        <meta itemprop="priceCurrency" content="EUR">
                        <script>
                            formatNumber('{{price}}', 'list_price_{{product_id}}');
                            formatNumber('{{on_sale_price}}', 'sale_price_{{product_id}}');
                        </script>
                    {{else}}
                        <span class="product_price"><span itemprop="price" id="list_price_{{product_id}}"></span>{{i18n "mobile.commons.euro_symbol"}}</span>

                        <meta itemprop="priceCurrency" content="EUR">

                        <script>
                            formatNumber('{{price}}', 'list_price_{{product_id}}');
                        </script>
                    {{/if}}
                    <meta itemprop="priceCurrency" content="EUR">
                </div>
            </div>
            <a class="product_image_container" title="{{i18n "mobile.wine.image.enlarge"}}" href="javascript:enlargeImage('{{family_description}}', '{{product_description}}', '{{product_large_image}}', '{{MEDIA_CONTENT_URL}}')">
                <img class="product_image" alt="{{product_description}}" data-original="{{MEDIA_CONTENT_URL}}/resize_210x210{{product_large_image}}" src="{{MEDIA_CONTENT_URL}}/resize_395x416{{product_large_image}}" width="105" style="display: block;">
                <meta itemprop="image" content="{{MEDIA_CONTENT_URL}}/resize_210x210{{product_large_image}}">
                <span>{{i18n "mobile.wine.image.enlarge"}}</span>
            </a>
        </div>
        <div class="unit_container">
            <a class="substract_button" title="{{i18n "mobile.productTemplate.menos"}}" href="javascript:removeItemFromList('{{product_id}}');"></a>
            {{#if quantity}}
                <span  id="item_quantity_{{product_id}}" class="quantity_container">{{quantity}}</span>
            {{else}}
                <span  id="item_quantity_{{product_id}}" class="quantity_container">0</span>
            {{/if}}

            <a class="add_button" title="{{i18n "mobile.productTemplate.mas"}}" href="javascript:addItemFromList('{{product_id}}');"></a>
        </div>
        <div class="buttons_container">
            <a class="white_button" title="{{i18n "mobile.productTemplate.anadirMiLista"}}" href="javascript:addToListFromItemList('{{product_id}}')" onClick="dataLayer.push({event: 'event_gtm',category:'acciones usuario', action:'a�adir producto a lista'});"></a>

            {{#if available_for_view}}
                    <a data-product-id="{{product_id}}" class="orange_button btn_add2cart" title="{{i18n "mobile.productTemplate.anadirCarrito"}}" onClick="dataLayer.push({event:'event_gtm', category:'acciones usuario', action:'a�adir producto desde la ficha'});" href="javascript:addItemToCartFromList('{{product_id}}', 'PDP');"></a>
            {{else}}
                    <a class="white_button temporal" title="{{i18n "mobile.productTemplate.anadirCarrito"}}" href="javascript:condisAlert('{{i18n "mobile.product.not.availalable"}}')"></a>
            {{/if}}


            <span class="added_button"></span>

        </div>

        <div class="data_container">
            {{#if kcal}}
                <div class="left_data">
                    <span class="data_text kcal"><span>{{kcal}}</span> {{i18n "mobile.product.kcal"}}</span>
                </div>
            {{/if}}

            {{#if flagIcons}}
                {{#each flagIcons}}
                    <span class="data_text"><img alt="{{productIconTooltipKey}}" src="{{MEDIA_CONTENT_URL}}/resize_65x65{{productIconUrlKey}}" />
                    {{#if productIconTooltipKey}}
                        {{productIconTooltipKey}}
                    {{/if}}
                    </span>
                {{/each}}
            {{/if}}
        </div>

        <div class="offer_container">
            {{#if long_promotion_text}}
                <div class="offer">
                    <p class="offer_title"><span class="star"></span>{{i18n "mobile.product.on.sale"}}<span class="star"></span><span class="arrow"></span></p>
                    <p class="offer_text">{{long_promotion_text}}</p>
                </div>
            {{/if}}
        </div>
    </div>

</section>



{{#if additionalProductInfo}}
    <section class="info_container">
        <ul class="info_list">
            {{#if additionalProductInfo.COMP_INFO}}
            <li class="info">
                <a class="info_name" title="{{i18n "mobile.product.display.section"}} {{i18n 'mobile.product.tab.composition'}}" href="javascript:void(0);">{{i18n 'mobile.product.tab.composition'}}<span></span></a>
                <div class="info_content">
                    {{#if additionalProductInfo.COMP_DESCRIPTION}}
                        <p class="info_text" itemprop="description"><span class="info_title">{{i18n "mobile.product.info.description"}}</span>{{additionalProductInfo.COMP_DESCRIPTION}}</p>
                    {{/if}}
                    {{#if additionalProductInfo.COMP_INGREDIENTS_HTML}}
                        <p class="info_text"><span class="info_title">{{i18n "mobile.product.info.ingredients"}}</span>{{{additionalProductInfo.COMP_INGREDIENTS_HTML}}}</p>
                    {{/if}}
                    {{#if additionalProductInfo.COMP_USE}}
                        <p class="info_text"><span class="info_title">{{i18n "mobile.product.info.use"}}</span>{{additionalProductInfo.COMP_USE}}</p>
                    {{/if}}
                    {{#if additionalProductInfo.COMP_ADDITIONAL_TEXT}}
                        <p class="info_text"><span class="info_title">{{i18n "mobile.product.info.additional.info"}}</span>{{additionalProductInfo.COMP_ADDITIONAL_TEXT}}</p>
                    {{/if}}
                </div>
            </li>
            {{/if}}
            {{#if additionalProductInfo.NUTRITIONAL_INFO}}
            <li class="info">
                <a class="info_name" title="{{i18n "mobile.product.display.section"}} {{i18n 'mobile.product.tab.nutritional.info'}}" href="javascript:void(0);">{{i18n 'product.tab.nutritional.info'}}<span></span></a>
                <div class="info_content">
                    <p class="info_text blue">{{additionalProductInfo.NUTR_PORTION_INFO}}</p>
                    <div class="capsules_container">
                        {{#if additionalProductInfo.NUTRITIONAL_HEADER}}
                            {{#each additionalProductInfo.NUTRITIONAL_HEADER}}
                                <span class="capsule">
                                    <span class="name">{{LINE_DESCRIPTION}}</span>
                                    <span class="quantity">{{AMOUNT_PER_UNIT}}</span>
                                    <span class="percentage">{{PERCENTAGE}}% IR</span>
                                </span>
                            {{/each}}
                        {{/if}}
                    </div>
                    <p class="info_text blue">{{i18n "product.nutritional.daily"}}</p>
                    <table class="nutritional_table">
                        <tbody><tr class="table_header">
                            <th>{{i18n "mobile.product.nutritional.values"}}</th>
                            <th>{{i18n "mobile.product.nutritional.measure"}}</th>
                            <th>{{i18n "mobile.product.nutritional.portion"}}</th>
                            <th>{{i18n "mobile.product.nutritional.percentage"}}<br>{{i18n "mobile.product.nutritional.vrn"}}</th>
                        </tr>

                        {{#if additionalProductInfo.NUTRITIONAL_INFO}}
                            {{#each additionalProductInfo.NUTRITIONAL_INFO}}
                                <tr class="divisor">
                                    <td>{{LINE_DESCRIPTION}}</td>
                                    <td>{{AMOUNT_PER_100}}</td>
                                    <td>{{AMOUNT_PER_UNIT}}</td>
                                    <td>{{PERCENTAGE}}%</td>
                                </tr>
                            {{/each}}
                        {{/if}}

                        <tr class="divisor last">
                            <td>{{i18n "mobile.product.nutritional.adult"}}<br>
                                {{i18n "mobile.product.nutritional.reference"}}<br><br>
                                {{additionalProductInfo.NUTR_PACKAGE_CONTENT}}
                            </td>
                        </tr>
                    </tbody></table>
                </div>
            </li>
            {{/if}}
            {{#if additionalProductInfo.ALLERGEN_INFO}}
                <li class="info">
                    <a class="info_name" title="{{i18n "mobile.product.display.section"}} {{i18n 'product.tab.allergens'}}" href="javascript:void(0);">{{i18n 'product.tab.allergens'}}<span></span></a>
                    <div class="info_content">
                        <p class="info_text">
                            {{#each additionalProductInfo.ALLERGEN_INFO}}
                                {{this}}.<br><br>
                            {{/each}}
                    </div>
                </li>
            {{/if}}
            {{#if additionalProductInfo.HEALTH_INFO}}
                <li class="info">
                    <a class="info_name" title="{{i18n "mobile.product.display.section"}} {{i18n 'product.tab.health'}}" href="javascript:void(0);">{{i18n 'product.tab.health'}}<span></span></a>
                    <div class="info_content">
                        <p class="info_text">
                            {{#each additionalProductInfo.HEALTH_INFO}}
                                {{this}}.<br><br>
                            {{/each}}
                    </div>
                </li>
            {{/if}}
            {{# if additionalProductInfo.MANUF_INFO}}
                <li class="info">
                    <a class="info_name" title="{{i18n "mobile.product.display.section"}} {{i18n 'mobile.product.tab.manufacturer'}}" href="javascript:void(0);">{{i18n 'mobile.product.tab.manufacturer'}}<span></span></a>
                    <div class="info_content">
                        <p class="info_text">
                            {{#if additionalProductInfo.MANUF_IMAGE_URL}}
                                <img class="image_manufacturer" alt="{{additionalProductInfo.MANUF_NAME}}" src="{{additionalProductInfo.MANUF_IMAGE_URL}}" width="150" height="120">
                            {{/if}}
                            {{#if additionalProductInfo.MANUF_NAME}}
                                {{additionalProductInfo.MANUF_NAME}}<br><br>
                            {{/if}}
                            {{#if additionalProductInfo.MANUF_URL}}
                                {{additionalProductInfo.MANUF_URL}}<br><br>
                            {{/if}}
                            {{#if additionalProductInfo.MANUF_MAIL}}
                                {{additionalProductInfo.MANUF_MAIL}}<br><br>
                            {{/if}}
                            {{#if additionalProductInfo.MANUF_TEL}}
                                {{i18n "product.manufacturer.client"}} {{additionalProductInfo.MANUF_TEL}}<br><br>
                            {{/if}}
                            {{#if additionalProductInfo.MANUF_OFFICE_TEL}}
                                {{i18n "product.manufacturer.office"}} {{additionalProductInfo.MANUF_OFFICE_TEL}}
                            {{/if}}
                        </p>
                    </div>
                </li>
            {{/if}}
        </ul>
    </section>
{{/if}}




<aside name="pdp_share_sn" class="button_seccion">
    <div class="social_buttons">
        <a class="social_button fb" target="_blank" title="{{i18n "mobile.product.facebook"}}" href="javascript:void(0)" onClick="javascript:fb_compartir('{{STORE_URL}}{{STORE_CONTEXT_ROOT}}{{friendlyURL}}');"></a>
        <a class="social_button tw" target="_blank" title="{{i18n "mobile.twitter.share"}} {{product_description}}" href="https://twitter.com/intent/tweet?via=condislife&url={{STORE_URL}}{{STORE_CONTEXT_ROOT}}{{friendlyURL}}&text={{i18n "twitter.like"}} {{product_description}} #Condisline"></a>
    </div>
</aside>
