{% extends "base.html" %}
{% load url from future %}
{% load i18n %}
{% load staticfiles %}

{% block title %}{% trans "Nutrition plan" %} – {{ plan.creation_date}}{% endblock %}


{% block header %}
<script>
function custom_modal_init()
{
    // Init the autocompleter after loading the modal dialog
    init_ingredient_autocompleter();
}

$(document).ready(function() {

    // Check if the user wants to see ingredients in english
    set_english_ingredients();
    
    {% if user.userprofile.show_english_ingredients %}
        useEnglishIngredients = 1;
        $('#english-ingredients-status').attr("src", "{% static 'images/icons/status-on.svg' %}");
    {% else %}
        useEnglishIngredients = 0;
        $('#english-ingredients-status').attr("src", "{% static 'images/icons/status-off.svg' %}");
    {% endif %}
});
</script>
{% endblock %}



{% block content %}
{% if plan.description %}
<p>
    <strong>{% trans "Goal" %}:</strong>
    <span class="dimmed">{{plan.description}}</span>
</p>
{% endif %}

<table class="bordertable">
    <thead>
        <tr>
            <th class="ym-g15">{% trans "Meal" %}</th>
            <th>{% trans "Contents" %}</th>
        </tr>
    </thead>
    <tbody>
{% for meal in plan.meal_set.select_related %}
    <tr>
        <td>
            {% trans "Nr."%} {{ forloop.counter }}
            {% if meal.time %} &ndash; {{meal.time|time:"H:i"}}{% endif %}
            
            <div class="editoptions">
                <a href="{% url 'wger.nutrition.views.meal.delete_meal' meal.id %}"
                   title="{% trans 'Delete' %}">
                   <img src="{% static 'images/icons/trash.svg' %}"
                        width="16"
                        height="16"
                        alt="{% trans 'Delete meal' %}"
                        title="{% trans 'Delete meal' %}">
                </a>
                <a href="{% url 'meal-edit' meal.id %}"
                   title="{% trans 'Edit' %}"
                   class="modal-dialog">
                    <img src="{% static 'images/icons/edit.svg' %}"
                         width="16"
                         height="16"
                         alt="{% trans 'Edit meal' %}"
                         title="{% trans 'Edit meal' %}">
                </a>
                <a href="{% url 'mealitem-add' meal.id %}"
                   title="{% trans 'Add' %}"
                   class="modal-dialog edit-meal">
                    <img src="{% static 'images/icons/add.svg' %}"
                         width="16"
                         height="16"
                         alt="{% trans 'Add item to meal' %}"
                         title="{% trans 'Add item to meal' %}">
               </a>
            </div>
        </td>
        <td>
             <ul>
            {% for item in meal.mealitem_set.select_related %}
                <li>
                    {{ item.amount }}{% if item.get_unit_type == MEALITEM_WEIGHT_GRAM %}g
                    {% else %}
                        {{ item.weight_unit.unit.name }}
                    {% endif %}
                    {{ item.ingredient.name }}

                    <span class="editoptions">
                        <a href="{% url 'wger.nutrition.views.meal_item.delete_meal_item' item.id %}"
                           title="{% trans 'Delete' %}"
                           class="delete-mealitem">
                           <img src="{% static 'images/icons/trash.svg' %}"
                                width="16"
                                height="16"
                                alt="{% trans 'Delete' %}">
                        </a>
                        <a href="{% url 'mealitem-edit' item.id %}"
                           title="{% trans 'Edit' %}"
                           class="modal-dialog edit-meal edit-mealitem">
                            <img src="{% static 'images/icons/edit.svg' %}"
                                 width="16"
                                 height="16"
                                 alt="{% trans 'Edit' %}">
                        </a>
                    </span>
                </li>
            {% empty %}
               <a href="{% url 'mealitem-add' meal.id %}"
                  title="{% trans 'Add one now' %}"
                  class="modal-dialog edit-meal btn btn-block">
                    {% trans "No items for this meal." %}
                    {% trans "Add one now."%}
                </a>
            {% endfor %}
            </ul>
        </td>
    </tr>

{% empty %}
<p>
     <a href="{% url 'meal-add' plan.id %}"
        class="modal-dialog btn btn-block">
            {% trans "No meals for this plan." %}
            {% trans "Add one now." %}
        </a>
</p>
{% endfor %}
        <tr>
            <td colspan="2">
            <a href="{% url 'meal-add' plan.id %}"
               class="modal-dialog">
                <img src="{% static 'images/icons/edit.svg' %}"
                     width="16"
                     height="16"
                     alt="{% trans 'Add a new meal' %}"
                     title="{% trans 'Add a new meal' %}">
                {% trans "Add a new meal" %}
            </a>
            </td>
        <tr>
    </tbody>
</table>

{% if language.short_name != 'en' %}
    <p>
    {% trans "If you find the ingredient list too short, you might want to activate the preference to also show English ingredients." %}
    <a href="{% url 'preferences' %}" id="ajax-english-ingredients">{% trans "That's done here" %}</a>:
    <img src="{% static 'images/icons/status-on.svg' %}"
         width="20"
         height="20"
         alt="{% trans 'Delete nutrition plan' %}"
         id="english-ingredients-status">
    </p>
{% endif %}

{% endblock %}



{% block sidebar %}
<h3>{% trans "Nutritional data" %}</h3>
<table id="nutritional-data-macronutrients">
    <thead>
        <tr>
            <th colspan="2">
                {% trans "Macronutrients" %}
            </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>{% trans "Energy" %}</td>
            <td>{{nutritional_data.energy|floatformat}} kcal</td>
        </tr>
        <tr>
            <td>{% trans "Protein" %}</td>
            <td>{{nutritional_data.protein|floatformat}} g</td>
        </tr>
        <tr>
            <td>{% trans "Carbohydrates" %}</td>
            <td>{{nutritional_data.carbohydrates|floatformat}} g</td>
        </tr>
        <tr>
            <td style="padding-left: 2em;">{% trans "Sugar content in carbohydrates" %}</td>
            <td>{{nutritional_data.carbohydrates_sugar|floatformat}} g</td>
        </tr>
        <tr>
            <td>{% trans "Fat" %}</td>
            <td>{{nutritional_data.fat|floatformat}} g</td>
        </tr>
        <tr>
            <td style="padding-left: 2em;">{% trans "Saturated fat content in fats" %}</td>
            <td>{{nutritional_data.fat_saturated|floatformat}} g</td>
        </tr>
    </tbody>
</table>

<table id="nutritional-data-others">
    <thead>
        <tr>
            <th colspan="2">
                {% trans "Others" %}
            </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>{% trans "Fibres" %}</td>
            <td>{{nutritional_data.fibres|floatformat}} g</td>
        </tr>
        <tr>
            <td>{% trans "Sodium" %}</td>
            <td>{{nutritional_data.sodium|floatformat}} g</td>
        </tr>
    </tbody>
</table>



<h3>{% trans "Options" %}</h3>
<p>
<a href="{% url 'wger.nutrition.views.plan.export_pdf' plan.id %}"
   target="_blank">
    <img src="{% static 'images/icons/save.svg' %}"
         width="32"
         height="32"
         alt="{% trans 'Download as PDF' %}"
         title="{% trans 'Download as PDF' %}">
    {% trans "Download as PDF" %}
</a>
</p>

<p>
<a href="{% url 'nutrition-edit' plan.id %}"
   class="modal-dialog">
    <img src="{% static 'images/icons/edit.svg' %}"
         width="32"
         height="32"
         alt="{% trans 'Edit nutrition plan' %}">
    {% trans "Edit nutrition plan" %}
</a>
</p>


<p>
<a href="{% url 'nutrition-copy' plan.id %}">
    <img src="{% static 'images/icons/copy.svg' %}"
         width="32"
         height="32"
         alt="{% trans 'Make a copy of this nutrition plan' %}">
    {% trans "Make a copy of this nutrition plan" %}
</a>
</p>

<p>
<a href="{% url 'nutrition-delete' plan.id %}"
   class="modal-dialog">
    <img src="{% static 'images/icons/trash.svg' %}"
         width="32"
         height="32"
         alt="{% trans 'Delete nutrition plan' %}">
    {% trans "Delete nutrition plan" %}
</a>
</p>
{% endblock %}
