@model ProjectExplorer.Web.ViewModels.ProjectDetailViewModel
@{
}
<section id="imagery">
    <h3>Project Imagery</h3>
    @if (@Model.OpenAssetImagesVm.OpenAssetImages.Any())
    {
        <a href="@Model.OpenAssetImagesVm.OpenAssetProjectURL" target="_blank">Click here to find, share and download more digital assets</a>
    }
    <!-- The Bootstrap Image Gallery lightbox, should be a child element of the document body -->
    <div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls">
        <!-- The container for the modal slides -->
        <div class="slides"></div>
        <!-- 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" style="max-height: 500px; min-height: 400px;"></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" onclick="location.href = '@Model.OpenAssetImagesVm.OpenAssetProjectURL';">
                            Info
                            <i class="glyphicon glyphicon-download-alt"></i>
                        </button>
                        <button type="button" class="btn btn-primary next">
                            Next
                            <i class="glyphicon glyphicon-chevron-right"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @if (Model.OpenAssetImagesVm.OpenAssetImages.Any())
    {
        <div style="margin-top: 17px;">
            <div id="links">
                @foreach (var item in Model.OpenAssetImagesVm.OpenAssetImages)
                {
                    <a href="@item.URL" title="@item.FileName" data-gallery>
                        <img src="@item.Thumbnail" alt="@item.FileName" class="img-thumbnail" style="margin-bottom:7px;" />
                    </a>
                }
            </div>
        </div>
    }
    else
    {
        <p>There are no images assigned to this project in OpenAsset.</p>
    }
    <div>
        @{
            var grid = new WebGrid(
                        canPage: false,
                        canSort: false,
                        ajaxUpdateContainerId: "grid");

            grid.Bind(Model.OpenAssetImagesVm.OpenAssetImages, autoSortAndPage: false);

            @grid.GetHtml(htmlAttributes: new { id = "grid" },
            fillEmptyRows: false,
            mode: WebGridPagerModes.All,
            columns: grid.Columns());
        }
    </div>
</section>

<button type="button" class="btn btn-primary" onclick="location.href = '@Model.OpenAssetImagesVm.OpenAssetProjectURL';">

@model ProjectExplorer.Web.ViewModels.ProjectDetailViewModel
@{
    int i = 0;
}
<section id="imagery">
    <h3>Project Imagery</h3>
    @if (@Model.OpenAssetImagesVm.OpenAssetImages.Any())
    {
        <a href="@Model.OpenAssetImagesVm.OpenAssetProjectURL" target="_blank">Click here to find, share and download more digital assets</a>
    }
    <!-- The Bootstrap Image Gallery lightbox, should be a child element of the document body -->
    <div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls">
        <!-- The container for the modal slides -->
        <div class="slides"></div>
        <!-- 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" style="max-height: 500px; min-height: 400px;"></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" onclick="location.href = '@Model.OpenAssetImagesVm.OpenAssetImages[i].InfoURL'";>
                            Info
                            <i class="glyphicon glyphicon-download-alt"></i>
                        </button>
                        <button type="button" class="btn btn-primary next">
                            Next
                            <i class="glyphicon glyphicon-chevron-right"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @if (Model.OpenAssetImagesVm.OpenAssetImages.Any())
    {
        <div style="margin-top: 17px;">
            <div id="links">
                @foreach (var item in Model.OpenAssetImagesVm.OpenAssetImages)
                {
                    <a href="@item.URL" title="@item.FileName" data-gallery>
                        <img src="@item.Thumbnail" alt="@item.FileName" class="img-thumbnail" style="margin-bottom:7px;" />
                    </a>
                    <p>@item.InfoURL</p>
                    <p>@i++</p>
                    i++;

                }
            </div>
        </div>
    }
    else
    {
        <p>There are no images assigned to this project in OpenAsset.</p>
    }
    <div>
        @{
            var grid = new WebGrid(
                        canPage: false,
                        canSort: false,
                        ajaxUpdateContainerId: "grid");

            grid.Bind(Model.OpenAssetImagesVm.OpenAssetImages, autoSortAndPage: false);

            @grid.GetHtml(htmlAttributes: new { id = "grid" },
            fillEmptyRows: false,
            mode: WebGridPagerModes.All,
            columns: grid.Columns());
        }
    </div>
</section>

@Model.OpenAssetImagesVm.OpenAssetImages[i].InfoURL

@foreach (var item in Model.OpenAssetImagesVm.OpenAssetImages)
{
    <a href="@item.URL" title="@item.FileName" data-gallery>
       <img src="@item.Thumbnail" alt="@item.FileName" class="img-thumbnail" style="margin-bottom:7px;" />
    </a>
    @i++;
}