{% extends "base.html" %}
{% block title %}Documents{% endblock %}

{% block content %}
<div class="page-header">
                <h1 class="page-title">Documents</h1>
                <p class="page-subtitle">Browse all documents or refine with advanced search.</p>
            </div>
<div class="button-row" style="margin:0.75rem 0;">
    <a class="button-link" href="/documents/export/training.jsonl">Export document training</a>
    <a class="button-link" href="/documents/export/training.jsonl?type=line_items">Export line item training</a>
</div>


        <div class="card">
            <div class="right-pane-tabs">
                <button class="tab-button{% if active_tab == 'all-documents' %} active{% endif %}" type="button" data-tab="all-documents">All Documents</button>
                <button class="tab-button{% if active_tab == 'advanced-search' %} active{% endif %}" type="button" data-tab="advanced-search">Advanced Search</button>
            </div>

            <div class="tab-panel{% if active_tab == 'all-documents' %} active{% endif %}" data-panel="all-documents">
                <h2 class="card-title">All Documents</h2>
                <p class="page-subtitle">Showing all active documents. Use the quick search below or switch to Advanced Search.</p>

                <form method="get" action="/documents/">
                    <input type="hidden" name="tab" value="all-documents">
                    <div class="form-grid">
                        <div class="form-field">
                            <input id="q" type="text" name="q" value="{{ q }}" placeholder="merchant, filename, document id, owner, note">
                        </div>
                    </div>

                    <div class="button-row" style="margin-top: 1rem;">
                        <button class="primary" type="submit">Search</button>
                        <a class="button-link" href="/documents/?tab=all-documents">Clear</a>
                    </div>
                </form>
            </div>

            <div class="tab-panel{% if active_tab == 'advanced-search' %} active{% endif %}" data-panel="advanced-search">
                <h2 class="card-title">Advanced Search</h2>

                <form method="get" action="/documents/">
                    <input type="hidden" name="tab" value="advanced-search">
                    <div class="form-grid">
                        <div class="form-field">
                            <label for="q_advanced">Search</label>
                            <input id="q_advanced" type="text" name="q" value="{{ q }}" placeholder="merchant, filename, document id, owner, note">
                        </div>
                        <div class="form-field">
                            <label for="document_type">Document type</label>
                            <input id="document_type" type="text" name="document_type" value="{{ document_type }}" placeholder="receipt">
                        </div>
                        <div class="form-field">
                            <label for="review_status">Review status</label>
                            <input id="review_status" type="text" name="review_status" value="{{ review_status }}" placeholder="reviewed">
                        </div>
                        <div class="form-field">
                            <label for="merchant">Merchant contains</label>
                            <input id="merchant" type="text" name="merchant" value="{{ merchant }}" placeholder="Bar Margaret">
                        </div>
                        <div class="form-field">
                            <label for="owner_primary">Owner contains</label>
                            <input id="owner_primary" type="text" name="owner_primary" value="{{ owner_primary }}" placeholder="Sean McElwain">
                        </div>
                    </div>

                    <div class="button-row" style="margin-top: 1rem;">
                        <button class="primary" type="submit">Search</button>
                        <a class="button-link" href="/documents/?tab=advanced-search">Clear</a>
                    </div>
                </form>
            </div>
        </div>

        <div class="card">
            <h2 class="card-title">Documents</h2>

            {% if documents %}
                <div class="table-wrap">
                    <table>
                        <thead>
                            <tr>
                                <th>Document</th>
                                <th>Type</th>
                                <th>Review Status</th>
                                <th>Current Path</th>
                                <th>Updated</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for doc in documents %}
                            <tr>
                                <td><a href="/documents/{{ doc.document_id }}">{{ doc.document_id }}</a></td>
                                <td>{{ doc.document_type }}</td>
                                <td>
                                    <span class="badge {% if doc.review_status == 'reviewed' %}reviewed{% else %}pending{% endif %}">
                                        {{ doc.review_status }}
                                    </span>
                                </td>
                                <td>{{ doc.current_path }}</td>
                                <td>{{ doc.updated_at }}</td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            {% else %}
                <p class="empty-state">No documents matched the current search.</p>
            {% endif %}
        </div>

{% endblock %}