{% extends "base.html" %}

{% set active_nav = "cellar" %}
{% block title %}{{ wine.wine_name }} {{ wine.vintage }} — Cellarbrain Explorer{% endblock %}
{% block page_title %}{{ wine.wine_name }} {{ wine.vintage }}{% endblock %}

{% block content %}
<style>
    .wine-header { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-bottom: 1.5rem; }
    @media (max-width: 768px) { .wine-header { grid-template-columns: 1fr; } }
    .status-badge { padding: 0.2rem 0.6rem; border-radius: 4px; font-size: 0.8rem; font-weight: bold; }
    .status-optimal { background: #dcfce7; color: #166534; }
    .status-drinkable { background: #fef9c3; color: #854d0e; }
    .status-past_optimal { background: #fed7aa; color: #9a3412; }
    .status-too_young { background: #dbeafe; color: #1e40af; }
    .status-unknown { background: #f3f4f6; color: #374151; }
    .tab-bar { display: flex; gap: 0; border-bottom: 2px solid var(--pico-muted-border-color); margin-bottom: 1.5rem; }
    .tab-bar a { padding: 0.5rem 1rem; text-decoration: none; font-size: 0.9rem; border-bottom: 2px solid transparent; margin-bottom: -2px; }
    .tab-bar a.active { border-bottom-color: var(--pico-primary); font-weight: bold; }
    .dossier-nav { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; }
    .dossier-nav a { font-size: 0.8rem; padding: 0.2rem 0.5rem; border-radius: 4px; background: var(--pico-card-background-color); border: 1px solid var(--pico-muted-border-color); text-decoration: none; }
    .dossier-nav a.populated { border-color: var(--pico-primary); }
    .dossier-section { margin-bottom: 2rem; }
    .dossier-section h3 { font-size: 1.1rem; border-bottom: 1px solid var(--pico-muted-border-color); padding-bottom: 0.3rem; }
    .facts-table td { padding: 0.3rem 0.5rem; font-size: 0.85rem; }
    .facts-table td:first-child { font-weight: bold; white-space: nowrap; color: var(--pico-muted-color); }
    .badge-sm { display: inline-block; padding: 0.15rem 0.45rem; border-radius: 3px; font-size: 0.75rem; background: var(--pico-card-background-color); border: 1px solid var(--pico-muted-border-color); margin: 0.1rem 0.15rem; white-space: nowrap; }
    .food-tags-wrap { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-bottom: 1.5rem; }
    .food-tags-wrap .badge-sm { font-size: 0.7rem; }
    .food-tags-hidden { display: none; }
    .food-tags-toggle { font-size: 0.75rem; cursor: pointer; color: var(--pico-primary); border: none; background: none; padding: 0.15rem 0.4rem; text-decoration: underline; }
</style>

<a href="/cellar" style="font-size:0.85rem;">← Back to catalogue</a>

<div class="wine-header">
    <div>
        <h2 style="margin-bottom:0.3rem;">{{ wine.wine_name }}</h2>
        <p style="margin-bottom:0.5rem; color:var(--pico-muted-color);">
            {{ wine.winery_name }} · {{ wine.vintage }}
            {% if wine.drinking_status %}
            <span class="status-badge status-{{ wine.drinking_status }}">{{ wine.drinking_status|replace("_", " ")|title }}</span>
            {% endif %}
        </p>
        <p style="font-size:0.9rem;">
            {% if wine.bottles_stored %}<strong>{{ wine.bottles_stored }}</strong> bottle{{ "s" if wine.bottles_stored != 1 }} stored{% endif %}
            {% if wine.is_favorite %} · ★ Favourite{% endif %}
        </p>
    </div>
    <div>
        <table class="facts-table">
            <tr><td>Category</td><td>{{ wine.category or "—" }}</td></tr>
            <tr><td>Country</td><td>{{ wine.country or "—" }}</td></tr>
            <tr><td>Region</td><td>{{ wine.region or "—" }}{% if wine.subregion %}, {{ wine.subregion }}{% endif %}</td></tr>
            <tr><td>Grapes</td><td>{{ wine.grapes or wine.primary_grape or "—" }}</td></tr>
            <tr><td>Alcohol</td><td>{% if wine.alcohol_pct %}{{ wine.alcohol_pct }}%{% else %}—{% endif %}</td></tr>
            <tr><td>Price</td><td>{% if wine.price %}CHF {{ "%.2f"|format(wine.price) }}{% else %}—{% endif %}</td></tr>
            <tr><td>Volume</td><td>{{ wine.volume_ml or 750 }} mL · {{ wine.bottle_format or "Standard" }}</td></tr>
            {% if format_siblings %}
            <tr><td>Also available</td><td>{% for sib in format_siblings %}<a href="/cellar/{{ sib.wine_id }}">{{ sib.bottle_format }} ({{ sib.volume_ml }} mL)</a>{% if not loop.last %}, {% endif %}{% endfor %}</td></tr>
            {% endif %}
            <tr><td>Drink</td><td>{{ wine.drink_from or "?" }}–{{ wine.drink_until or "?" }}</td></tr>
            <tr><td>Optimal</td><td>{{ wine.optimal_from or "?" }}–{{ wine.optimal_until or "?" }}</td></tr>
            {% if wine.best_pro_score %}<tr><td>Best Score</td><td>{{ wine.best_pro_score }}</td></tr>{% endif %}
            {% set fg = wine.food_groups or (dossier.frontmatter.food_groups if dossier and dossier.frontmatter else none) %}
            {% if fg %}<tr><td>Food Groups</td><td>{% for g in fg %}<span class="badge-sm">{{ g|replace("_", " ")|title }}</span>{% endfor %}</td></tr>{% endif %}
        </table>
    </div>
</div>

{% set ft = wine.food_tags or (dossier.frontmatter.food_tags if dossier and dossier.frontmatter else none) %}
{% if ft %}
<details class="food-tags-detail" style="margin-bottom:1.5rem;">
    <summary style="font-size:0.85rem; font-weight:bold; cursor:pointer;">Food Pairings ({{ ft|length }} tags)</summary>
    <div class="food-tags-wrap" style="margin-top:0.5rem;">
        {% for t in ft %}<span class="badge-sm">{{ t|replace("-", " ")|replace("_", " ")|title }}</span>{% endfor %}
    </div>
</details>
{% endif %}

<div class="tab-bar">
    <a href="/cellar/{{ wine.wine_id }}?tab=dossier" class="{% if tab == 'dossier' %}active{% endif %}">Dossier</a>
    <a href="/cellar/{{ wine.wine_id }}?tab=bottles" class="{% if tab == 'bottles' %}active{% endif %}">Bottles ({{ bottles|length }})</a>
    <a href="/cellar/{{ wine.wine_id }}?tab=raw" class="{% if tab == 'raw' %}active{% endif %}">Raw MD</a>
</div>

{% if tab == "dossier" %}
    {% if dossier and dossier.sections %}
    <div class="dossier-nav">
        {% for s in dossier.sections %}
        <a href="#{{ s.slug }}" class="{% if s.populated %}populated{% endif %}">{{ s.heading }}</a>
        {% endfor %}
    </div>
    {% for s in dossier.sections %}
    <div class="dossier-section" id="{{ s.slug }}">
        <h3>{{ s.heading }}</h3>
        {% if s.populated %}
        {{ s.html | safe }}
        {% else %}
        <p style="color:var(--pico-muted-color); font-style:italic;">Not yet populated.</p>
        {% endif %}
    </div>
    {% endfor %}
    {% else %}
    <p style="color:var(--pico-muted-color); font-style:italic;">No dossier available for this wine.</p>
    {% endif %}

{% elif tab == "bottles" %}
    {% if bottles %}
    <figure>
    <table role="grid">
        <thead>
            <tr>
                <th>ID</th><th>Cellar</th><th>Shelf</th><th>Price</th><th>Status</th>
            </tr>
        </thead>
        <tbody>
            {% for b in bottles %}
            <tr>
                <td class="mono">{{ b.bottle_id }}</td>
                <td>{{ b.cellar_name or "—" }}</td>
                <td>{{ b.shelf or "—" }}</td>
                <td>{% if b.price %}CHF {{ "%.2f"|format(b.price) }}{% else %}—{% endif %}</td>
                <td><span class="badge {% if b.status == 'stored' %}badge-ok{% elif b.status == 'on order' %}badge-warn{% endif %}">{{ b.status }}</span></td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
    </figure>
    {% else %}
    <p style="color:var(--pico-muted-color); font-style:italic;">No bottles found for this wine.</p>
    {% endif %}

{% elif tab == "raw" %}
    {% if dossier %}
    <pre><code>{{ dossier.raw }}</code></pre>
    {% else %}
    <p style="color:var(--pico-muted-color); font-style:italic;">No dossier source available.</p>
    {% endif %}
{% endif %}
{% endblock %}