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

{% block head_extra %}
<style>
    .search-container { margin-bottom: 2rem; }
    .result-item {
        padding: 1rem;
        border-bottom: 1px solid #dee2e6;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
    }
    .result-item:last-child { border-bottom: none; }
    .result-title { font-weight: 600; margin-bottom: 0.25rem; }
    .result-meta { font-size: 0.875rem; color: #6c757d; }
    .result-detail { font-size: 0.875rem; color: #6c757d; margin-top: 0.25rem; }
    .result-notes { font-size: 0.875rem; margin-top: 0.5rem; font-style: italic; }
    .no-results { padding: 2rem; text-align: center; color: #6c757d; }
</style>
{% endblock %}

{% block content %}
<main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
    <div
        class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
        <h1 class="h2">Search Wines</h1>
    </div>

<div class="container" style="margin-bottom: 100px;">
    <form method="get" action="{% url 'drinks:wine_search' %}" class="search-container">
        <div class="row">
            <div class="col-md-8">
                <input type="text"
                       name="q"
                       class="form-control form-control-lg"
                       placeholder="Search for a wine..."
                       value="{{ query }}">
            </div>
            <div class="col-md-4">
                <button type="submit" class="btn btn-primary btn-lg">Search</button>
            </div>
        </div>
    </form>

    {% if query %}
    <div class="search-results">
        {% if results %}
        <p class="text-muted">{{ results|length }} result{{ results|length|pluralize }}</p>
        {% for wine in results %}
        <div class="result-item">
            <div>
                <div class="result-title">{{ wine.full_wine_name }}</div>
                <div class="result-meta">
                    {{ wine.winery }} &middot; {{ wine.region }} &middot; {{ wine.vintage }}
                </div>
                <div class="result-detail">
                    {{ wine.wine_type }} &middot; {{ wine.grape_variety }} &middot; {{ wine.alc_percentage }}% ABV
                </div>
                {% if wine.tasting_notes %}
                <div class="result-notes">{{ wine.tasting_notes }}</div>
                {% endif %}
            </div>
            <form method="post" action="{% url 'drinks:wine_scrobble_from_search' %}">
                {% csrf_token %}
                <input type="hidden" name="wine_index" value="{{ forloop.counter0 }}">
                <input type="hidden" name="query" value="{{ query }}">
                <button type="submit" class="btn btn-sm btn-outline-success">Scrobble</button>
            </form>
        </div>
        {% endfor %}
        {% else %}
        <div class="no-results">
            No wines found matching your search.
        </div>
        {% endif %}
    </div>
    {% else %}
    <div class="no-results">
        <p>Enter a wine name to search via FastCork.</p>
    </div>
    {% endif %}
</div>
</main>
{% endblock %}