{% extends 'nutrition/base.html' %}

{% block title %}{{ journee.date|date:"d/m/Y" }} - Carb Cycling{% endblock %}

{% block content %}
<div class="row mb-4">
    <div class="col">
        <a href="{% url 'tableau_de_bord' %}" class="btn btn-outline-secondary mb-3">
            <i class="bi bi-arrow-left"></i> Retour au tableau de bord
        </a>
        <h1 class="display-6">
            {{ journee.date|date:"l d F Y" }}
        </h1>
        <h3>
            <span class="badge badge-{{ journee.type_journee }} fs-5">
                {{ journee.get_type_journee_display }}
            </span>
        </h3>
    </div>
</div>

<div class="row">
    <div class="col-md-8">
        <div class="card mb-4">
            <div class="card-header bg-primary text-white">
                <h5 class="mb-0">
                    <i class="bi bi-egg-fried"></i> Repas de la journée
                </h5>
            </div>
            <div class="card-body">
                {% if repas %}
                    {% for repas_item in repas %}
                    <div class="mb-4 pb-3 {% if not forloop.last %}border-bottom{% endif %}">
                        <h5 class="text-primary">
                            <i class="bi bi-clock"></i>
                            {{ repas_item.get_type_repas_display }}
                            {% if repas_item.heure %}
                            <small class="text-muted">({{ repas_item.heure|time:"H:i" }})</small>
                            {% endif %}
                        </h5>
                        
                        {% if repas_item.compositions.all %}
                        <table class="table table-sm">
                            <thead>
                                <tr>
                                    <th>Aliment</th>
                                    <th>Catégorie</th>
                                    <th>Portions</th>
                                    <th>Portion standard</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for comp in repas_item.compositions.all %}
                                <tr>
                                    <td>{{ comp.aliment.nom }}</td>
                                    <td>
                                        <span class="badge bg-secondary">
                                            {{ comp.aliment.get_categorie_display }}
                                        </span>
                                    </td>
                                    <td><strong>{{ comp.nombre_portions }}</strong></td>
                                    <td class="text-muted small">{{ comp.aliment.portion_standard }}</td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                        {% else %}
                        <p class="text-muted">Aucun aliment ajouté</p>
                        {% endif %}
                        
                        <a href="{% url 'detail_repas' repas_item.pk %}" class="btn btn-sm btn-outline-primary">
                            <i class="bi bi-pencil"></i> Modifier ce repas
                        </a>
                    </div>
                    {% endfor %}
                {% else %}
                <p class="text-muted">Aucun repas planifié</p>
                {% endif %}
                
                <div class="text-center mt-4">
                    <a href="{% url 'ajouter_repas' journee.pk %}" class="btn btn-success">
                        <i class="bi bi-plus-circle"></i> Ajouter un repas
                    </a>
                </div>
            </div>
        </div>
    </div>
    
    <div class="col-md-4">
        <div class="card mb-4">
            <div class="card-header bg-info text-white">
                <h5 class="mb-0">
                    <i class="bi bi-lightbulb"></i> Recommandations
                </h5>
            </div>
            <div class="card-body">
                <h6 class="text-primary">{{ recommandations.titre }}</h6>
                <p class="small text-muted">{{ recommandations.description }}</p>
                
                <hr>
                
                <div class="mb-3">
                    <strong><i class="bi bi-1-circle text-danger"></i> Glucides</strong>
                    <div class="progress mt-1" style="height: 25px;">
                        <div class="progress-bar bg-danger" role="progressbar" style="width: 100%">
                            {{ recommandations.glucides }}
                        </div>
                    </div>
                </div>
                
                <div class="mb-3">
                    <strong><i class="bi bi-2-circle text-primary"></i> Protéines</strong>
                    <div class="progress mt-1" style="height: 25px;">
                        <div class="progress-bar bg-primary" role="progressbar" style="width: 100%">
                            {{ recommandations.proteines }}
                        </div>
                    </div>
                </div>
                
                <div class="mb-3">
                    <strong><i class="bi bi-3-circle text-warning"></i> Lipides</strong>
                    <div class="progress mt-1" style="height: 25px;">
                        <div class="progress-bar bg-warning" role="progressbar" style="width: 100%">
                            {{ recommandations.lipides }}
                        </div>
                    </div>
                </div>
                
                <div class="alert alert-success mb-0">
                    <i class="bi bi-infinity"></i> <strong>Légumes verts</strong><br>
                    <small>{{ recommandations.legumes }}</small>
                </div>
            </div>
        </div>
        
        {% if journee.notes %}
        <div class="card">
            <div class="card-header">
                <h6 class="mb-0"><i class="bi bi-sticky"></i> Notes</h6>
            </div>
            <div class="card-body">
                <p class="mb-0">{{ journee.notes }}</p>
            </div>
        </div>
        {% endif %}
    </div>
</div>
{% endblock %}
