{extends file="layout.tpl"}

{block name="breadcrumb"}
    <nav class="nav-breadcrumb" role="navigation" aria-labelledby="breadcrumb-label">
        <strong id="breadcrumb-label">{intl l="You are here"}: </strong>
        <ul class="breadcrumb" itemprop="breadcrumb">
            <li itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a href="{navigate to="index"}" itemprop="url"><span itemprop="title">{intl l="Home"}</span></a></li>
            {loop type="product" name="product_breadcrumb" id="{product attr="id"}"}
                {loop name="category_path" type="category-path" category="{$DEFAULT_CATEGORY}"}
                <li itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a href="{$URL}" itemprop="url"><span itemprop="title">{$TITLE}</span></a></li>
                {/loop}
                <li itemscope itemtype="http://data-vocabulary.org/Breadcrumb" class="active"><span itemprop="title">{$TITLE}</span></li>
            {/loop}
        </ul>
    </nav><!-- /.nav-breadcrumb -->
{/block}

{block name="main-content"}
    <div class="main">
        {loop name="product.details" type="product" id="{product attr="id"}"}
        <article id="product" class="col-main" role="main" itemscope itemtype="http://schema.org/Product">

            <!-- Use the meta tag to specify content that is not visible on the page in any way -->
            {loop name="brand.feature" type="feature" product="{$ID}" title="brand"}
                {loop name="brand.value" type="feature_value" feature="{$ID}" product="{product attr="id"}"}
                    <meta itemprop="brand" content="{$TITLE}">
                {/loop}
            {/loop}
            {loop name="brand.feature" type="feature" product=$ID title="isbn"}
                {loop name="brand.value" type="feature_value" feature=$ID product=$product_id}
                    <meta itemprop="productID" content="isbn:{$TITLE}">
                {/loop}
            {/loop}

            <section id="product-gallery">
                <figure class="product-image">
                    {loop type="image" name="image.main" product="{$ID}" width="560" height="445" resize_mode="borders" limit="1"}
                        <img src="{$IMAGE_URL}" alt="{$TITLE}" class="img-responsive" itemprop="image" data-toggle="magnify">
                    {/loop}
                </figure>

                <div id="product-thumbnails" class="slide" style="position:relative;">
                    <div class="carousel-inner">
                        <div class="item active">
                            <ul>
                                {loop name="image.carousel" type="image" product="{$ID}"  width="560" height="445" resize_mode="borders" limit="5"}
                                <li>
                                    <a href="{$IMAGE_URL}" class="thumbnail {if $LOOP_COUNT == 1}active{/if}">
                                        {loop type="image" name="image.thumbs" id="{$ID}" product="$OBJECT_ID" width="118" height="85" resize_mode="borders"}
                                            <img src="{$IMAGE_URL}" alt="{$TITLE}">
                                        {/loop}
                                    </a>
                                </li>
                                {/loop}
                            </ul>
                        </div>
                        {ifloop rel="image.carouselsup"}
                        <div class="item">
                            <ul>

                                {loop name="image.carouselsup" type="image" product="{$ID}"  width="560" height="445" resize_mode="borders" offset="5"}
                                    <li>
                                        <a href="{$IMAGE_URL}" class="thumbnail">
                                            {loop type="image" name="image.thumbssup" id="{$ID}" product="$OBJECT_ID" width="118" height="85" resize_mode="borders"}
                                                <img src="{$IMAGE_URL}" alt="{$TITLE}">
                                            {/loop}
                                        </a>
                                    </li>
                                {/loop}
                            </ul>
                        </div>
                        {/ifloop}
                    </div>
                    {ifloop rel="image.carouselsup"}
                        <a class="left carousel-control" href="#product-thumbnails" data-slide="prev"><i class="icon-prev"></i></a>
                        <a class="right carousel-contol" href="#product-thumbnails" data-slide="next"><i class="icon-next"></i></a>
                    {/ifloop}
                </div>
            </section>

            <section id="product-details">
                <div class="product-info">
                    <h1 class="name"><span itemprop="name">{$TITLE}</span></h1>
                    <span itemprop="sku" class="sku">{intl l='Ref.'}: {$REF}</span>

                    <div class="short-description">
                        <p>{$POSTSCRIPTUM}</p>
                    </div>
                </div>


                <div class="product-price" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
                    <div class="availability"><span class="availibity-label">{intl l="Availability"}: </span><span itemprop="availability" href="http://schema.org/InStock" class="in-stock">In stock</span></div>

                    <div class="price-container">
                        {loop type="category" name="category_tag" id=$DEFAULT_CATEGORY}
                            <meta itemprop="category" content="{$TITLE}">
                        {/loop}
                        <meta itemprop="itemCondition" itemscope itemtype="http://schema.org/NewCondition"> <!-- List of condition : NewCondition, DamagedCondition, UsedCondition, RefurbishedCondition -->
                        <meta itemprop="priceCurrency" content="{currency attr="symbol"}"> <!-- List of currency : The currency used to describe the product price, in three-letter ISO format. -->
                        <link itemprop="availability" href="http://schema.org/InStock" content="in_stock" />
                        <!-- List of availibility :
                            out_of_stock : http://schema.org/OutOfStock
                            in_stock : http://schema.org/InStock
                            instore_only : http://schema.org/InStoreOnly
                            preorder : http://schema.org/PreOrder
                            online_only : http://schema.org/OnlineOnly
                        -->
                        {if $IS_PROMO }
                        {loop name="productSaleElements_promo" type="product_sale_elements" product="{$ID}" limit="1" order="min_price"}
                            {assign var="default_product_sale_elements" value="$ID"}
                            <span class="special-price"><span itemprop="price" class="price-label">{intl l="Special Price:"} </span><span class="price">{format_number number="{$TAXED_PROMO_PRICE}"} {currency attr="symbol"}</span></span>
                            <span class="old-price"><span class="price-label">{intl l="Regular Price:"} </span><span class="price">{format_number number="{$TAXED_PRICE}"} {currency attr="symbol"}</span></span>
                        {/loop}
                        {else}
                            <span class="regular-price"><span itemprop="price" class="price">{format_number number="{$BEST_TAXED_PRICE}"} {currency attr="symbol"}</span></span>
                        {/if}
                    </div>
                </div>

                {form name="thelia.cart.add" }
                <form id="form-product-details" action="{url path="/cart/add" }" method="post" role="form">
                    {form_hidden_fields form=$form}
                    <input type="hidden" name="view" value="product">
                    <input type="hidden" name="product_id" value="{$ID}">

                    {if $form_error}<div class="alert alert-error">{$form_error_message}</div>{/if}

                    {form_field form=$form field='product_sale_elements_id'}
                    {if $default_product_sale_elements }
                        <input type="hidden" name="{$name}" value="{$default_product_sale_elements}" {$attr}>
                    {else}
                    {loop name="productSaleElements_promo" type="product_sale_elements" product="{$ID}" limit="1"}
                        <input type="hidden" name="{$name}" value="{$ID}" {$attr}>
                    {/loop}
                    {/if}
                    {/form_field}
                    {form_field form=$form field="product"}
                    <input id="{$label_attr.for}" type="hidden" name="{$name}" value="{$ID}" {$attr} >
                    {/form_field}
                    <fieldset class="product-options">
                        <div class="option option-color">
                            <label for="option-color" class="option-heading">Show</label>
                            <div class="option-content">
                                <select id="option-color" name="option-color" class="form-control">
                                    <option value="0">Blue</option>
                                    <option value="1">Red</option>
                                    <option value="2">Purple</option>
                                </select>
                            </div>
                        </div>

                        <div class="option option-size">
                            <fieldset>
                                <legend class="option-heading">Size</legend>
                                <div class="option-content">
                                    <label class="checkbox-inline" for="size1">
                                        <input type="checkbox" name="size1" id="size1" value="1"> Large
                                    </label>
                                    <label class="checkbox-inline" for="size2">
                                        <input type="checkbox" name="size2" id="size2" value="2"> Medium
                                    </label>
                                    <label class="checkbox-inline" for="size3">
                                        <input type="checkbox" name="size3" id="size3" value="3"> Small
                                    </label>
                                </div>
                            </fieldset>
                        </div>
                    </fieldset>
                    <fieldset class="product-cart form-inline">
                        {form_field form=$form field='quantity'}
                        <div class="form-group group-qty {if $error}has-error{elseif $value != "" && !$error}has-success{/if}">
                            <label for="{$label_attr.for}">{$label}</label>
                                <input type="number" name="{$name}" id="{$label_attr.for}" class="form-control" value="{$value|default:1}" min="0" required>
                                {if $error }
                                    <span class="help-block"><i class="icon-remove"></i> {$message}</span>
                                {elseif $value != "" && !$error}
                                    <span class="help-block"><i class="icon-ok"></i></span>
                                {/if}
                        </div>
                        {/form_field}

                        <div class="form-group group-btn">
                            <button type="submit" class="btn btn_add_to_cart">{intl l="Add to cart"}</button>
                        </div>
                    </fieldset>
                </form>
                {/form}
            </section>

            <section id="product-tabs">
                <ul class="nav nav-tabs" role="tablist">
                    <li class="active" role="presentation"><a id="tab1" href="#description" data-toggle="tab" role="tab">{intl l="Description"}</a></li>
                    <li role="presentation"><a id="tab2" href="#additional" data-toggle="tab" role="tab">{intl l="Additional Info"}</a></li>
                </ul>
                <div class="tab-content">
                    <div class="tab-pane active in" id="description" itemprop="description" role="tabpanel" aria-labelledby="tab1">
                        <p>{$DESCRIPTION}</p>
                    </div>
                    <div class="tab-pane" id="additional" role="tabpanel" aria-labelledby="tab2">
                        {ifloop rel="feature_value_info"}
                        <ul>
                        {loop name="feature_info" type="feature" product="{$ID}"}
                            <li> <strong>{$TITLE}</strong> :
                            {loop name="feature_value_info" type="feature_value" feature="{$ID}" product="{product attr="id"}"}
                                {$TITLE}
                            {/loop}
                            </li>
                        {/loop}
                        </ul>
                        {/ifloop}
                    </div>
                </div>
            </section>
        </article><!-- /product -->
        {/loop}
        <ul class="pager">
            <li class="previous"><a href="#">Previous product</a></li>
            <li class="next"><a href="#">Next product</a></li>
        </ul

                ></div>

    </div><!-- /.container -->
{/block}