{{#extend "lyt-default"}}
	{{#content "styles" mode="append"}}
		<link rel="stylesheet" href="{{@root.assets}}css/docs.css"/>
		<link rel="stylesheet"
		      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>
	{{/content}}
	{{#content "main"}}
		<div class="docs">

			<div class="docs__sidebar">
				<img src="https://www.veams.org/img/svg/icons/veams-std-invert.svg">
				{{> c-sitemap }}
			</div>

			<div class="docs__main">
				<div class="docs__main-inner">
					<div class="docs__header">
						<div class="is-docs-inner">
							<h1 class="docs__headline">{{uppercase @root.currentPage.filename}} <span>({{this.type}}
								)</span></h1>
							<h3 class="docs__subline">
								<i class="is-docs-icon fa fa-file"></i>
								<span>
									{{@root.currentPage.dirname}}
								</span>
							</h3>
						</div>
					</div>
					<div class="docs__section is-bg-default">
						<div class="is-docs-inner">
							<div class="docs__section-header">
								<h2 class="docs__section-headline">
									<i class="fa fa-desktop" aria-hidden="true"></i>
									Demo Section
								</h2>
								<p class="docs__section-description">Each variation will be presented in the following
									section.</p>
							</div>

							<div class="docs__section-content">
								{{#if variations}}
									{{#each variations}}
										<h3>{{this.docs.variationName}}</h3>
										{{{yield}}}
									{{/each}}
								{{else}}
									{{{yield}}}
								{{/if}}
							</div>
						</div>

					</div>


					{{#ifExists (buildPath @root.currentPage.dirname "README.md" goUp=1)}}
						<div class="docs__section is-bg-invert">
							<div class="is-docs-inner">
								<div class="docs__section-header">
									<h2 class="docs__section-headline">
										<i class="is-docs-icon fa fa-file-text-o"></i>
										Readme
									</h2>
								</div>
								<div class="docs__section-content is-docs-rte">
									{{{markdown (buildPath @root.currentPage.dirname "README.md" goUp=1) }}}
								</div>
							</div>

						</div>
					{{else}}
						<div class="docs__section is-bg-invert">
							<div class="is-docs-inner">
								<div class="docs__section-header">
									<h2 class="docs__section-error">
										<i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
										Currently there is no README file!
									</h2>
								</div>
							</div>
						</div>
					{{/ifExists}}

					<div class="docs__section">
						<div class="is-docs-inner">
							<div class="docs__section-header">
								<h2 class="docs__section-headline">
									<i class="is-docs-icon fa fa-file-text-o"></i>
									Templates
								</h2>
							</div>

							<h3 class="docs__section-hl-small">{{@root.currentPage.filename}}</h3>

							<div class="docs__section-content is-docs-rte">
								{{#getData from=@root.currentPage.filename typeof="partial"}}
									{{#highlight "hbs"}}
										{{{this.parsed.content}}}
									{{/highlight}}
								{{/getData}}

								{{#if this.subTemplates}}
									{{#each this.subTemplates}}
										<h3>{{this}}</h3>
										{{#highlight "hbs"}}
											{{{embeding (buildPath @root.currentPage.dirname this) }}}
										{{/highlight}}
									{{/each}}
								{{/if}}
							</div>
						</div>
					</div>

					{{#if this.contextData}}
						<div class="docs__section is-bg-invert">
							<div class="is-docs-inner">
								<div class="docs__section-header">
									<h2 class="docs__section-headline">
										<i class="is-docs-icon fa fa-file-text-o"></i>
										Data File
									</h2>
								</div>
								<div class="docs__section-content is-docs-rte">
									{{#ifExists
											(buildPath @root.currentPage.dirname (concat (concat 'data/' this.contextData) ".json") goUp=1)}}
										{{#highlight "json"}}
											{{{embeding
													(buildPath @root.currentPage.dirname (concat (concat 'data/' this.contextData) ".json") goUp=1) }}}
										{{/highlight}}
									{{/ifExists}}
								</div>
							</div>
						</div>
					{{else}}
						<div class="docs__section is-bg-invert">
							<div class="is-docs-inner">
								<div class="docs__section-header">
									<h2 class="docs__section-error">
										<i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
										Currently there is no Data file!
									</h2>
								</div>
							</div>
						</div>
					{{/if}}

					{{#if this.scssFiles}}
						<div class="docs__section">
							<div class="is-docs-inner">
								<div class="docs__section-header">
									<h2 class="docs__section-headline"><i class="is-docs-icon fa fa-file-text-o"></i>
										Styles
									</h2>
								</div>
								<div class="docs__section-content is-docs-rte">
									{{#each this.scssFiles}}
										<h3>{{this}}</h3>
										{{#highlight "scss"}}
											{{{embeding (buildPath @root.currentPage.dirname (concat 'styles/' this) goUp=1) }}}
										{{/highlight}}
									{{/each}}
								</div>
							</div>
						</div>

					{{/if}}
					<div class="docs__section">
						<div class="is-docs-inner">
							<div class="docs__section-header">
								<h2 class="docs__section-headline">
									<i class="is-docs-icon fa fa-file-text-o"></i>
									HTML Output
								</h2>
							</div>
							<div class="docs__section-content is-docs-rte">
								{{#if variations}}
									{{#each variations}}
										{{#highlight "html"}}
											{{#beautifyHTML}}
												{{{yield}}}
											{{/beautifyHTML}}
										{{/highlight}}
									{{/each}}
								{{else}}
									{{#highlight "html"}}
										{{#beautifyHTML}}
											{{{yield}}}
										{{/beautifyHTML}}
									{{/highlight}}
								{{/if}}
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	{{/content}}
{{/extend}}