{% extends "base.html" %}

{% block content %}
<div class="card mb-4" style="max-width: 600px;">
    <div class="card-header">
        <h5 class="card-title mb-0">{{ item.name }}</h5>
        <small class="text-muted">Barcode: {{ item.barcode }}</small>
    </div>
    <div class="card-body">
        <dl class="row">
            <dt class="col-sm-5">Energy per 100g</dt>
            <dd class="col-sm-7">{{ item.energy_100g }} kcal</dd>

            <dt class="col-sm-5">Protein per 100g</dt>
            <dd class="col-sm-7">{{ "%.1f"|format(item.protein_100g) }} g</dd>

            <dt class="col-sm-5">Carbohydrates per 100g</dt>
            <dd class="col-sm-7">{{ "%.1f"|format(item.carbs_100g) }} g</dd>

            <dt class="col-sm-5">Sugar per 100g</dt>
            <dd class="col-sm-7">
                {% if item.sugar_100g is not none %}
                {{ "%.1f"|format(item.sugar_100g) }} g
                {% else %}
                <span class="text-muted">N/A</span>
                {% endif %}
            </dd>

            <dt class="col-sm-5">Fats per 100g</dt>
            <dd class="col-sm-7">{{ "%.1f"|format(item.fats_100g) }} g</dd>

            <dt class="col-sm-5">Saturated fats per 100g</dt>
            <dd class="col-sm-7">
                {% if item.saturated_fats_100g is not none %}
                {{ "%.1f"|format(item.saturated_fats_100g) }} g
                {% else %}
                <span class="text-muted">N/A</span>
                {% endif %}
            </dd>
        </dl>
    </div>
</div>

{% endblock%}