@model MrCMS.Paging.IPagedList<MrCMS.Web.Apps.Ecommerce.Pages.Product>
@using System.Linq
@using MrCMS.Helpers
@using MrCMS.Web.Apps.Ecommerce.Models
@{
    var query = ViewData["query"] as ProductSearchQuery ?? new ProductSearchQuery();
    var sortByOptions = ViewData["sort-by-options"] as List<SelectListItem> ?? new List<SelectListItem>();
    var perPageOptions = ViewData["per-page-options"] as List<SelectListItem> ?? new List<SelectListItem>();
}
<div id="product-results-container">
    <div id="loading-message" style="display: none; position: fixed; top: 50%; left: 50%; z-index: 1;">
        <img src="/Apps/Ecommerce/Content/Images/ajax-loader.gif" alt="Loading" />
    </div>
    <div id="products-operations" class="grey-border-bottom">
        <div class="row margin-bottom-10">
            <div class="col-sm-4 col-md-4">
                <div class="row">
                    <div class="col-sm-3 line-height-30">
                        @Resource("View")
                    </div>
                    <div class="col-sm-9 text-right">
                        <div class="btn-group">
                            <button class="btn @(query.ProductSearchView == ProductSearchView.Grid ? "active" : string.Empty)" data-view="@(ProductSearchView.Grid)" data-value="0">
                                <i class="fa fa-th-large"></i>
                            </button>
                            <button class="btn @(query.ProductSearchView == ProductSearchView.List ? "active" : string.Empty)" data-view="@(ProductSearchView.List)" data-value="1">
                                <i class="fa fa-align-justify"></i>
                            </button>
                        </div>
                    </div>
                </div>
                <div class="clearfix"></div>
            </div>
            <div class="col-sm-4 col-md-4">
                <div class="col-md-3 col-sm-4 col-xs-3 line-height-30 padding-0">
                    @Resource("Sort by")
                </div>
                <div class="col-md-9 col-sm-8 col-xs-9 margin-bottom-10 padding-0" id="sorting">
                    @Html.DropDownList("SortBy", sortByOptions, new {@class = "form-control"})
                </div>
                <div class="clearfix"></div>
            </div>
            <div class="col-sm-4 col-md-4">
                <div class="col-md-3 col-sm-4 col-xs-3 line-height-30 padding-0">
                    @Resource("Show")
                </div>
                <div class="col-md-9 col-sm-8 col-xs-9 margin-bottom-10 padding-0" id="show">
                    @Html.DropDownList("PageSize", perPageOptions, new {@class = "form-control"})
                </div>
                <div class="clearfix"></div>
            </div>
        </div>
    </div>
    <div class="clearfix"></div>

    <div id="stats">
        @if (Model.Any())
        {
            <div class="row padding-top-bottom-10">
                <div class="col-sm-12">
                    <small>@Resource("Showing") @(Model.PageSize > 1 ? Model.FirstItemOnPage + " - " + Model.LastItemOnPage : Model.PageNumber.ToString()) @Resource("of") @Model.TotalItemCount</small>
                </div>
            </div>
        }
    </div>
    <div id="products-wrapper">
        @if (Model.Any())
        {
            switch (query.ProductSearchView)
            {
                case ProductSearchView.Grid:
                    Html.RenderPartial("GridView", Model);
                    break;
                case ProductSearchView.List:
                    Html.RenderPartial("ListView", Model);
                    break;
            }
            <div id="products-paging">
                @Html.PageCurrentPage(Model, i => new { page = i }, PagedListRenderOptions.OnlyShowFivePagesAtATime)
            </div>
        }
        else
        {
            @Resource("No products to display, please refine your search.")
        }
    </div>
</div>
