{% extends "base_with_list.html" %}

{% block content %}

<div class="content" id="recipe-view">
    <h2 class="recipe-title" >{{ recipe.title }}</h2>

    {% if let Some(user) = context.user %}
        {% if crate::data::model::can_user_edit_recipe(user, recipe) %}
            <a class="edit-recipe button" href="/{{ context.tr.current_lang_code() }}/recipe/edit/{{ recipe.id }}" >Edit</a>
        {% endif %}
    {% endif %}

    <span class="add-to-planner button">{{ context.tr.t(Sentence::CalendarAddToPlanner) }}</span>

    <div class="tags">
    {% for tag in recipe.tags %}
        <span class="tag">{{ tag }}</span>
    {% endfor %}
    </div>

    {% match recipe.servings %}
    {% when Some(servings) %}
        <span class="servings">
            {% if *servings == 1 %}
                {{ context.tr.t(Sentence::RecipeOneServing) }}
            {% else %}
                {{ context.tr.tp(Sentence::RecipeSomeServings, [Box::new(**servings)]) }}
            {% endif %}
        </span>
    {% else %}
    {% endmatch %}

    {% match recipe.estimated_time %}
    {% when Some(time) %}
        {{ time ~}} {{~ context.tr.t(Sentence::RecipeEstimatedTimeMinAbbreviation) }}
    {% else %}
    {% endmatch %}

    <span class="difficulty">
    {% match recipe.difficulty %}
    {% when common::ron_api::Difficulty::Unknown %}
    {% when common::ron_api::Difficulty::Easy %}
        {{ context.tr.t(Sentence::RecipeDifficultyEasy) }}
    {% when common::ron_api::Difficulty::Medium %}
        {{ context.tr.t(Sentence::RecipeDifficultyMedium) }}
    {% when common::ron_api::Difficulty::Hard %}
        {{ context.tr.t(Sentence::RecipeDifficultyHard) }}
    {% endmatch %}
    </span>

    {% if !recipe.description.is_empty() %}
        <div class="recipe-description" >
        {{ recipe.description | markdown }}
        </div>
    {% endif %}

    {% for group in recipe.groups %}
    <div class="group">
        <h3>{{ group.name }}</h3>

        <div class="steps">
        {% for step in group.steps %}
            <div class="ingredients">
            {% for ingredient in step.ingredients %}
                <div class="ingredient">
                    {% if let Some(quantity) = ingredient.quantity_value %}
                        {{ quantity ~}}
                        {{~ ingredient.quantity_unit }}
                    {% endif ~%}
                    {{~ ingredient.name }}
                </div>
            {% endfor %}
            </div>
            <div class="step">
                {{ step.action }}
            </div>
        {% endfor %}
        </div>
    </div>
    {% endfor %}
</div>

<div id="hidden-templates">
    {# To create a modal dialog to choose a date and and servings #}
    <div class="date-and-servings" >
        {% include "calendar.html" %}

        <label for="input-servings">{{ context.tr.t(Sentence::RecipeServings) }}</label>
        <input
            id="input-servings"
            type="number"
            step="1" min="1" max="100"
            value="
            {% if let Some(user) = context.user %}
                {{ user.default_servings }}
            {% else %}
                4
            {% endif %}
            "
        >

        <input
            id="input-add-ingredients-to-shopping-list"
            type="checkbox"
            checked
        >
        <label for="input-add-ingredients-to-shopping-list">
            {{ context.tr.t(Sentence::CalendarAddIngredientsToShoppingList) }}
        </label>
    </div>

    <span class="calendar-add-to-planner-success">{{ context.tr.t(Sentence::CalendarAddToPlannerSuccess) }}</span>
    <span class="calendar-add-to-planner-already-exists">{{ context.tr.t(Sentence::CalendarAddToPlannerAlreadyExists) }}</span>
    <span class="calendar-date-format">{{ context.tr.t(Sentence::CalendarDateFormat) }}</span>
</div>

{% endblock %}