{foreach from = $item->list item = shapeRow key = shapeId name = shapeRows}
    <div class="tiles-wrapper">
        <h3>{$shapeRow.groupImage.title|htmlspecialchars}</h3>
        <div class="group-img-container group-img-container-a">
            {math assign = 'imgWidth' equation = 'x / 2' x = $item->config.image.width} 
            {math assign = 'imgHeight' equation = 'x / 2' x = $item->config.image.height} 
            {html_image_fs
            name = $shapeRow.groupImage.image
            width = $imgWidth
            height = $imgHeight
            method = $item->config.image.resizeMethod
            alt = $shapeRow.groupImage.title
            title = $shapeRow.groupImage.title
            itemprop = "image"
            }
        </div>
        <table id="group-{$shapeId}" class="table table-striped table-condensed table-hover">
        <thead>
            <tr>
                <td>
                    <label for="color-dropdown-{$shapeId}" style="display:none;">Color:</label>
                    <select id="color-dropdown-{$shapeId}" name="color-dropdown-{$shapeId}" style="display:none;">
                    {foreach from = $shapeRow.colors item = colorId name = productColor}
                        <option value="{$colorId}" style="background-color: {$item->category.colors[$colorId].bgColor}; color: {$item->category.colors[$colorId].titleColor}">{$item->category.colors.$colorId.title}</option>
                    {/foreach}
                    </select>
                </td>
                {assign var = 'countColors' value = $shapeRow.colors|@count}
                {math assign = 'tdWidth' equation = '100 / (x + 1)' x = $countColors}                
                {foreach from = $shapeRow.colors item = colorId name = productColor}
                    <td class="color-{$colorId} color" style="width:{$tdWidth}%;">
                        <div class="category-color" style="background-color: {$item->category.colors[$colorId].bgColor}; color: {$item->category.colors[$colorId].titleColor}"><span>{$item->category.colors.$colorId.title}</span></div>
                    </td>
                {/foreach}
            </tr>
        </thead>
        <tbody>
            {foreach from = $shapeRow.sizes item = sizeId name = 'row'}
            <tr {if $smarty.foreach.row.index is odd}class="odd"{/if}>
                <td>
                    {$item->category.sizes.$sizeId.title|htmlspecialchars}
                </td>
                {foreach from = $shapeRow.colors item = colorId}
                 <td class="color-{$colorId}">
                     {assign var = 'product' value = $shapeRow.list.$colorId.$sizeId}
                     {if $product}
                     <div itemscope itemtype="http://schema.org/Product">

                         <span class="price" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
                            <link itemprop="availability" href="http://schema.org/InStock" />
                            <meta itemprop="price" content="{$product.price|money}" />
                            <meta itemprop="priceCurrency" content="USD" />
                            ${$product.price|money}
                        </span>
                         <a href="#" id="add-product-{$product.id}" class="add-to-cart"><img src="images/btn-add-cart-small.png" alt="Buy" title="Buy | {$product.sku|truncate|htmlspecialchars} | {$item->category.colors.$colorId.title} | {$product.title|truncate:67|htmlspecialchars}"></a>
                         <script>
                             $(function() {literal}{{/literal}
                                 app.AjaxCart.initAddToCartButton($('#add-product-{$product.id}'), {$product.id});
                             });
                         </script>
                     </div>
                     {else}
                         &mdash;
                     {/if}
                </td>
                {/foreach}
            </tr>
            {/foreach}           
        </tbody>
        <tfoot class="hidden-phone hidden-tablet">
            <tr>
                <td>&nbsp;</td>
                {assign var = 'countColors' value = $shapeRow.colors|@count}
                {math assign = 'tdWidth' equation = '100 / (x + 1)' x = $countColors}                
                {foreach from = $shapeRow.colors item = colorId name = productColor}
                    <td class="color-{$colorId} color" style="width:{$tdWidth}%; text-align:center;">
                        <div class="category-color category-color-bottom" style="background-color: {$item->category.colors[$colorId].bgColor}; color: {$item->category.colors[$colorId].titleColor}"></div>
                    </td>
                {/foreach}                    
            </tr>         
        </tfoot>
        </table>
    </div>
    {if !$smarty.foreach.shapeRows.last}<hr class="purple">{/if}
{/foreach}