<koken:include file="inc/header.html" />

<koken:asset file="js/grid.js" />

<koken:load limit="20" infinite="true">

	<div id="grid" class="row">

		<div class="four column columns"></div>

		<div class="four column columns"></div>

		<div class="four column columns"></div>

		<div class="four column columns"></div>

	</div>

	<koken:loop>

		<div class="item content">

			<koken:link title="View {{ content.title | content.filename }}">

				<koken:img lazy="true" />

			</koken:link>

			<koken:if true="settings.show_content_text">

				<div class="info">

					<koken:if true="settings.show_content_title">

						<h4>
							<koken:link title="View {{ content.title | content.filename }}">
								{{ content.title | content.filename }}
							</koken:link>
						</h4>

					</koken:if>

					<koken:if true="settings.show_content_caption">

						{{ content.caption truncate="250" }}

					</koken:if>

					<koken:if true="settings.show_content_date">

						<p class="event_meta">
							<koken:link to="archive">
								<koken:time relative="{{ settings.show_content_date_relative }}" />
							</koken:link>
						</p>

					</koken:if>

				</div>

			</koken:if>

		</div>

	</koken:loop>

	<div id="infinite_load_msg">
		<span>Loading more...</span>
	</div>

	<script>
		$(window).on('k-infinite-loading', function() {
			$('#infinite_load_msg').show();
		});

		$(window).on('k-infinite-loaded', function() {
			$('#infinite_load_msg').hide();
		});
	</script>

<koken:else>

	<koken:note>

		<strong>No content found.</strong> Upload some in the Library.

	</koken:note>

	<br>
	<br>

</koken:load>

<koken:include file="inc/footer.html" />