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

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

{% block header %}
<script>
$(document).ready(function() {
    wgerInitIngredientDetail("{% 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.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.nutrition.add_ingredient %}{% trans "Please select one of the options below." %}{% endif %}
</p>

{% if perms.nutrition.add_ingredient %}
<div class="btn-group btn-group-justified" role="group">
    <a href="{% url 'nutrition:ingredient:accept' ingredient.id %}" class="btn btn-default">
        <span class="{% fa_class 'check' %}"></span>
        {% trans "Accept" %}
    </a>
    <a href="{% url 'nutrition:ingredient:decline' ingredient.id %}" class="btn btn-default">
        <span class="{% fa_class 'times' %}"></span>
        {% trans "Decline" %}
    </a>
</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.nutrition.delete_ingredient %}
<h4>{% trans "Weight units" %}</h4>
<p>
    <a href="{% url 'nutrition:unit_ingredient:add' ingredient.id %}" class="btn btn-success btn-xs wger-modal-dialog">
        {% 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
                <div class="btn-group pull-right">
                    <button type="button" class="btn btn-default dropdown-toggle btn-xs" data-toggle="dropdown">
                        <span class="{% fa_class 'cog' %}"></span>
                    </button>
                    <ul class="dropdown-menu" role="menu">
                        <li>
                            <a href="{% url 'nutrition:unit_ingredient:edit' unit.id %}" class="wger-modal-dialog">{% trans 'Edit' %}</a>
                        </li>
                        <li>
                            <a href="{% url 'nutrition:unit_ingredient:delete' unit.id %}" class="wger-modal-dialog">{% trans 'Delete' %}</a>
                        </li>
                    </ul>
                </div>
            </td>
        </tr>
    {% endfor %}
    </tbody>
    </table>
{% endif %}
{% endif %}

{% license_sidebar ingredient.license ingredient.license_author %}

{% endblock %}




{#         #}
{# Options #}
{#         #}
{% block options %}
{% if perms.nutrition.delete_ingredient %}
<div class="btn-group">
    <button type="button" class="btn btn-primary btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <span class="{% fa_class 'cog' %}"></span>
        {% trans "Options" %}
    </button>
    <ul class="dropdown-menu">
        <li>
            <a href="{% url 'nutrition:ingredient:edit' ingredient.id %}"
               title="{% trans 'Edit ingredient' %}"
               {% auto_link_css request.user_agent.is_mobile %}>
                <span class="{% fa_class 'pencil-square-o' %}"></span>
                {% trans 'Edit ingredient' %}</a>
        </li>
        <li role="separator" class="divider"></li>
        <li>
            <a href="{% url 'nutrition:ingredient:delete' ingredient.id %}"
               title="{% trans 'Delete ingredient' %}" {% auto_link_css request.user_agent.is_mobile "wger-modal-dialog" %}>
                <span class="{% fa_class 'trash' %}"></span>
                {% trans 'Delete' %}</a>
        </li>
    </ul>
</div>
{% endif %}
{% endblock %}
