<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="t" tagdir="/WEB-INF/tags" %>
<t:header />

<t:navbar />

<script type="text/javascript">
$(function(){
    $('.image-grid').imagesLoaded(function(){
        $('.grid').masonry({
            itemSelector: '.grid-item',
            columnWidth: '.grid-item',
        });
    });
});
</script>

<div class="content">

    <div class="gallery col-center col-md-11">
        <div class="row">
            <div class="grid folder-grid">
                <c:forEach items="${subfolders}" var="subfolder">
                    <div class="grid-item folder-thumb col-md-2 col-sm-3 col-xs-4">
                        <img class="img-responsive" src="${subfolder.getThumbnailUrl()}" alt="${subfolder.getName()}" />
                    </div>
                </c:forEach>
            </div>

            <hr>
        </div>
        <div class="row">
            <div class="grid image-grid">
                <c:forEach items="${media}" var="item">
                    <div class="grid-item photo-thumb col-md-3 col-sm-6 col-xs-12">
                        <img class="img-responsive" src="${item.getUrl()}"/>
                    </div>
                </c:forEach>
            </div>
        </div>
    </div> <!-- /gallery -->

</div> <!-- /content -->

<t:footer />
