@model System.Collections.Generic.IList<MrCMS.Web.Apps.Ecommerce.Pages.Category>
@using System.Drawing
@using System.Linq
@using MrCMS.Helpers

<div class="container" data-paging-type="async">
    @if (Model != null && Model.Any())
    {
        <h1>Categories</h1>
        foreach (var items in Model.Chunk(4))
        {
            <div class="row">
                @foreach (var item in items)
                {
                    <div class="col-md-3 col-sm-3 col-xs-6">
                        <div class="category-con">
                            @if (!string.IsNullOrWhiteSpace(item.FeatureImage))
                            {
                                <div class="category-image">
                                    <a href="/@item.LiveUrlSegment">@RenderImage(item.FeatureImage, new Size { Width = 263, Height = 184 }, "", "", new{@class="img-responsive"})</a>
                                </div>
                            }
                            <div class="category-name">
                                <a href="/@item.LiveUrlSegment">@item.Name</a>
                            </div>
                        </div>
                    </div>
                }
            </div>
        }
        
    }
    else
    {
        <span>No categories.</span>
    }
</div>