{% 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>
                <div class="c-recipe__ingredients-wrapper" x-data='{currentServings: {{ servings if not servings == "" else false }}, ingredients: decodeURI("{{ ingredients | arrayToString }}").split("£") }'>
                    {% if time or not servings == "" %}
                        <div class="c-recipe__additional-info">
                            {% if time %}
                                <p>{% include "icons/time.svg" %}{{ time }}</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 }}</span></label></li>
                            {% endfor %}
                        </ul>
                    </template>
                </div>

                <div class="c-recipe__instructions-wrapper u-free-text">
                    {{ content | safe }}
                    {% if sourceLabel and sourceURL %}
                        <p>Source : <a href="{{ sourceURL }}" target="_blank" rel="noopener">{{ sourceLabel }}</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 %}