{foreach from = $item->list item = sizeRow key = sizeId name = sizeRows}
    <div class="tiles-wrapper">
        <h3>{$item->category.title|htmlspecialchars}</h3>
        <div class="group-img-container group-img-container-b">
            {foreach from = $sizeRow.groupImage  item = imageItem}
                <div class="span4">
                {html_image_fs
                name = $imageItem.image
                width = 250
                height = 250
                alt = $imageItem.title
                title = $imageItem.title
                itemprop = "image"
                }
                </div>
            {/foreach}
            <div class="span4">
                These In-stock signs are<br />
                {$sizeRow.size.sizeTitle|htmlspecialchars}
            </div>
        </div>
        <table id="group-{$sizeId}" class="table table-striped table-condensed table-hover">
        <thead>
            <tr>
                <td>
                    <label for="color-dropdown-{$sizeId}" style="display:none;">Color:</label>
                    <select id="color-dropdown-{$sizeId}" style="display:none;">
                        {foreach from = $sizeRow.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 = $sizeRow.colors|@count}
                {math assign = 'tdWidth' equation = '100 / (x + 1)' x = $countColors}
                {foreach from = $sizeRow.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>
            <tr>
            {foreach from = $sizeRow.shapes item = shapeId name = 'row'}
                <tr {if $smarty.foreach.row.index is odd}class="odd"{/if}>
                    <td>
                        {html_image_fs
                        name = $item->category.shapes.$shapeId.image
                        width = 125
                        height = 125
                        alt = $item->category.shapes.$shapeId.title
                        title = $item->category.shapes.$shapeId.title
                        itemprop = "image"
                        }
                    </td>
                    {foreach from = $sizeRow.colors item = colorId}
                        <td class="color-{$colorId}">
                            {assign var = 'product' value = $sizeRow.list.$colorId.$shapeId}
                            {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 = $sizeRow.colors|@count}
                    {math assign = 'tdWidth' equation = '100 / (x + 1)' x = $countColors}                
                    {foreach from = $sizeRow.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.sizeRows.last}<hr class="purple">{/if}
{/foreach}