{% set htmlParameters = {
		'isStyleguide' : true,
		'bodyClass': '',
		'rootPath' : '',
		'pageName' : 'Index'
	}
%}

{% include "general/_includes/_html_head.njk" %}

<section>
	<div class="container">
		<article>
			<h1>{{CONFIG.PROJECT_TITLE}} Templates {{VERSION_INFO.current_version}}</h1>
			<br>

			<h2>Styleguides</h2><br><br>
			{% for styleguide in STYLEGUIDES %}
				<a class="a-button" href="{{styleguide.name}}/index.html"><span> {{styleguide.name}} styleguide</span></a><br><br>
				<h4>Pages templates: </h4>
				{% for template in styleguide.pages %}
					<li><a href="{{styleguide.name}}/pages/{{ template.path }}.html">{{ template.name }}</a></li>
				{% endfor %}
				<br>
				<hr/>
				<br>
			{% endfor %}
			<br><br>
			<h3>Changelog</h3>
			<ul>
				{% for log in VERSION_INFO.changelog %}
					<li><strong>{{ log.version }}:</strong>&emsp;{{ log.message }}</li>
				{% endfor %}
			</ul>
		</article>
		<br><hr/><br><br>
		<article>
			<h1>CDN</h1>
			<p>
				The build stylesheets and assets can be found on a CDN server:
			</p>
			<div class="styleguide__highlight-box">
				<code>
					{{ CONFIG.CDN_URL }}/dist/latest/...<br>
					{{ CONFIG.CDN_URL }}/dist/[version-number]/...
				</code>
			</div>
			<p>
				the following file structure is available there:
			</p>
			<ul>
				<li><code>css/base.min.css</code> &emsp; The mobile css-code</li>
				<li><code>fonts/*</code> &emsp; the fonts that are referenced from the css-file</li>
				<li><code>img/*</code> &emsp; optimized images, as referenced in the styleguide or css</li>
				<li><code>js/*</code> &emsp; javascript files if needed</li>
				<li><code>apple-touch-icon-precomposed.png</code></li>
				<li><code>favicon.ico</code></li>
				<li><code>tile.jpg</code></li>
				<li><code>tile-large.jpg</code></li>
			</ul>
			<p>
				For example put the following code in the <code>head</code> of your project to apply the styling
			</p>
			<div class="styleguide__highlight-box">
				<code class="js-encode-html prettyprint">
					<link rel="stylesheet" href="{{ CONFIG.CDN_URL }}/dist/{{ VERSION_INFO.current_version }}/css/base.min.css"/>
				</code>
			</div>

		</article>
	</div>
</section>

<script>
	$('.styleguide__highlight-box').each(function(){
		if($(this).height() > 150){
			$(this).css({"height": "50px" })
			$(this).append('<a href="#" class="js-show-code">show code</a>');
		}else{
			$(this).addClass("is-open");
		}
	});

	$('.js-show-code').click(function(e){
		e.preventDefault();
		if($(this).parent().hasClass("is-open")){
			$(this).parent().animate({"height": "50px"}, 200);
			$(this).html("show code");
		}else{
			$(this).parent().animate({"height": $(this).parent().find("code").height() + 44 + "px"}, 200);
			$(this).html("hide code");
		}

		$(this).parent().toggleClass("is-open");
	});
</script>

{% include "general/_includes/_html_footer.njk" %}