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

{% block title %}{{ingredient.name}}{% endblock %}

{% block header %}
<script>
$(document).ready(function() {
    init_ingredient_detail("{% url 'api-ingredient-get-values' ingredient.id %}");
});
</script>
{% endblock %}



{% block breadcrumbs %}
    {{ block.super }}

    {% breadcrumb "Ingredients" "nutrition:ingredient:list" %}
    {% breadcrumb ingredient ingredient.get_absolute_url %}
{% endblock %}

{% block content %}

{% if ingredient.status == ingredient.INGREDIENT_STATUS_PENDING %}
<div class="alert">
<h4>{% trans "Ingredient is pending review" %}</h4>
<p>{% blocktrans %}This user submitted ingredient is pending a decision to be
included in the database. Till then, it will not be shown in the overview or
the search.{% endblocktrans %}
{% if perms.exercises %}{% trans "Please select one of the options below." %}{% endif %}
</p>

{% if perms.exercises %}
<div class="row">
    <div class="col-sm-6">
        <a href="{% url 'nutrition:ingredient:accept' ingredient.id %}" class="btn btn-default btn-block">
            <img src="{% static 'images/icons/status-on.svg' %}"
                width="32"
                height="32"
                alt="{% trans 'Accept' %}">
            {% trans "Accept" %}
        </a>
    </div>
    <div class="col-sm-6">
        <a href="{% url 'nutrition:ingredient:decline' ingredient.id %}" class="btn btn-default btn-block">
            <img src="{% static 'images/icons/status-off.svg' %}"
                width="32"
                height="32"
                alt="{% trans 'Decline' %}">
            {% trans "Decline" %}
        </a>
    </div>
</div>
{% endif %} {# end check permissions #}

</div>
{% endif %} {# end ingredient is pending review #}




<div itemscope itemtype="http://schema.org/NutritionInformation">
<meta itemprop="name" content="{{ingredient.name}}" />

<form class="form-horizontal"
      method="GET"
      action="{% url 'api-ingredient-get-values' ingredient.id %}"
      id="nutritional-values-form"
      style="background-color: transparent; border-width: 0px; box-shadow: 0px 0px 0px 0px transparent;">
    <div id="calculator-errors"></div>
    <input type="hidden" value="{{ingredient.id}}" name="ingredient">

    <div class="row">
        <div class="col-md-4" style="text-align:right;">
        {% trans 'Nutritional values in' %}
        </div>

        <div class="col-md-4">
            <div>{{form.amount|form_field_add_css:'form-control'}}</div>
        </div>

        <div class="col-md-4">
            <div>{{form.unit|form_field_add_css:'form-control'}}</div>
        </div>
    </div>
</form>

<table class="table">
    <thead>
        <tr>
            <th colspan="2">
                {% trans "Macronutrients" %}
            </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td style="width:80%;">{% trans "Energy" %}</td>
            <td itemprop="calories">
                <span id="value-energy">{{ingredient.energy}}</span> {% trans "kcal" %}
            </td>
        </tr>
        <tr>
            <td>{% trans "Protein" %}</td>
            <td itemprop="proteinContent">
                <span id="value-protein">{{ingredient.protein}}</span> {% trans "g" context "weight unit, i.e. grams" %}
            </td>
        </tr>
        <tr>
            <td>{% trans "Carbohydrates" %}</td>
            <td itemprop="carbohydrateContent">
                <span id="value-carbohydrates">{{ingredient.carbohydrates}}</span> {% trans "g" context "weight unit, i.e. grams" %}
            </td>
        </tr>
        <tr>
            <td style="padding-left: 3em;">{% trans "Sugar content in carbohydrates" %}</td>
            <td itemprop="sugarContent">
                {% if ingredient.carbohydrates_sugar %}
                    <span id="value-carbohydrates-sugar">{{ingredient.carbohydrates_sugar}}</span> {% trans "g" context "weight unit, i.e. grams" %}
                {% else %}
                    {% trans "n.A." %}
                {% endif %}
            </td>
        </tr>
        <tr>
            <td>{% trans "Fat" %}</td>
            <td itemprop="fatContent">
                <span id="value-fat">{{ingredient.fat}}</span> {% trans "g" context "weight unit, i.e. grams" %}
            </td>
        </tr>
        <tr>
            <td style="padding-left: 3em;">{% trans "Saturated fat content in fats" %}</td>
            <td itemprop="saturatedFatContent">
                {% if ingredient.fat_saturated %}
                    <span id="value-fat-saturated">{{ingredient.fat_saturated}}</span> {% trans "g" context "weight unit, i.e. grams" %}
                {% else %}
                    {% trans "n.A." %}
                {% endif %}
            </td>
        </tr>
    </tbody>
</table>

<table class="table">
    <thead>
        <tr>
            <th colspan="2">
                {% trans "Others" %}
            </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td style="width:80%;">{% trans "Fibres" %}</td>
            <td itemprop="fiberContent" id="value-fibres">
                {% if ingredient.fibres %}
                    <span id="value-fibres">{{ingredient.fibres}}</span> {% trans "g" context "weight unit, i.e. grams" %}
                {% else %}
                    {% trans "n.A." %}
                {% endif %}
            </td>
        </tr>
        <tr>
            <td>{% trans "Sodium" %}</td>
            <td itemprop="sodiumContent" id="value-sodium">
                {% if ingredient.sodium %}
                    <span id="value-fibres">{{ingredient.sodium}}</span> {% trans "g" context "weight unit, i.e. grams" %}
                {% else %}
                    {% trans "n.A." %}
                {% endif %}
            </td>
        </tr>
    </tbody>
</table>
</div>

{% endblock %}



{% block sidebar %}

{% if ingredient.status == ingredient.INGREDIENT_STATUS_ACCEPTED %}
<div class="alert" style="margin-top:1em;">
<h4>{% trans "User submitted ingredient" %}</h4>
{% with username=ingredient.user.username %}
<p>{% blocktrans %}This exercise was submitted by <strong>{{username}}</strong>.{% endblocktrans %}
{% endwith %}
</div>
{% endif %}


{% if perms.exercises %}
<h4>{% trans "Options" %}</h4>

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

<p>
<a href="{% url 'nutrition:ingredient:edit' ingredient.id %}"
   title="{% trans 'Edit ingredient' %}"
   {% auto_link_css flavour %}>
    <img src="{% static 'images/icons/edit.svg' %}"
         width="32"
         height="32"
         alt="{% trans 'Edit ingredient' %}"
         title="{% trans 'Edit ingredient' %}">
{% trans 'Edit ingredient' %}
</a>
</p>

<h4>{% trans "Weight units" %}</h4>
<p>
<a href="{% url 'nutrition:unit_ingredient:add' ingredient.id %}"
   {% auto_link_css flavour "wger-modal-dialog" %}>
       <img src="{% static 'images/icons/new.svg' %}"
            width="32"
            height="32"
            alt="{% trans 'Add new weight unit' %}"
            title="{% trans 'Add new weight unit' %}">
{% trans "Add new weight unit" %}
</a>
</p>
{% if ingredient.ingredientweightunit_set.exists %}
    <table class="table">
    <thead>
        <tr>
            <th>{% trans "Name" %}</th>
        </tr>
    </thead>
    <tbody>
    {% for unit in ingredient.ingredientweightunit_set.select_related %}
        <tr>
            <td>
                {{unit.amount}} {{unit.unit.name}} = {{unit.gram}}g
                <span class="editoptions float-right">
                    <a href="{% url 'nutrition:unit_ingredient:edit' unit.id %}"
                       title="{% trans 'Edit' %}"
                       {% auto_link_css flavour "wger-modal-dialog" %}>
                           <img src="{% static 'images/icons/edit.svg' %}"
                                width="16"
                                height="16"
                                alt="{% trans 'Edit' %}"
                                title="{% trans 'Edit' %}"></a>
                    <a href="{% url 'nutrition:unit_ingredient:delete' unit.id %}"
                       title="{% trans 'Delete' %}"
                       {% auto_link_css flavour "wger-modal-dialog" %}>
                           <img src="{% static 'images/icons/trash.svg' %}"
                                width="16"
                                height="16"
                                alt="{% trans 'Delete' %}"
                                title="{% trans 'Delete' %}"></a>
                </span>
            </td>
        </tr>
    {% endfor %}
    </tbody>
    </table>
{% endif %}
{% endif %}

{% license_sidebar ingredient.license author %}

{% endblock %}
