export default {
	setup() {
		const { ref, computed } = Vue;

		const recipes = ref(null);

		fetch("https://hub.xpub.nl/soupboat/cookbook/get")
			.then((res) => res.json())
			.then((data) => (recipes.value = data));

		const style = function (index) {
			return {
				transform: `translate(${index * 10}px, ${index * 10}px)`,
			};
		};

		const browse = function () {
			let recipe = recipes.value.pop();
			recipes.value.unshift(recipe);
		};

		return { recipes, style, browse };
	},

	template: ` 
		<div class="cookbook">
			<section class="recipe" v-for="(recipe, index) in recipes"  :style="style(index)" @click="browse()" :key="recipe">
				<h3 class="title">{{recipe.title}}</h3>
				<div class="description">{{recipe.description}}</div>
				<div class="label">It works with <span class="nature">{{recipe.nature}}</span></div>

					<div class="label">
						Steps:
					</div>
					<ol>
						<li v-for="log in recipe.logs">{{log}}</li>
					</ol>
				<p class="from">from {{recipe.who}}</p>
			</section>
		</div>
		`,
};