@using System.Drawing
@using MrCMS.Helpers
@model System.Collections.Generic.List<MrCMS.Models.ImageSortItem>
@{
    ViewBag.Title = "Sort Files";
    Layout = "~/Areas/Admin/Views/Shared/_Layout.cshtml";
}
@section JavaScriptBlock
{
    <script type="text/javascript">
        $(document).ready(function () {
            $("#sortable").sortable({
                update: function (event, ui) {
                    $('#sortable li').each(function (index, domElement) {
                        $(domElement).find('[name*="Order"]').val(index);
                    });
                }
            });
        });
    </script>
}
<form method="POST" id="sort-media-category">
    <fieldset>
        <legend>@Resource("Admin Media Sort Files", "Sort files")
            <span class="btn-group  display-inline  pull-right">
                @Html.ActionLink(Resource("Admin Media Back To Category","Back to folder"), "Show", new { id = ViewData["categoryId"] }, new { @class = "btn btn-default" })
                <button class="btn btn-primary">
                    @Resource("Save")</button>
            </span>
        </legend>

        <ul id="sortable">
            @for (int 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>
    </fieldset>
</form>

