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

<div id="content">

	<!-- Load this template's source data (contents) and limit for pagination -->
	<koken:load limit="50">

		<!-- Display breadcrumb navigation -->
        <div id="bread">
          <koken:breadcrumbs />
        </div>

		<div class="lcol">

			<!-- Loop over loaded archival data and render content with each pass -->
			<koken:loop>

				<!-- wrapper used for keyboard navigation targetting -->
				<div class="item">

					<!-- Display each item's title, fallback to file name if empty, link to content.lens -->
					<h2>
						<koken:link title="View {{ content.title | content.filename }}">
							{{ content.title | content.filename }}
						</koken:link>
					</h2>

					<!-- Displayed if the asset is an image -->
					<koken:content_image>

						<!-- Display image title, fallback to file name if empty, link to content.lens -->
						<koken:link title="View {{ content.title | content.filename }}">
							<koken:img />
						</koken:link>

					</koken:content_image>

					<!-- Displayed if the asset is a video -->
					<koken:content_video>

						<!-- Load the video -->
						<koken:video />

					</koken:content_video>

					<p>
						<!-- Link to archive.contents.lens to view all content uploaded the same month -->
						<koken:link to="archive" title="View all {{ labels.content.plural case='lower' }} from this month">
							<!-- Publish the date it was captured -->
							<koken:time />
						</koken:link> /
						{{ content.caption }}
					</p>


					<p>
						<strong>Uploaded:</strong> {{ content.uploaded_on }}
					</p>

					<!-- Publish the asset's categories. Links to archive.contents.lens -->
                    <koken:categories>
                    <p>
                         <strong>{{ labels.category.plural }}:</strong>
                         <koken:loop separator=", ">
							  <koken:link title="View all {{ labels.content.plural case='lower' }} in {{ category.title }}">
                                   {{ category.title }}
                              </koken:link>
                         </koken:loop>
                    </p>
                    </koken:categories>

                    <!-- Publish the asset' tags. Links to archive.contents.lens -->
                    <koken:tags>
                      <p>
                           <strong>{{ labels.tag.plural }}:</strong>
                           <koken:loop separator=" ">
							  <koken:link title="View all {{ labels.content.plural case='lower' }} in #{{ tag.title }}">
                                     #{{ tag.title }}
                                </koken:link>
                           </koken:loop>
                      </p>
                    </koken:tags>

				</div>

			</koken:loop>

			<!-- Display pagination links -->
			<p>
				<koken:include file="inc/pagination.html" />
			</p>

		</div> <!-- close .lcol -->

		<div class="rcol">

            <!-- Links to view content by publish date in archive.contents.lens -->
	       <h3>View {{ labels.content.plural case="" }} by date</h3>
	        <koken:dates limit_to="content">
	          <koken:select label="Select month" />
	        </koken:dates>

	       <!-- Links to view content by category in archive.contents.lens -->
	        <koken:categories limit_to="essays" order_by="content_count">
	          <h3>View {{ labels.content.plural case="lower" }} by {{ labels.category.singular case="lower" }}</h3>
	          <koken:loop>
				<koken:link title="View all {{ labels.content.plural case='lower' }} in {{ category.title }}">
	              {{ category.title }} ({{ category.counts.total }})
	            </koken:link>
	            <br>
	          </koken:loop>
	        </koken:categories>

	        <!-- Links to view content by tag in archive.contents.lens -->
	         <koken:tags limit_to="content" order_by="content_count">
	         <h3>View {{ labels.content.plural case="lower" }} by {{ labels.tag.singular case="lower" }}</h3>
	         <koken:loop>
				<koken:link title="View all {{ labels.content.plural case='lower' }} in #{{ tag.title }}">
	              {{ tag.title }} ({{ tag.counts.total }})
	            </koken:link>
	            <br>
	         </koken:loop>
	       </koken:tags>

		</div> <!-- close .rcol -->

		<!-- Fallback content if no data was loaded by koken:load -->
		<koken:else>

			<!-- Display fallback message in Site editor only -->
			<koken:note>
				No content found
			</koken:note>

	</koken:load>

</div> <!-- close #content -->

<!-- Turn on keyboard scrolling (left/right arrow keys) for items -->
<koken:keyboard_scroll element="div.item" />

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