@using System.Drawing
@using MrCMS.Helpers
@model MrCMS.Web.Apps.Galleries.Pages.Gallery
<h1>@Editable(Model, page => page.Name)</h1>
@Editable(Model, page => page.BodyContent, true)
<div id="links">
    @{
        foreach (var result in Model.MediaGallery.Files.Where(file => file.IsImage()).OrderBy(x => x.DisplayOrder).Chunk(4))
        {
            <div class="row margin-top-10">
                @foreach (var mediaFile in result)
                {
                    <div class="col-lg-3">
                        <a href="@mediaFile.FileUrl" data-gallery>
                            @RenderImage(mediaFile.FileUrl, new Size { Width = 250, Height = 250 })
                        </a>
                    </div>
                }
            </div>
        }
    }
</div>
@{
    Html.IncludeCss("~/Apps/Galleries/Content/blueimp-Bootstrap-Image-Gallery/css/blueimp-gallery.min.css");
    Html.IncludeCss("~/Apps/Galleries/Content/blueimp-Bootstrap-Image-Gallery/css/bootstrap-image-gallery.min.css");
    Html.IncludeScript("~/Apps/Galleries/Content/blueimp-Bootstrap-Image-Gallery/js/jquery.blueimp-gallery.min.js");    
    Html.IncludeScript("~/Apps/Galleries/Content/blueimp-Bootstrap-Image-Gallery/js/bootstrap-image-gallery.min.js");
    
}
@section JavascriptBlockInclude {
    <!-- this needs to be rendered here as it is required to be a child of <body> -->
    <div id="blueimp-gallery" class="blueimp-gallery">
        <!-- The container for the modal slides -->
        <div class="slides"></div>
        <!-- Controls for the borderless lightbox -->
        <h3 class="title"></h3>
        <a class="prev">‹</a>
        <a class="next">›</a>
        <a class="close">×</a>
        <a class="play-pause"></a>
        <ol class="indicator"></ol>
        <!-- The modal dialog, which will be used to wrap the lightbox content -->
        <div class="modal fade">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" aria-hidden="true">&times;</button>
                        <h4 class="modal-title"></h4>
                    </div>
                    <div class="modal-body next"></div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default pull-left prev">
                            <i class="glyphicon glyphicon-chevron-left"></i>
                            Previous
                   
                        </button>
                        <button type="button" class="btn btn-primary next">
                            Next
                       
                            <i class="glyphicon glyphicon-chevron-right"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
}