{% extends "index.html" %}

{% block title %}{{ config.title }} — {{ page.title }}{% endblock title %}

{% block content %}
<main class="recipe">
	
	<h2>{{ page.title | upper }}</h2>
	<hr>
	{% for asset in page.assets %}
		{% if asset is matching("[img.](jpg|png)$") %}
			<a href="/{{ asset }}"><img src="{{ resize_image(path=asset, width=900, height=400, op="fill") }}" alt="Náhled"></a>
			{% break %}
		{% endif %}
	{% endfor %}
	
	{% if page.extra.image %}<img src="{{ page.extra.image }}" alt="Náhled">{% endif %}
	<div class="meta">
		{% if page.extra.portions %}<span class="tag">Porce: <strong>{{ page.extra.portions }}</strong></span>{% endif %}
		{% if page.extra.time %}<span class="tag">Doba přípravy: <strong>{{ page.extra.time }} min</strong></span>{% endif %}
		{% if page.extra.source %}<span class="tag">Zdroj: <strong>{{ page.extra.source }}</strong></span>{% endif %}
	</div>
	
	{{ page.content | safe }}
	
	<hr>

	{% if page.taxonomies.kategorie %}
	{% set categories = page.taxonomies.kategorie %}
	<div>
		Kategorie &ndash; 
		{% for term in categories %}
			<span class="tag"><a href="{{ get_taxonomy_url(kind="kategorie", name=term) | safe }}">{{ term | capitalize() }}</a></span>
		{% endfor %}
	</div>
	{% endif %}

	{% if page.taxonomies.tagy %}
	{% set tags = page.taxonomies.tagy %}
	<div>
		Tagy &ndash; 
		{% for term in tags %}
		 <span class="tag"><a href="{{ get_taxonomy_url(kind="tagy", name=term) | safe }}">{{ term | capitalize() }}</a></span>
		{% endfor %}
	</div>
	{% endif %}

</main>
{% endblock content %}

{% block script %}
<script>
	let list_items = document.querySelectorAll('ol li');
	for(let i=0; i<list_items.length; i++){
		list_items[i].addEventListener('click', function(){ this.classList.toggle("completed"); }, false);
	}
</script>
{% endblock script %}