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

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

{% block header %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    wgerInitIngredientDetail("{% url 'api-ingredient-get-values' ingredient.id %}");
    document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(el => new bootstrap.Tooltip(el));
});
</script>
<style>
    .nutriscore-bar {
        display: inline-flex;
        align-items: center;
    }
    .nutriscore-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-weight: 700;
        font-size: 0.7rem;
        height: 1.4rem;
        padding: 0 0.3em;
        opacity: 0.4;
    }
    .nutriscore-badge:first-child { border-radius: 0.7rem 0 0 0.7rem; }
    .nutriscore-badge:last-child { border-radius: 0 0.7rem 0.7rem 0; }
    .nutriscore-badge.active {
        opacity: 1;
        font-size: 0.9rem;
        height: 1.8rem;
        padding: 0 0.35em;
        margin: 0 2px;
    }
    .nutriscore-a { background-color: #0d8949; }
    .nutriscore-b { background-color: #72c72b; }
    .nutriscore-c { background-color: #fbc606; color: #000; }
    .nutriscore-d { background-color: #f37115; }
    .nutriscore-e { background-color: #ee301f; }
</style>
{% endblock %}



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

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

{% block content %}



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

<form class="wger-form"
      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|unlocalize}}" name="ingredient">

    {% crispy form %}
</form>

<table class="table table-hover table-striped">
    <thead>
        <tr>
            <th colspan="2">
                {% translate "Macronutrients" %}
            </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>{% translate "Energy" %}</td>
            <td itemprop="calories" class="text-end">
                <span id="value-energy">{{ingredient.energy|floatformat:1}}</span> {% translate "kcal" %} /
                <span id="value-energy-kjoule">{{ingredient.energy_kilojoule|floatformat:1}}</span> {% translate "kJ" %}
            </td>
        </tr>
        <tr>
            <td>{% translate "Protein" %}</td>
            <td itemprop="proteinContent" class="text-end">
                <span id="value-protein">{{ingredient.protein|floatformat:1}}</span> {% translate "g" context "weight unit, i.e. grams" %}
            </td>
        </tr>
        <tr>
            <td>{% translate "Carbohydrates" %}</td>
            <td itemprop="carbohydrateContent" class="text-end">
                <span id="value-carbohydrates">{{ingredient.carbohydrates|floatformat}}</span> {% translate "g" context "weight unit, i.e. grams" %}
            </td>
        </tr>
        <tr>
            <td class="pl-5">{% translate "Sugar content in carbohydrates" %}</td>
            <td itemprop="sugarContent" class="text-end">
                {% if ingredient.carbohydrates_sugar %}
                    <span id="value-carbohydrates-sugar">{{ingredient.carbohydrates_sugar|floatformat:1}}</span> {% translate "g" context "weight unit, i.e. grams" %}
                {% else %}
                    {% translate "n.A." %}
                {% endif %}
            </td>
        </tr>
        <tr>
            <td>{% translate "Fat" %}</td>
            <td itemprop="fatContent" class="text-end">
                <span id="value-fat">{{ingredient.fat|floatformat:1}}</span> {% translate "g" context "weight unit, i.e. grams" %}
            </td>
        </tr>
        <tr>
            <td class="pl-5">{% translate "Saturated fat content in fats" %}</td>
            <td itemprop="saturatedFatContent" class="text-end">
                {% if ingredient.fat_saturated %}
                    <span id="value-fat-saturated">{{ingredient.fat_saturated|floatformat:1}}</span> {% translate "g" context "weight unit, i.e. grams" %}
                {% else %}
                    {% translate "n.A." %}
                {% endif %}
            </td>
        </tr>
    </tbody>
</table>

<table class="table table-hover table-striped">
    <thead>
        <tr>
            <th colspan="2">
                {% translate "Others" %}
            </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>{% translate "Fiber" %}</td>
            <td itemprop="fiberContent" class="text-end">
                {% if ingredient.fiber %}
                    <span id="value-fiber">{{ingredient.fiber|floatformat:1}}</span> {% translate "g" context "weight unit, i.e. grams" %}
                {% else %}
                    {% translate "n.A." %}
                {% endif %}
            </td>
        </tr>
        <tr>
            <td>{% translate "Sodium" %}</td>
            <td itemprop="sodiumContent" class="text-end">
                {% if ingredient.sodium %}
                    <span id="value-sodium">{{ingredient.sodium|floatformat:1}}</span> {% translate "g" context "weight unit, i.e. grams" %}
                {% else %}
                    {% translate "n.A." %}
                {% endif %}
            </td>
        </tr>
    </tbody>
</table>

<table class="table table-hover table-striped">
    <thead>
        <tr>
            <th colspan="2">
                {% translate "Dietary information" %}
            </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>{% translate "Vegan" %}</td>
            <td class="text-end">
                {% if ingredient.is_vegan is None %}
                    {% translate "n.A." %}
                {% elif ingredient.is_vegan %}
                    <i class="fa-solid fa-seedling fa-2x text-success" data-bs-toggle="tooltip" title="{% translate 'Yes' %}"></i>
                {% else %}
                    <span class="fa-stack fa-1x" data-bs-toggle="tooltip" title="{% translate 'No' %}">
                        <i class="fa-solid fa-seedling fa-stack-1x text-muted"></i>
                        <i class="fa-solid fa-ban fa-stack-2x text-danger opacity-75"></i>
                    </span>
                {% endif %}
            </td>
        </tr>
        <tr>
            <td>{% translate "Vegetarian" %}</td>
            <td class="text-end">
                {% if ingredient.is_vegetarian is None %}
                    {% translate "n.A." %}
                {% elif ingredient.is_vegetarian %}
                    <i class="fa-solid fa-leaf fa-2x text-success" data-bs-toggle="tooltip" title="{% translate 'Yes' %}"></i>
                {% else %}
                    <span class="fa-stack fa-1x" data-bs-toggle="tooltip" title="{% translate 'No' %}">
                        <i class="fa-solid fa-leaf fa-stack-1x text-muted"></i>
                        <i class="fa-solid fa-ban fa-stack-2x text-danger opacity-75"></i>
                    </span>
                {% endif %}
            </td>
        </tr>
        <tr>
            <td>{% translate "Nutri-Score" %}</td>
            <td class="text-end">
                {% if ingredient.nutriscore %}
                <span class="nutriscore-bar">
                    {% for score, label in ingredient.NUTRISCORE_CHOICES %}
                        <span class="nutriscore-badge nutriscore-{{ score }}{% if score == ingredient.nutriscore %} active{% endif %}">{{ label }}</span>
                    {% endfor %}
                </span>
                {% else %}
                    {% translate "n.A." %}
                {% endif %}
            </td>
        </tr>
    </tbody>
</table>
</div>

<small>
    {{ ingredient.attribution_link|safe }}
</small>
{% endblock %}


{#         #}
{# Sidebar #}
{#         #}
{% block sidebar %}

{% if perms.nutrition.delete_ingredient %}
<h4>{% translate "Weight units" %}</h4>

{% translate 'Add new weight unit' as text %}
{% url 'nutrition:unit_ingredient:add' ingredient.id as url %}
{% modal_link url=url text=text  %}

{% if ingredient.ingredientweightunit_set.exists %}
    <table class="table">
    <thead>
        <tr>
            <th>{% translate "Name" %}</th>
        </tr>
    </thead>
    <tbody>
    {% for unit in ingredient.ingredientweightunit_set.select_related %}
        <tr>
            <td>
                {{unit.name}} = {{unit.gram}}g
                <div class="dropdown float-end">
                    <button type="button" class="btn btn-light dropdown-toggle btn-sm" data-bs-toggle="dropdown">
                        <span class="{% fa_class 'cog' %}"></span>
                    </button>
                    <div class="dropdown-menu dropdown-menu-right" role="menu">
                        {% translate 'Edit' as text %}
                        {% url 'nutrition:unit_ingredient:edit' unit.id as url %}
                        {% modal_link url=url text=text css_class='dropdown-item' %}

                        {% translate 'Delete' as text %}
                        {% url 'nutrition:unit_ingredient:delete' unit.id as url %}
                        {% modal_link url=url text=text css_class='dropdown-item' %}
                    </div>
                </div>
            </td>
        </tr>
    {% endfor %}
    </tbody>
    </table>
{% endif %}
{% endif %}

{% if image %}
    <a href="{{ ingredient.off_link }}">
        <img src="{{ image.image.url }}" class="img-fluid">
    </a>
    <p>
    <small>
        {{ image.attribution_link|safe }}
    </small>
    </p>
{% endif %}

{% endblock %}


{#         #}
{# Options #}
{#         #}
{% block options %}
{% if perms.nutrition.delete_ingredient %}
<div class="btn-group">
    <div class="btn-group">
        <button type="button" class="btn btn-primary btn-sm dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <span class="{% fa_class 'cog' %}"></span>
            {% translate "Options" %}
        </button>
        <div class="dropdown-menu">
            {% translate 'Edit' as text %}
            {% url 'nutrition:ingredient:edit' ingredient.id as url %}
            {% modal_link url=url text=text css_class='dropdown-item' %}

            <div role="separator" class="dropdown-divider"></div>

            {% translate 'Delete' as text %}
            {% url 'nutrition:ingredient:delete' ingredient.id as url %}
            {% modal_link url=url text=text css_class='dropdown-item' %}
            </a>
        </div>
    </div>
</div>
{% endif %}
{% endblock %}