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

{% block title %}Tableau de bord - Carb Cycling{% endblock %}

{% block content %}
<div class="row mb-4">
    <div class="col">
        <h1 class="display-5">
            <i class="bi bi-calendar-week text-primary"></i> Ma semaine
        </h1>
        <p class="text-muted">Du {{ debut_semaine|date:"d/m/Y" }} au {{ fin_semaine|date:"d/m/Y" }}</p>
    </div>
</div>

<div class="row g-3">
    {% for jour in semaine %}
    <div class="col-12">
        <div class="card {% if jour.date == today %}border-primary{% endif %}">
            <div class="card-header d-flex justify-content-between align-items-center">
                <div>
                    <h5 class="mb-0">
                        {{ jour.date|date:"l d F Y" }}
                        {% if jour.date == today %}
                        <span class="badge bg-primary">Aujourd'hui</span>
                        {% endif %}
                    </h5>
                </div>
                <div>
                    {% if jour.journee %}
                    <span class="badge badge-{{ jour.journee.type_journee }} fs-6">
                        {% if jour.journee.type_journee == 'pauvre' %}
                        <i class="bi bi-arrow-down-circle"></i> Pauvre en glucides
                        {% elif jour.journee.type_journee == 'normal' %}
                        <i class="bi bi-dash-circle"></i> Normal
                        {% else %}
                        <i class="bi bi-arrow-up-circle"></i> Riche en glucides
                        {% endif %}
                    </span>
                    {% else %}
                    <a href="{% url 'creer_journee_date' jour.date.isoformat %}" class="btn btn-sm btn-outline-primary">
                        <i class="bi bi-plus-circle"></i> Planifier
                    </a>
                    {% endif %}
                </div>
            </div>
            
            {% if jour.journee %}
            <div class="card-body">
                {% if jour.journee.repas.all %}
                <div class="row">
                    {% for repas in jour.journee.repas.all %}
                    <div class="col-md-6 mb-3">
                        <div class="border rounded p-3 bg-light">
                            <h6 class="text-primary">
                                <i class="bi bi-clock"></i>
                                {{ repas.get_type_repas_display }}
                                {% if repas.heure %}({{ repas.heure|time:"H:i" }}){% endif %}
                            </h6>
                            {% if repas.compositions.all %}
                            <ul class="list-unstyled mb-0 small">
                                {% for comp in repas.compositions.all %}
                                <li>
                                    <i class="bi bi-check2"></i>
                                    {{ comp.nombre_portions }} × {{ comp.aliment.nom }}
                                </li>
                                {% endfor %}
                            </ul>
                            {% else %}
                            <p class="text-muted small mb-0">Aucun aliment ajouté</p>
                            {% endif %}
                            <a href="{% url 'detail_repas' repas.pk %}" class="btn btn-sm btn-outline-secondary mt-2">
                                <i class="bi bi-pencil"></i> Modifier
                            </a>
                        </div>
                    </div>
                    {% endfor %}
                </div>
                <div class="text-end">
                    <a href="{% url 'detail_journee' jour.journee.pk %}" class="btn btn-sm btn-primary">
                        <i class="bi bi-eye"></i> Voir le détail
                    </a>
                    <a href="{% url 'ajouter_repas' jour.journee.pk %}" class="btn btn-sm btn-success">
                        <i class="bi bi-plus-circle"></i> Ajouter un repas
                    </a>
                </div>
                {% else %}
                <p class="text-muted mb-3">Aucun repas planifié pour cette journée</p>
                <a href="{% url 'ajouter_repas' jour.journee.pk %}" class="btn btn-sm btn-success">
                    <i class="bi bi-plus-circle"></i> Ajouter un repas
                </a>
                {% endif %}
            </div>
            {% endif %}
        </div>
    </div>
    {% endfor %}
</div>
{% endblock %}

{% block extra_js %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Auto-scroll vers aujourd'hui
    const todayCard = document.querySelector('.border-primary');
    if (todayCard) {
        todayCard.scrollIntoView({ behavior: 'smooth', block: 'center' });
    }
});
</script>
{% endblock %}
