{% 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-nutrition { font-size: 0.875rem; margin-top: 0.5rem; }
    .result-nutrition span { margin-right: 1rem; }
    .no-results { padding: 2rem; text-align: center; color: #6c757d; }
    .result-image { width: 60px; height: 60px; object-fit: contain; margin-right: 1rem; }
    .result-row { display: flex; align-items: flex-start; }
</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 Food & Drinks</h1>
    </div>

<div class="container" style="margin-bottom: 100px;">
    <form method="get" action="{% url 'foods:food_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 food or drink product..."
                       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 product in results %}
        <div class="result-item">
            <div class="result-row">
                {% if product.image_url %}
                <img src="{{ product.image_url }}" alt="" class="result-image">
                {% endif %}
                <div>
                    <div class="result-title">{{ product.product_name }}</div>
                    <div class="result-meta">
                        {% if product.brands %}{{ product.brands }}{% endif %}
                        {% if product.categories %} &middot; {{ product.categories|join:", " }}{% endif %}
                    </div>
                    {% if product.nutriments.calories %}
                    <div class="result-nutrition">
                        <span>{{ product.nutriments.calories }} kcal</span>
                        {% if product.nutriments.protein %}<span>P {{ product.nutriments.protein }}g</span>{% endif %}
                        {% if product.nutriments.fat %}<span>F {{ product.nutriments.fat }}g</span>{% endif %}
                        {% if product.nutriments.carbohydrates %}<span>C {{ product.nutriments.carbohydrates }}g</span>{% endif %}
                    </div>
                    {% endif %}
                </div>
            </div>
            <form method="post" action="{% url 'foods:food_scrobble_from_search' %}">
                {% csrf_token %}
                <input type="hidden" name="product_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 products found matching your search.
        </div>
        {% endif %}
    </div>
    {% else %}
    <div class="no-results">
        <p>Enter a food or drink name to search via Open Food Facts.</p>
    </div>
    {% endif %}
</div>
</main>
{% endblock %}