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

<div id="content">

	<!-- Load this template's source data (essay) -->
	<koken:load>

		<!-- Add Facebook Open Graph and Twitter Cards metadata for nicer sharing -->
		<koken:head>
			<meta property="og:site_name" content="{{ site.title }}" />
			<meta property="og:title" content="{{ essay.title strip_html="true" }}" />
			<meta property="og:description" content="{{ essay.excerpt strip_html="true" }}" />
			<meta property="og:url" content="{{ essay.url }}" />
			<meta property="og:type" content="website" />
			<meta property="og:image" content="{{ essay.featured_image.presets.medium_large.url }}" />
			<meta property="og:image:width" content="{{ essay.featured_image.presets.medium_large.width }}" />
			<meta property="og:image:height" content="{{ essay.featured_image.presets.medium_large.height }}" />
			<meta name="medium" content="article" />
			<koken:not empty="profile.twitter">
				<meta name="twitter:card" content="summary_large_image" />
				<meta name="twitter:title" content="{{ essay.title truncate="70" }}" />
				<meta name="twitter:site" content="@{{ profile.twitter }}" />
				<meta name="twitter:creator" content="@{{ profile.twitter }}" />
				<meta name="twitter:description" content="{{ essay.excerpt truncate="200" strip_html="true" }}" />
				<meta name="twitter:image" content="{{ essay.featured_image.presets.medium_large.url }}" />
			</koken:not>
		</koken:head>

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

		<div class="lcol">

			<article>

				<!-- Pagination to view neighboring essays -->
				<div id="content-pag">

					<koken:next>
						<koken:link title="Read {{ essay.title }}" bind_to_key="left">&larr; {{ essay.title }}</koken:link>&nbsp;&nbsp;
					</koken:next>

					<koken:link to="essays" bind_to_key="up">View all {{ labels.essay.plural }}</koken:link>

					<koken:previous>
						&nbsp;&nbsp;<koken:link title="Read {{ essay.title }}" bind_to_key="right">{{ essay.title }} &rarr; </koken:link>
					</koken:previous>

				</div>

				<header>

	              <h2>{{ essay.title }}</h2>

	              <p>
	                  <strong>Published:</strong>
	                  <!-- Link to archive.essays.lens to view all essays published the same momth -->
	                  <koken:link to="archive" title="View all {{ labels.essay.plural case='lower' }} from this month">
	                    <!-- Display the date it was published -->
	                    <koken:time />
	                  </koken:link>
	              </p>

	            </header>

	            {{ essay.content }}

				<footer>

					<!-- Display image and info about album assigned as essay topic -->
					<koken:topics>
						<h3>Related content</h3>
						<koken:loop>
							<p>
								<koken:link title="View {{ album.title }}">
									<koken:img preset="small" />
								</koken:link>
								<br>
								<koken:link title="View {{ album.title }}">
									{{ album.title }}
								</koken:link>
								({{ album.counts.total }} images)
							</p>
						</koken:loop>
					</koken:topics>

					<!-- Publishes the link for this essay -->
					<p>
						<koken:link title="{{ essay.title }}">Permalink</koken:link>
					</p>

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

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

					<!-- Display share links -->
					<p>
						<strong>Share:</strong>
						<koken:if empty="profile.twitter"><a href="https://twitter.com/intent/tweet?text={{ essay.title url_encode="true" }}&url={{ essay.url url_encode="true" }}" title="Share {{ essay.title url_encode="true" }} on Twitter" target="_blank"><koken:else><a href="https://twitter.com/intent/tweet?text={{ essay.title url_encode="true" }}&url={{ essay.url url_encode="true" }}&via={{ profile.twitter }}" title="Share {{ essay.title url_encode="true" }} on Twitter" target="_blank"></koken:if>Twitter</a>
						<a href="https://www.facebook.com/sharer.php?u={{ essay.url url_encode="true" }}" title="Share {{ essay.title url_encode="true" }} on Facebook" target="_blank">Facebook</a>
						 <a href="http://www.tumblr.com/share/photo?source={{ essay.featured_image.presets.medium_large.url url_encode="true" }}&caption=%3Cp%3E%3Cstrong%3E%3Ca href=&quot;{{ essay.url url_encode="true" }}&quot; title=&quot;{{ essay.title url_encode="true" }}&quot;%3E{{ essay.title url_encode="true" }}%3C/a%3E%3C%2Fstrong%3E%3C%2Fp%3E%3Cp%3E{{ essay.excerpt url_encode="true" }}%3C%2Fp%3E&click_thru={{ essay.url url_encode="true" }}" class="share-tumblr" title="Share {{ essay.title url_encode="true" }} on Tumblr" target="_blank">Tumblr</a>
						<a href="https://plus.google.com/share?url={{ essay.url url_encode="true" }}" title="Share {{ essay.url url_encode="true" }} on Google+" target="_blank">Google+</a></li>
					</p>

				</footer>


				<!-- Display discussions or other data if enabled via a plugin (eg, our Disqus plugin) -->
				<koken:discussion>

					<h3>Comments</h3>

					{{ discussion }}

				</koken:discussion>

			</article>

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

		<div class="rcol">

			<aside>

				<!-- Display links to other essays in this category -->
				<koken:categories>
				    <koken:loop>
				        <h3>Other {{ labels.essay.plural case="lower" }} in {{ category.title }}</h3>
				        <koken:load source="essays" filter:category="{{ category.id }}">
				            <koken:loop>
			                    <koken:link title="Read {{ essay.title }}">
			                        {{ essay.title }}
			                    </koken:link>
			                    <br>
				            </koken:loop>
				        </koken:load>
				    </koken:loop>
				</koken:categories>

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

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

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

			</aside>

		</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 essay found. Create one in Text.
			</koken:note>

	</koken:load>

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

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