{% extends "base.html" %}
{% block title %}Quality Review Queue{% endblock %}

{% block content %}
<div class="page-header">
                <h1 class="page-title">Quality Review Queue</h1>
                <p class="page-subtitle">Cocktails waiting for a rating or an N/A mark</p>
            </div>

        <div class="card">
            {% if next_row %}
                <div class="button-row">
                    <a class="button-link primary" href="#item-{{ next_row.line_item_id }}">Jump to next item</a>
                    <a class="button-link" href="/line-items/?category=cocktail">Open all cocktails</a>
                </div>
            {% else %}
                <p class="empty-state">No cocktail line items are waiting for quality review.</p>
            {% endif %}
        </div>

        <div class="card">
            <h2 class="card-title">Pending quality reviews</h2>

            {% if rows %}
                {% for row in rows %}
                <div class="card" id="item-{{ row.line_item_id }}" style="margin-bottom: 1rem;">
                    <div class="topbar" style="margin-bottom: 0.75rem;">
                        <div>
                            <div class="page-subtitle">{{ row.transaction_date }} · {{ row.merchant }}</div>
                            <h3 class="card-title" style="margin: 0.2rem 0 0 0;">{{ row.description }}</h3>
                            <div class="page-subtitle">{{ row.raw_description }}</div>
                        </div>
                        <div class="badges">
                            <span class="badge">{{ row.category }}</span>
                            {% if row.quantity %}
                                <span class="badge">Qty {{ row.quantity }}</span>
                            {% endif %}
                            {% if row.line_total %}
                                <span class="badge">${{ row.line_total }}</span>
                            {% endif %}
                        </div>
                    </div>

                    <form method="post" action="/line-items/{{ row.line_item_id }}/review">
                        <input type="hidden" name="return_to" value="quality_queue">

                        <div class="form-grid">
                            <div class="form-field">
                                <label for="quality_rating_{{ row.line_item_id }}">Quality rating</label>
                                <input id="quality_rating_{{ row.line_item_id }}" type="text" name="quality_rating" value="{{ row.quality_rating }}" placeholder="e.g. 8">
                            </div>
                            <div class="form-field full">
                                <label for="quality_note_{{ row.line_item_id }}">Quality note</label>
                                <textarea id="quality_note_{{ row.line_item_id }}" name="quality_note" rows="3" placeholder="Taste, sweetness, strength, food notes...">{{ row.quality_note }}</textarea>
                            </div>
                        </div>

                        <div class="button-row" style="margin-top: 1rem;">
                            <button class="primary" type="submit" name="quality_status" value="rated">Save rating</button>
                            <button type="submit" name="quality_status" value="na">Mark N/A</button>
                            <a class="button-link" href="/documents/{{ row.document_id }}?tab=extracted-fields">Open document</a>
                        </div>
                    </form>
                </div>
                {% endfor %}
            {% else %}
                <p class="empty-state">Nothing is waiting in the quality review queue.</p>
            {% endif %}
        </div>

{% endblock %}