{% extends "base.html" %}
{% load i18n staticfiles wger_extras %}


{#           #}
{# Opengraph #}
{#           #}
{% block opengraph %}
    {{ block.super }}
    <meta property="og:title" content="{% trans 'Nutrition plan' %}">
    <meta property="og:description" content="{{ plan }} / {{owner_user.username}}">
{% endblock %}


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


{#        #}
{# Header #}
{#        #}
{% 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
    init_english_ingredients();
});
</script>
{% endblock %}


{#         #}
{# Content #}
{#         #}
{% block content %}
{% if plan.description %}
<p>
    <span class="text-muted">{{plan.description}}</span>
</p>
{% endif %}


{% if is_owner %}
{% for meal in plan.meal_set.select_related %}
<div class="modal fade" id="editoptions-meal-{{ meal.id }}">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">
                    {% trans "Options" %} {% if meal.time %} – {{meal.time|time:"H:i"}}{% endif %}
                </h4>
            </div>
            <div class="modal-body">
                <a href="{% url 'nutrition:meal:delete' meal.id %}"
                   title="{% trans 'Delete' %}"
                   {% auto_link_css flavour %}>
                   <img src="{% static 'images/icons/trash.svg' %}"
                        width="22"
                        height="22"
                        alt="{% trans 'Delete meal' %}"
                        title="{% trans 'Delete meal' %}">
                        {% trans "Delete meal" %}
                </a>
                <a href="{% url 'nutrition:meal:edit' meal.id %}"
                   title="{% trans 'Edit' %}"
                   {% auto_link_css flavour "wger-modal-dialog" %}>
                    <img src="{% static 'images/icons/edit.svg' %}"
                         width="22"
                         height="22"
                         alt="{% trans 'Edit meal' %}"
                         title="{% trans 'Edit meal' %}">
                         {% trans "Edit meal" %}
                </a>
                <a href="{% url 'nutrition:meal_item:add' meal.id %}"
                   title="{% trans 'Add' %}"
                   {% auto_link_css flavour %}>
                    <img src="{% static 'images/icons/add.svg' %}"
                         width="22"
                         height="22"
                         alt="{% trans 'Add item to meal' %}"
                         title="{% trans 'Add item to meal' %}">
                         {% trans "Add item to meal" %}
               </a>
            </div>
        </div>
    </div>
</div>





{% for item in meal.mealitem_set.select_related %}
    <div class="modal fade" id="editoptions-item-{{ item.id }}">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title">
                        {% trans "Options" %}
                    </h4>
                </div>
                <div class="modal-body">
                    <h4>{{item.ingredient}}</h4>
                    <h4>
                        {% if item.get_unit_type == MEALITEM_WEIGHT_GRAM %}{{ item.amount|floatformat:"0" }}g
                        {% else %}
                            {{ item.amount|floatformat:"0" }} × {{ item.weight_unit.unit.name }}
                        {% endif %}
                    </h4>

                    <table class="table">
                    <thead>
                        <tr>
                            <th colspan="2">{% trans "Nutritional data" %}</th>
                        </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>{% trans "Energy" %}</td>
                        <td class="align-right">{{item.get_nutritional_values.energy|floatformat}} {% trans "kcal" %}</td>
                    </tr>
                    <tr>
                        <td>{% trans "Protein" %}</td>
                        <td class="align-right">{{item.get_nutritional_values.protein|floatformat}} {% trans_weight_unit 'g' owner_user %}</td>
                    </tr>
                    <tr>
                        <td>{% trans "Carbohydrates" %}</td>
                        <td class="align-right">{{item.get_nutritional_values.carbohydrates|floatformat}} {% trans_weight_unit 'g' owner_user %}</td>
                    </tr>
                    <tr>
                        <td>{% trans "Fat" %}</td>
                        <td class="align-right">{{item.get_nutritional_values.fat|floatformat}} {% trans_weight_unit 'g' owner_user %}</td>
                    </tr>
                    </tbody>
                    </table>

                    <a href="{% url 'nutrition:meal_item:delete' item.id %}"
                       title="{% trans 'Delete' %}"
                       {% auto_link_css flavour %}>
                       <img src="{% static 'images/icons/trash.svg' %}"
                            width="16"
                            height="16"
                            alt="{% trans 'Delete' %}">
                            {% trans "Delete" %}
                    </a>
                    <a href="{% url 'nutrition:meal_item:edit' item.id %}"
                       title="{% trans 'Edit' %}"
                       {% auto_link_css flavour %}>
                        <img src="{% static 'images/icons/edit.svg' %}"
                             width="16"
                             height="16"
                             alt="{% trans 'Edit' %}">
                             {% trans "Edit" %}
                    </a>
                </div>
            </div>
        </div>
    </div>

{% endfor %}

{% endfor %}
{% endif %}


{% for meal in plan.meal_set.select_related %}
<div class="list-group">

    <a href="#editoptions-meal-{{ meal.id }}" class="list-group-item active" data-toggle="modal">
        {% if is_owner %}
            <span class="glyphicon glyphicon-cog pull-right"></span>
        {% endif %}
        {% trans "Nr."%} {{ forloop.counter }}
        {% if meal.time %} &ndash; {{meal.time|time:"H:i"}}{% endif %}
    </a>

    {% for item in meal.mealitem_set.select_related %}
        <a href="#editoptions-item-{{ item.id }}" data-toggle="modal" class="list-group-item wger-list-group-item">
            {% if is_owner %}
                <span class="glyphicon glyphicon-cog pull-right"></span>
            {% endif %}
            <h4>{{ item.ingredient.name }}</h4>
            <p>
                {% if item.get_unit_type == MEALITEM_WEIGHT_GRAM %}{{ item.amount|floatformat:"0" }}g
                {% else %}
                    {{ item.amount|floatformat:"0" }} × {{ item.weight_unit.unit.name }}
                {% endif %}
            </p>
        </a>
    {% if forloop.last and is_owner %}
        <a href="{% url 'nutrition:meal_item:add' meal.id %}"
           class="list-group-item list-group-item-success">
            <span class="glyphicon glyphicon-plus"></span>
            {% trans "Add item to meal" %}
        </a>
    {% endif %}
    {% empty %}
        {% if is_owner %}
        <a href="{% url 'nutrition:meal_item:add' meal.id %}"
           title="{% trans 'Add one now.' %}"
           class="list-group-item list-group-item-success">
            {% trans "No items for this meal." %}<br>
            {% trans "Add one now." %}
        </a>
        {% endif %}
    {% endfor %}
</div>
{% empty %}
    {% if is_owner %}
    <a href="{% url 'nutrition:meal:add' plan.id %}"
       {% auto_link_css flavour "wger-modal-dialog" %}>
            {% trans "No meals for this plan." %}<br>
            {% trans "Add one now." %}
    </a>
    {% endif %}
{% endfor %}

{% if is_owner %}
<p style="margin-top:2em;">
    <a href="{% url 'nutrition:meal:add' plan.id %}"
       {% auto_link_css flavour "wger-modal-dialog" %}>{% trans "Add a new meal" %}</a>
</p>
{% endif %}


{% if is_owner and 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 'core:user:preferences' %}" id="ajax-english-ingredients">{% trans "That's done here" %}</a>:
    {% if owner_user.userprofile.show_english_ingredients %}
    <img src="{% static 'images/icons/status-on.svg' %}"
         width="20"
         height="20"
         alt=""
         id="english-ingredients-status"
         data-show-ingredients="true">
    {% else %}
    <img src="{% static 'images/icons/status-off.svg' %}"
         width="20"
         height="20"
         alt=""
         id="english-ingredients-status"
         data-show-ingredients="false">
    {% endif %}
    </p>
{% endif %}

{% endblock %}


{#          #}
{# Side bar #}
{#          #}
{% block sidebar %}
<h4>{% trans "Energy" %}</h4>
<table id="nutritional-data-energy" class="table">
    <thead>
        <tr>
            <th>{% trans "Energy" %}</th>
            <th class="align-right">{{nutritional_data.total.energy|floatformat:"0"}} {% trans "kcal" %}</th>
        </tr>
    </thead>
    <tbody>
        {% if is_owner and owner_user.userprofile.calories and plan.has_goal_calories %}
        {% with total=plan.get_calories_approximation %}
        <tr style="background-color:{% if total == 1 %}#8ae234;{% elif total == 2 %}#fce94f;{% elif total == 3 %}#fcaf3e;{% elif total > 3 %}#ef2929;{% endif %}">
            <td>{% trans "Goal" %}</td>
            <td class="align-right">
                <strong>{{owner_user.userprofile.calories|floatformat:"0"}} {% trans "kcal" %}</strong>
            </td>
        </tr>
        {% endwith %}
        {% endif %}
    </tbody>
</table>


{% if is_owner and plan.has_goal_calories %}
    <p>{% blocktrans %}You have selected that this nutritional plan has a
    goal amount of calories. Use the calculator or enter the value yourself.{% endblocktrans %}
    <a href="{% url 'nutrition:calories:view' %}">{% trans "That's done here" %}</a>
    </p>
{% endif %}

<h4>{% trans "Nutritional data" %}</h4>
<table class="table table-condensed">
    <thead>
        <tr style="height:4em;">
            <th>{% trans "Macronutrients" %}</th>
            <th class="align-right">{% trans "Total" %}</th>
            <th class="align-right">{% trans "Percent of energy" %}</th>
            <th class="align-right">
                {% if owner_user.userprofile.use_metric %}
                    {% trans "g per body kg" %}
                {% else %}
                    {% trans "oz per body lb" %}
                {% endif %}
            </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>{% trans "Energy" %}</td>
            <td class="align-right">{{nutritional_data.total.energy|floatformat}} {% trans "kcal" %}</td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>{% trans "Protein" %}</td>
            <td class="align-right">{{nutritional_data.total.protein|floatformat}} {% trans_weight_unit 'g' owner_user %}</td>
            <td class="align-right">{{nutritional_data.percent.protein|floatformat}} %</td>
            <td class="align-right">{{nutritional_data.per_kg.protein|floatformat:2}}</td>
        </tr>
        <tr>
            <td>{% trans "Carbohydrates" %}</td>
            <td class="align-right">{{nutritional_data.total.carbohydrates|floatformat}} {% trans_weight_unit 'g' owner_user %}</td>
            <td class="align-right">{{nutritional_data.percent.carbohydrates|floatformat}} %</td>
            <td class="align-right">{{nutritional_data.per_kg.carbohydrates|floatformat:2}}</td>
        </tr>
        <tr>
            <td style="padding-left: 2em;">{% trans "Sugar content in carbohydrates" %}</td>
            <td class="align-right">{{nutritional_data.total.carbohydrates_sugar|floatformat}} {% trans_weight_unit 'g' owner_user %}</td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>{% trans "Fat" %}</td>
            <td class="align-right">{{nutritional_data.total.fat|floatformat}} {% trans_weight_unit 'g' owner_user %}</td>
            <td class="align-right">{{nutritional_data.percent.fat|floatformat}} %</td>
            <td class="align-right">{{nutritional_data.per_kg.fat|floatformat:2}}</td>
        </tr>
        <tr>
            <td style="padding-left: 2em;">{% trans "Saturated fat content in fats" %}</td>
            <td class="align-right">{{nutritional_data.total.fat_saturated|floatformat}} {% trans_weight_unit 'g' owner_user %}</td>
            <td></td>
            <td></td>
        </tr>


        <tr>
            <th colspan="4">{% trans "Others" %}</th>
        </tr>
        <tr>
            <td>{% trans "Fibres" %}</td>
            <td class="align-right">{{nutritional_data.total.fibres|floatformat}} {% trans_weight_unit 'g' owner_user %}</td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>{% trans "Sodium" %}</td>
            <td class="align-right">{{nutritional_data.total.sodium|floatformat}} {% trans_weight_unit 'g' owner_user %}</td>
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>



<h4>{% trans "Options" %}</h4>
<a href="{% url 'nutrition:plan:export-pdf' plan.id uid token %}"
   {% auto_link_css flavour %}>
    <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>

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

<a href="{% url 'nutrition:plan:copy' plan.id %}"
   {% auto_link_css flavour %}>
    <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>

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