{% extends "base_with_list.html" %}

{% macro is_difficulty(diff) %}
    {% if recipe.difficulty == diff %}
        selected
    {% endif %}
{% endmacro %}

{% block content %}

<div class="content" id="recipe-edit">
    <label for="input-title">{{ tr.t(Sentence::RecipeTitle) }}</label>
    <input
        id="input-title"
        type="text"
        value="{{ recipe.title }}"
        autofocus="true">

    <label for="text-area-description">{{ tr.t(Sentence::RecipeDescription) }}</label>
    <textarea
        id="text-area-description">{{ recipe.description }}</textarea>

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

    <label for="input-estimated-time">{{ tr.t(Sentence::RecipeEstimatedTime) }}</label>
    <input
        id="input-estimated-time"
        type="number"
        step="10" min="0" max="1000"
        value="
            {% if let Some(t) = recipe.estimated_time %}
                {{ t }}
            {% endif %}">

    <label for="select-difficulty">{{ tr.t(Sentence::RecipeDifficulty) }}</label>
    <select id="select-difficulty">
        <option value="0" {%+ call is_difficulty(common::ron_api::Difficulty::Unknown) %}> - </option>
        <option value="1" {%+ call is_difficulty(common::ron_api::Difficulty::Easy) %}>{{ tr.t(Sentence::RecipeDifficultyEasy) }}</option>
        <option value="2" {%+ call is_difficulty(common::ron_api::Difficulty::Medium) %}>{{ tr.t(Sentence::RecipeDifficultyMedium) }}</option>
        <option value="3" {%+ call is_difficulty(common::ron_api::Difficulty::Hard) %}>{{ tr.t(Sentence::RecipeDifficultyHard) }}</option>
    </select>

    <div id="container-tags">
        <label for="input-tags" >{{ tr.t(Sentence::RecipeTags) }}</label>
        <span class="tags"></span>
        <input
            id="input-tags"
            type="text"
            value="">
    </div>

    <label for="select-language">{{ tr.t(Sentence::RecipeLanguage) }}</label>
    <select id="select-language">
    {% for lang in translation::available_languages() %}
        <option value="{{ lang.0 }}"
        {%+ if recipe.lang == lang.0 %}
            selected
        {% endif %}
        >{{ lang.1 }}</option>
    {% endfor %}
    </select>

    <input
        id="input-is-published"
        type="checkbox"
        {%+ if recipe.is_published %}
            checked
        {% endif %}
    >
    <label for="input-is-published">{{ tr.t(Sentence::RecipeIsPublished) }}</label>

    <input id="input-delete" type="button" value="{{ tr.t(Sentence::RecipeDelete) }}">

    <div id="groups-container">
    </div>

    <input id="input-add-group" type="button" value="{{ tr.t(Sentence::RecipeAddAGroup) }}">
</div>

<div id="hidden-templates">
    <div class="group">
        <span class="drag-handle"></span>

        <label for="input-group-name">{{ tr.t(Sentence::RecipeGroupName) }}</label>
        <input class="input-group-name" type="text">

        <label for="input-group-comment">{{ tr.t(Sentence::RecipeGroupComment) }}</label>
        <input class="input-group-comment" type="text">

        <input class="input-group-delete" type="button" value="{{ tr.t(Sentence::RecipeRemoveGroup) }}">

        <div class="steps">
        </div>

        <input class="input-add-step" type="button" value="{{ tr.t(Sentence::RecipeAddAStep) }}">
    </div>

    <div class="step">
        <span class="drag-handle"></span>

        <label for="text-area-step-action">{{ tr.t(Sentence::RecipeStepAction) }}</label>
        <textarea class="text-area-step-action"></textarea>

        <input class="input-step-delete" type="button" value="{{ tr.t(Sentence::RecipeRemoveStep) }}">

        <div class="ingredients"></div>

        <input class="input-add-ingredient" type="button" value="{{ tr.t(Sentence::RecipeAddAnIngredient) }}">
    </div>

    <div class="ingredient">
        <span class="drag-handle"></span>

        <label for="input-ingredient-name">{{ tr.t(Sentence::RecipeIngredientName) }}</label>
        <input class="input-ingredient-name" type="text">

        <label for="input-ingredient-quantity">{{ tr.t(Sentence::RecipeIngredientQuantity) }}</label>
        <input class="input-ingredient-quantity" type="number" step="0.1" min="0" max="10000">

        <label for="input-ingredient-unit">{{ tr.t(Sentence::RecipeIngredientUnit) }}</label>
        <input class="input-ingredient-unit" type="text">

        <label for="input-ingredient-comment">{{ tr.t(Sentence::RecipeIngredientComment) }}</label>
        <input class="input-ingredient-comment" type="text">

        <input class="input-ingredient-delete" type="button" value="{{ tr.t(Sentence::RecipeRemoveIngredient) }}">
    </div>

    <div class="dropzone"></div>

    <span class="recipe-delete-confirmation">{{ tr.t(Sentence::RecipeDeleteConfirmation) }}</span>
    <span class="recipe-group-delete-confirmation">{{ tr.t(Sentence::RecipeGroupDeleteConfirmation) }}</span>
    <span class="recipe-step-delete-confirmation">{{ tr.t(Sentence::RecipeStepDeleteConfirmation) }}</span>
    <span class="recipe-ingredient-delete-confirmation">{{ tr.t(Sentence::RecipeIngredientDeleteConfirmation) }}</span>
</div>

{% endblock %}