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

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

{% block header %}
<script>
function update_value() {
    form_data = $('#nutritional-values-form').serializeArray();
    $.post("{% url 'ingredient-get-values' ingredient.id %}", form_data, function(data) {

        // Show any validation errors
        $('#calculator-errors').html('');
        if (data['errors'])
        {
            $.each(data['errors'], function(index, value) {
                $('#calculator-errors').append('<p class="ym-message">'+value+'</p>');
            });
        }
        
        // Replace the nutritional values
        $('#value-energy').html(parseFloat(data['energy']).toFixed(2));
        $('#value-protein').html(parseFloat(data['protein']).toFixed(2));
        $('#value-carbohydrates').html(parseFloat(data['carbohydrates']).toFixed(2));
        $('#value-carbohydrates-sugar').html(parseFloat(data['carbohydrates_sugar']).toFixed(2));
        $('#value-fat').html(parseFloat(data['fat']).toFixed(2));
        $('#value-fat-saturated').html(parseFloat(data['fat_saturated']).toFixed(2));
        $('#value-fibres').html(parseFloat(data['fibres']).toFixed(2));
        $('#value-sodium').html(parseFloat(data['sodium']).toFixed(2));
        });
    }

$(document).ready(function() {

    // Prevent the form from being sent
    $('#nutritional-values-form').submit(function(e) {
        e.preventDefault();
    });

    $('#id_amount').keyup(function(){
        update_value();
    });

    $('#id_unit').change(function(){
        update_value();
    });

});
</script>
{% endblock %}



{% block content %}

{% if ingredient.status == ingredient.INGREDIENT_STATUS_PENDING %}
<div class="alert">
<h3>{% trans "Ingredient is pending review" %}</h3>
<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="ym-grid linearize-level-1">
    <div class="ym-g50 ym-gl">
        <div class="ym-gbox-left">
            <div class="alert alert-success">
                <a href="{% url 'ingredient-accept' ingredient.id %}">
                    <img src="{% static 'images/icons/status-on.svg' %}"
                        width="32"
                        height="32"
                        alt="{% trans 'Accept' %}">
                    {% trans "Accept" %}
                </a>
            </div>
        </div>
    </div>
    <div class="ym-g50 ym-gl">
        <div class="ym-gbox-left">
            <div class="alert alert-error">
                <a href="{% url 'ingredient-decline' ingredient.id %}">
                    <img src="{% static 'images/icons/status-off.svg' %}"
                        width="32"
                        height="32"
                        alt="{% trans 'Decline' %}">
                    {% trans "Decline" %}
                </a>
            </div>
        </div>
    </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="ym-form"
      method="post"
      action="{% url 'ingredient-get-values' ingredient.id %}"
      id="nutritional-values-form"
      style="background-color: transparent; border-width: 0px; box-shadow: 0px 0px 0px 0px transparent;">
    {% csrf_token %}
    <div id="calculator-errors" class="ym-error"></div>
    <input type="hidden" value="{{ingredient.id}}" name="ingredient"></input>
    
    <div class="ym-grid">
        <div class="ym-g33 ym-gl" style="text-align:right;">
        {% trans 'Nutritional values in' %}
        </div>
        
        <div class="ym-g33 ym-gl">
            <div class="ym-fbox-text {% if form.amount.errors %}ym-error{% endif %}">{{form.amount}}</div>
        </div>
        
        <div class="ym-g33 ym-gl">
            <div class="ym-fbox-select {% if form.unit.errors %}ym-error{% endif %}">{{form.unit}}</div>
        </div>
    </div>
</form>

<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> kcal
            </td>
        </tr>
        <tr>
            <td>{% trans "Protein" %}</td>
            <td itemprop="proteinContent">
                <span id="value-protein">{{ingredient.protein}}</span> g
            </td>
        </tr>
        <tr>
            <td>{% trans "Carbohydrates" %}</td>
            <td itemprop="carbohydrateContent">
                <span id="value-carbohydrates">{{ingredient.carbohydrates}}</span> g
            </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> g
                {% else %}
                    {% trans "n.A." %}
                {% endif %}
            </td>
        </tr>
        <tr>
            <td>{% trans "Fat" %}</td>
            <td itemprop="fatContent">
                <span id="value-fat">{{ingredient.fat}}</span> g
            </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> g
                {% else %}
                    {% trans "n.A." %}
                {% endif %}
            </td>
        </tr>
    </tbody>
</table>

<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> g
                {% 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> g
                {% 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;">
<h3>{% trans "User submitted ingredient" %}</h3>
{% with username=ingredient.user.username %}
<p>{% blocktrans %}This exercise was submitted by <strong>{{username}}</strong>.{% endblocktrans %}
{% endwith %}
</div>
{% endif %}


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

<p>
<a href="{% url 'ingredient-delete' ingredient.id %}"
   title="{% trans 'Delete ingredient' %}"
   class="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 'ingredient-edit' ingredient.id %}"
   title="{% trans 'Edit ingredient' %}">
    <img src="{% static 'images/icons/edit.svg' %}"
         width="32"
         height="32"
         alt="{% trans 'Edit ingredient' %}"
         title="{% trans 'Edit ingredient' %}">
{% trans 'Edit ingredient' %}
</a>
</p>

<h3>{% trans "Weight units" %}</h3>
<p>
<a href="{% url 'weight-unit-ingredient-add' ingredient.id %}"
   class="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>
    <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.gramm}}g
                <span class="editoptions float-right">
                    <a href="{% url 'weight-unit-ingredient-edit' unit.id %}"
                       title="{% trans 'Edit' %}"
                       class="modal-dialog">
                           <img src="{% static 'images/icons/edit.svg' %}"
                                width="16"
                                height="16"
                                alt="{% trans 'Edit' %}"
                                title="{% trans 'Edit' %}">
                    </a>
                    <a href="{% url 'weight-unit-ingredient-delete' unit.id %}"
                       title="{% trans 'Delete' %}"
                       class="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 %}

{% cc_by_sa_sidebar language %}

{% endblock %}
