{% extends "base.html" %}

{% block title %}{{ config.title }} — {{ page.title }}{% endblock title %}
{% block head_extra %}
	<meta property="og:title" content="{{ page.title }}">
	<meta property="og:url" content="{{ config.base_url }}">
	<meta property="og:image" content="{{ macro::recipe_preview_image(recipe=page) }}">
	<meta property="og:type" content="article">
{% endblock head_extra %}

{% block content %}
<main class="recipe">
	<h2>{{ page.title | upper }}</h2>
	<hr>
	{{ macro::recipe_image() }}
	
	<div class="meta">
		{{ macro::recipe_meta() }}
	</div>
	
	{{ page.content | safe }}
	
	<hr>

	{{ macro::recipe_taxonomies() }}
</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);
	}

	let preview_image = document.getElementById('preview-image');
	let fullsize_image = document.getElementById('fullsize-image');
	preview_image.addEventListener('click', function(){ fullsize_image.classList.add("visible"); }, false);
	fullsize_image.addEventListener('click', function(){ fullsize_image.classList.remove("visible"); }, false);
</script>
{% endblock script %}