{% extends 'layouts/base.njk' %}

{% block content %}
    {% recipeimage image, "c-recipe__header-image", title, "100vw" %}
    <h1 class="c-recipe__title">{{ title }}</h1>
    <section>
        <div class="l-container">
            <div class="c-recipe__recipe-content-wrapper">
                <div class="c-recipe__tag-list">
                    {% for tag in tags %}
                        <a class="c-tags__tag" href="/tags/{{ tag | noEmoji | slug }}">{{ tag }}</a>
                    {% endfor %}
                </div>
                {% set ingredientsArray = [] %}
                {% for ingredient in ingredients %}
                    {% set notes = "" %}
                    {% if ingredient.note %}
                        {% set notes = [" (", ingredient.note, ")"] | join %}
                    {% endif %}
                    {% set value = [ingredient.quantity.value.value.value, ingredient.quantity.unit, " ", ingredient.name, notes] | join %}
                    {% set ingredientsArray = (ingredientsArray.push(value), ingredientsArray) %}
                {% endfor %}
                <div class="c-recipe__ingredients-wrapper" x-data='{currentServings: {{ servings if not servings == "" else false }}, ingredients: decodeURI("{{ ingredientsArray | arrayToString }}").split("£") }'>
                    {% if time or not servings == "" %}
                        <div class="c-recipe__additional-info">
                            {% if time %}
                                {% if time.prep %}
                                    <p>{% include "icons/time.svg" %}Prep: {{ time.prep }}</p>
                                {% endif %}
                                {% if time.cook %}
                                    <p>{% include "icons/time.svg" %}Cook: {{ time.cook }}</p>
                                {% endif %}
                                {% if not time.cook and not time.prep %}
                                    <p>{% include "icons/time.svg" %}Total: {{ time }}</p>
                                {% endif %}
                            {% endif %}
                            {% if duration %}
                                <p>{% include "icons/time.svg" %}Total: {{ duration }}</p>
                            {% endif %}
                            {% if not servings == "" %}
                                <p>
                                    <template x-if="currentServings > 1">
                                        <button @click="currentServings -= 1" class="c-recipe__serving-button">
                                            -
                                            <span class="u-sr-only">Remove 1 serving</span>
                                        </button>
                                    </template>
                                    <span x-text="currentServings"></span>
                                    <button @click="currentServings += 1" class="c-recipe__serving-button">
                                        +
                                        <span class="u-sr-only">Add 1 serving</span>
                                    </button>
                                    <span>{{ site.servingsLabel }}</span>
                                </p>
                            {% endif %}
                        </div>
                    {% endif %}

                    <h3>{{ site.ingredientsLabel }}</h3>
                    <template x-if="currentServings">
                        <ul class="c-recipe__ingredients-list">
                            <template x-for="(ingredient, index) in ingredients" :key="index">
                                <li><label><input type="checkbox"><span x-text="adaptQuantity(ingredient, {{servings}}, currentServings)"></span></label></li>
                            </template>
                        </ul>
                    </template>

                    <template x-if="!currentServings">
                        <ul class="c-recipe__ingredients-list">
                            {% for ingredient in ingredients %}
                                <li><label><input type="checkbox"><span>{{ingredient.quantity}}{{ ingredient.units}} {{ ingredient.name }}</span></label></li>
                            {% endfor %}
                        </ul>
                    </template>

                    <h3>Cookware</h3>
                    <ul class="c-recipe__ingredients-list">
                        {% for ingredient in cookware %}
                            {% set notes = "" %}
                            {% if ingredient.note %}
                                {% set notes = [" (", ingredient.note, ")"] | join %}
                            {% endif %}
                            <li><label><input type="checkbox"><span>{{ingredient.quantity}}{{ ingredient.units}} {{ ingredient.name }} {{notes}}</span></label></li>
                        {% endfor %}
                    </ul>
                </div>

                <div class="c-recipe__instructions-wrapper u-free-text">
                    {% for section in sections %}
                        {% if section.title %}
                            <h3>{{ section.title.content }}</h3>
                        {% endif %}
                        <ol>
                            {% for steps in section.content %}
                                <li>
                                    {% for items in steps %}{% if items.type == "ingredient" %}{% if items.reference %}<a href="../{{ items.reference.components | join("/") }}/{{ items.reference.name }}" target="_blank">{{items.content}}</a>{% else %}{{items.content}}{% endif %} ({{items.quantity.value.value.value}}{% if items.quantity.unit %} {{items.quantity.unit}}{% endif %}){% else %}{{items.content}}{% endif %}{% endfor %}
                                </li>
                            {% endfor %}
                        </ol>
                    {% endfor %}
                    
                    {% set notesArr = notes.split('|') %}
                    {% if notesArr.length > 1 %}
                        <h3>Notes</h3>
                        <aside class="alert">
                            {%- for note in notesArr -%}
                                {{ note | safe }}<br>
                            {%- endfor -%}
                        </aside>
                    {% endif %}

                    {% if source %}
                        <p><a href="{{ source }}" target="_blank" rel="noopener">Source</a></p>
                    {% endif %}
                </div>
            </div>
        </div>
    </section>

    <script>
        function adaptQuantity (ingredient, originalServings, currentServings) {
            return ingredient.replace(/(\d|\.|,)+/, match => Number(Math.round(parseFloat(match.replace(',', '.')) * currentServings / originalServings + 'e' + 2) + 'e-' + 2));
        }
    </script>
    
{% endblock %}