{% extends "base.html" %}
{% load static %}

{% block title %}Caffeine Tracker - Your Daily Coffee Companion{% endblock %}

{% block content %}
<div class="container-fluid hero-section">
    <div class="container text-center py-5">
        <h1 class="display-4 fw-bold">Stay Energized, Not Overloaded.</h1>
        <p class="lead col-lg-8 mx-auto">Mindfully track your caffeine intake for better sleep, health, and productivity. Start with one tap.</p>
    </div>
</div>

<div class="container my-5">
    <div class="row justify-content-center">
        <div class="col-lg-6 mb-4 mb-lg-0">
            <div class="card shadow-lg glass-card h-100">
                <div class="card-body p-4 p-md-5">
                    <h2 class="card-title text-center mb-4">Log a Drink</h2>
                    <form method="post">
                        {% csrf_token %}
                        <div class="mb-3">
                            <label for="{{ form.drink_type.id_for_label }}" class="form-label">{{ form.drink_type.label }}</label>
                            {{ form.drink_type }}
                        </div>
                        <div class="mb-4">
                            <label for="{{ form.size.id_for_label }}" class="form-label">{{ form.size.label }}</label>
                            {{ form.size }}
                        </div>
                        <div class="d-grid">
                            <button type="submit" class="btn btn-primary btn-lg">Add Cup</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <div class="col-lg-6">
            <div class="card shadow-lg summary-card h-100">
                <div class="card-body p-4 p-md-5">
                    <h2 class="card-title text-center mb-4">Today's Summary</h2>
                    <div class="text-center">
                        <p class="display-1 fw-bold text-primary mb-0">{{ total_caffeine }}</p>
                        <p class="lead text-muted">mg of Caffeine</p>
                        <hr class="my-4">
                        <p class="display-5 fw-bold">{{ total_drinks }}</p>
                        <p class="lead text-muted">Drinks Logged</p>
                    </div>
                    <h4 class="mt-5 mb-3 text-center">Today's Log:</h4>
                    <ul class="list-group list-group-flush">
                        {% for item in consumptions_today %}
                        <li class="list-group-item d-flex justify-content-between align-items-center">
                            <span>
                                <strong class="text-capitalize">{{ item.get_drink_type_display }}</strong>
                                <small class="text-muted ms-2">({{ item.get_size_display }})</small>
                            </span>
                            <span class="badge bg-light text-dark rounded-pill border">
                                {{ item.timestamp|time:"H:i" }}
                            </span>
                        </li>
                        {% empty %}
                        <li class="list-group-item text-center text-muted">No drinks logged yet today.</li>
                        {% endfor %}
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}
