{% extends 'base.html' %}

{% block content %}
<div class="container mt-5">
    <h1 class="text-center mb-4">Your Profile</h1>

    <div class="row mb-4">
        <div class="col-md-6">
            <div class="card text-center">
                <div class="card-body">
                    <h5 class="card-title">Total Drinks</h5>
                    <p class="card-text display-4">{{ total_drinks }}</p>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="card text-center">
                <div class="card-body">
                    <h5 class="card-title">Total Caffeine (mg)</h5>
                    <p class="card-text display-4">{{ total_caffeine }}</p>
                </div>
            </div>
        </div>
    </div>

    <h2 class="mt-5 mb-3">Your Consumption History</h2>
    <div class="table-responsive">
        <table class="table table-striped table-hover">
            <thead>
                <tr>
                    <th>Drink</th>
                    <th>Size</th>
                    <th>Caffeine (mg)</th>
                    <th>Date & Time</th>
                </tr>
            </thead>
            <tbody>
                {% for consumption in consumptions %}
                <tr>
                    <td>{{ consumption.get_drink_type_display }}</td>
                    <td>{{ consumption.get_size_display }}</td>
                    <td>{{ consumption.caffeine_amount }}</td>
                    <td>{{ consumption.timestamp|date:"Y-m-d H:i" }}</td>
                </tr>
                {% empty %}
                <tr>
                    <td colspan="4" class="text-center">You haven't logged any drinks yet.</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>
{% endblock %}
