{% extends 'base.html' %}
{% load static %}
{% block title %}Cook Assistant — PickkerMarket{% endblock %}
{% block content %}
<section class="page-hero" style="background-image: url('{% static 'img/tomato-web.jpg' %}');">
    <div class="page-hero-inner">
        <h1>{{ t.cook_hero_title }}</h1>
        <p>{{ t.cook_hero_subtitle }}</p>
    </div>
</section>

<section class="content-section">
    <div class="content-inner" style="max-width: 700px;">
        <form method="post" class="auth-form">
            {% csrf_token %}
            <label for="dish-input">{{ t.cook_dish_label }}</label>
            <input type="text" id="dish-input" name="dish" value="{{ dish_query }}" placeholder="{{ t.cook_dish_placeholder }}" required>
            <button type="submit" class="btn-cta">{{ t.cook_ask_button }}</button>
        </form>

        {% if error %}
        <div class="field-error" style="margin-top: 20px;">{{ error }}</div>
        {% endif %}

        {% if result %}
        <div style="margin-top: 32px;">
            <h3>{{ t.cook_shopping_list_for }} "{{ result.dish }}"</h3>

            {% if result.matched %}
            <form method="post" action="{% url 'market:cook_assistant_add_to_cart' %}">
                {% csrf_token %}
                <table class="cart-table" style="margin-top: 14px;">
                    <thead>
                        <tr><th></th><th>{{ t.cook_th_ingredient }}</th><th>{{ t.cook_th_market_as }}</th><th>{{ t.cook_th_price }}</th></tr>
                    </thead>
                    <tbody>
                        {% for item in result.matched %}
                        <tr>
                            <td><input type="checkbox" name="product_id" value="{{ item.product.id }}" checked></td>
                            <td>{{ item.ingredient_name }} <small style="color: var(--muted);">({{ item.quantity_text }})</small></td>
                            <td>{{ item.product.name }}</td>
                            <td>TSh {{ item.product.market_price|floatformat:0 }}/{{ item.product.unit }}</td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
                <div style="text-align: right; margin-top: 16px;">
                    <button type="submit" class="btn-cta">{{ t.cook_add_selected }}</button>
                </div>
            </form>
            {% endif %}

            {% if result.unmatched %}
            <p style="margin-top: 20px; color: var(--muted); font-size: 0.92rem;">
                {{ t.cook_not_in_market }} {% for item in result.unmatched %}{{ item.ingredient_name }}{% if not forloop.last %}, {% endif %}{% endfor %}
            </p>
            {% endif %}

            {% if not result.matched and not result.unmatched %}
            <p style="color: var(--muted);">{{ t.cook_no_match }}</p>
            {% endif %}
        </div>
        {% endif %}
    </div>
</section>
{% endblock %}