{% extends "base.html" %}

{% set active_nav = "drinking" %}
{% block title %}Drinking Now — Cellarbrain Explorer{% endblock %}
{% block page_title %}Drinking Now{% endblock %}

{% block content %}
<style>
    .drink-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; }
    .drink-card { padding: 1rem; border-radius: 8px; background: var(--pico-card-background-color); border: 2px solid var(--pico-muted-border-color); text-decoration: none; color: inherit; display: block; transition: border-color 0.2s; }
    .drink-card:hover { border-color: var(--pico-primary); }
    .drink-card h4 { margin: 0 0 0.3rem 0; font-size: 1rem; }
    .drink-card .meta { font-size: 0.85rem; color: var(--pico-muted-color); margin-bottom: 0.5rem; }
    .drink-card .window { font-size: 0.8rem; margin-top: 0.5rem; }
    .drink-card .stats { display: flex; gap: 1rem; font-size: 0.85rem; }
    .drink-card.past_optimal { border-color: #f97316; background: #fff7ed; }
    .drink-card.optimal { border-color: #22c55e; background: #f0fdf4; }
    .drink-card.drinkable { border-color: #eab308; background: #fefce8; }
    .status-tag { display: inline-block; padding: 0.1rem 0.4rem; border-radius: 4px; font-size: 0.75rem; font-weight: bold; }
    .tag-past_optimal { background: #fed7aa; color: #9a3412; }
    .tag-optimal { background: #dcfce7; color: #166534; }
    .tag-drinkable { background: #fef9c3; color: #854d0e; }
</style>

{% if wines %}
<p style="font-size:0.9rem; color:var(--pico-muted-color); margin-bottom:1rem;">
    {{ wines|length }} wine{{ "s" if wines|length != 1 }} ready to drink, sorted by urgency.
</p>

<div class="drink-grid">
    {% for w in wines %}
    <a href="/cellar/{{ w.wine_id }}" class="drink-card {{ w.drinking_status }}">
        <h4>{{ w.wine_name }}</h4>
        <div class="meta">
            {{ w.winery_name }} · {{ w.vintage }}
            <span class="status-tag tag-{{ w.drinking_status }}">{{ w.drinking_status|replace("_", " ")|title }}</span>
        </div>
        <div class="stats">
            <span>🍾 {{ w.bottles_stored }} bottle{{ "s" if w.bottles_stored != 1 }}</span>
            {% if w.price %}<span>CHF {{ "%.0f"|format(w.price) }}</span>{% endif %}
            <span>{{ w.category }}</span>
        </div>
        <div class="window">
            🗓 Drink {{ w.drink_from or "?" }}–{{ w.drink_until or "?" }}
            {% if w.optimal_from or w.optimal_until %} · Optimal {{ w.optimal_from or "?" }}–{{ w.optimal_until or "?" }}{% endif %}
        </div>
    </a>
    {% endfor %}
</div>
{% else %}
<p style="color:var(--pico-muted-color); font-style:italic;">No wines are currently in their drinking window with bottles in stock.</p>
{% endif %}
{% endblock %}