@using System
@using System.Drawing
@using MrCMS.Helpers
@model MrCMS.Web.Apps.Ecommerce.Models.FeaturedCategoriesViewModel
@if (Model != null)
{
    <div class="margin-top-70-bottom-30 grey-border-top">
        <div class="container">
            <div class="margin-top-bottom-10">
                <div class="row">
                    <div class="col-md-12">
                        <span class="title">
                            @if (!String.IsNullOrEmpty(Model.Title))
                            {
                            @Model.Title
                            }
                        </span>
                    </div>
                </div>
                    @foreach (var itemRow in Model.Categories.Chunk(4))
                    {
                        var i = 0;
                        <div class="row">
                            @foreach (var item in itemRow)
                            {
                                i++;
                                <div class="col-lg-3 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 = 184, Height = 184 }, null, null, new { @class = "img-responsive center-block" })
                                                </a>
                                            </div>
                                        }
                                        <div class="category-name">
                                            <a href="/@item.LiveUrlSegment" title="@item.Name">@item.Name</a>
                                        </div>
                                    </div>
                                    @*@if (!string.IsNullOrWhiteSpace(item.Abstract))
                                    {
                                        <p>@item.Abstract</p>
                                    }*@
                                </div>
                                if (i % 2 == 0)
                                {
                                    <div class="clearfix visible-xs"></div>
                                }
                            }
                        </div>
                    }
            </div>
        </div>
    </div>
}