{% extends "base.html" %}
{% block content %}
<div class="container py-4">
    <div class="row g-4">
        <div class="col-12">
            <h1 class="fw-bold text-dark">Hello, {{ current_user.username }}.</h1>
            <p class="text-muted">Here's what's happening in your kitchen.</p>
        </div>

        <div class="col-lg-8">
            <div class="card border-0 shadow-sm rounded-4 mb-4">
                <div class="card-header bg-success text-white border-0">
                    <h5 class="mb-0 fw-bold">
                        <i class="fas fa-calendar-day me-2"></i>Today's Meals
                        <span class="float-end" style="font-size: 0.9rem; font-weight: normal;">{{ today.strftime('%b %d') if today else '' }}</span>
                    </h5>
                </div>
                <div class="card-body p-4">
                    <div class="row g-3">
                        {% for meal_type in ['Breakfast', 'Lunch', 'Dinner'] %}
                        {% set meal = meals|selectattr('meal_type', 'equalto', meal_type.lower())|first %}
                        <div class="col-md-4">
                            <div class="meal-column">
                                <div class="meal-type-label">{{ meal_type }}</div>
                                {% if meal %}
                                <a href="{{ url_for('view_recipe', recipe_id=meal.recipe.id) }}" class="meal-recipe-link">
                                    {{ meal.recipe.title }}
                                    {% if meal.is_cooked %}<i class="fas fa-check-circle text-success ms-1" title="Cooked"></i>{% endif %}
                                </a>
                                <small class="text-muted d-block mt-1">{{ meal.recipe.cuisine or '' }}</small>
                                {% else %}
                                <div class="d-flex align-items-center gap-2">
                                    <span class="text-muted small fst-italic">Not planned</span>
                                    <a href="{{ url_for('meal_planner') }}" class="add-meal-btn"
                                       title="Plan {{ meal_type }}">
                                        <i class="fas fa-plus"></i>
                                    </a>
                                </div>
                                {% endif %}
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-4">
            <div class="card border-0 shadow-sm mb-3 bg-success text-white">
                <div class="card-body p-3 d-flex justify-content-between align-items-center">
                    <div>
                        <h6 class="fw-bold mb-0">Shopping List</h6>
                        <p class="mb-0 opacity-75 small">{{ shopping_count }} item{{ 's' if shopping_count != 1 else '' }} needed</p>
                    </div>
                    <a href="{{ url_for('shopping') }}" class="text-white opacity-75">
                        <i class="fas fa-shopping-cart fa-2x"></i>
                    </a>
                </div>
            </div>
            <div class="card border-0 shadow-sm mb-3" style="background:#f0faf4">
                <div class="card-body p-3 d-flex justify-content-between align-items-center">
                    <div>
                        <h6 class="fw-bold mb-0 text-success">Pantry</h6>
                        <p class="mb-0 text-muted small">{{ my_pantry_count }} item{{ 's' if my_pantry_count != 1 else '' }} tracked</p>
                    </div>
                    <a href="{{ url_for('pantry_master') }}" class="text-success opacity-75">
                        <i class="fas fa-carrot fa-2x"></i>
                    </a>
                </div>
            </div>
            <div class="card border-0 shadow-sm mb-3" style="background:#f5f0fa">
                <div class="card-body p-3 d-flex justify-content-between align-items-center">
                    <div>
                        <h6 class="fw-bold mb-0" style="color:#7c3aed">Recipes</h6>
                        <p class="mb-0 text-muted small">{{ my_recipes }} total available</p>
                    </div>
                    <a href="{{ url_for('recipes') }}" style="color:#7c3aed;opacity:.75">
                        <i class="fas fa-book-open fa-2x"></i>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}