@using System.Drawing
@using MrCMS.Helpers
@model List<MrCMS.Models.ImageSortItem>
@{ Layout = "~/Areas/Admin/Views/Shared/_LayoutPopup.cshtml";}

@using (Html.BeginForm("SortImages", "Product", FormMethod.Post, new {id = "sort-media-category"}))
{
    <fieldset>
        <legend>
            Sort Product Images
            <span class="btn-group  display-inline  pull-right">
                <button class="btn btn-primary" id="save" data-form-id="sort-media-category" data-action="save">
                    Save & Close</button>
            </span>
        </legend>

        @Html.Hidden("productId", ((MrCMS.Web.Apps.Ecommerce.Pages.Product) ViewBag.Product).Id)
        <ul id="sortable">
            @for (var i = 0; i < Model.Count; i++)
            {
                <li>
                    <div class="row">
                        <div class="col-lg-12">
                            @Html.HiddenFor(model => model[i].Id)
                            @Html.HiddenFor(model => model[i].Order)
                            <i class="glyphicon glyphicon-resize-full"></i>&nbsp;&nbsp;
                            @Model[i].Name
                            <div class="pull-right">
                                @if (Model[i].IsImage)
                                {
                                    @Html.RenderImage(Model[i].ImageUrl, new Size(100, 100))
                                }
                            </div>
                        </div>
                    </div>
                </li>
            }
        </ul>
        @Html.InfoBlock("Heads up! ", "Drag items in to the order you would like then click save.")
    </fieldset>
}
@{ Html.IncludeScript("~/Apps/Ecommerce/Areas/Admin/Content/Scripts/custom/sorting.js"); }