{{define "content"}}
<div class="container">
    <div class="columns">
        <div class="column">
            <h1 class="title">Documents</h1>
            <p class="subtitle">Manage your documents (Quotes, Invoices, Purchase Orders, etc.)</p>
        </div>
        <div class="column is-narrow">
            <div class="field has-addons">
                <div class="control">
                    <div class="select">
                        <select id="type-filter" onchange="filterDocuments()">
                            <option value="">All Types</option>
                            <option value="quote" {{if eq .DocType "quote"}}selected{{end}}>Quotes</option>
                            <option value="invoice" {{if eq .DocType "invoice"}}selected{{end}}>Invoices</option>
                            <option value="purchaseOrder" {{if eq .DocType "purchaseOrder"}}selected{{end}}>Purchase Orders</option>
                            <option value="orderAck" {{if eq .DocType "orderAck"}}selected{{end}}>Order Acknowledgements</option>
                            <option value="packingList" {{if eq .DocType "packingList"}}selected{{end}}>Packing Lists</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="columns">
        <div class="column">
            <div class="field">
                <div class="control">
                    <input class="input" type="text" id="search-input" placeholder="Search by reference, filename, or user..." 
                           hx-get="/documents/search" 
                           hx-target="#document-table"
                           hx-trigger="keyup changed delay:500ms, search"
                           hx-include="#type-filter">
                </div>
            </div>
        </div>
    </div>

    <div id="document-table">
        {{template "document-table" .}}
    </div>
</div>

<script>
function filterDocuments() {
    const typeFilter = document.getElementById('type-filter');
    const searchInput = document.getElementById('search-input');
    
    let url = '/documents';
    if (typeFilter.value) {
        url += '?type=' + encodeURIComponent(typeFilter.value);
    }
    
    // Clear search when changing type filter
    searchInput.value = '';
    
    // Update the table via HTMX
    htmx.ajax('GET', url, {
        target: '#document-table',
        headers: {'HX-Request': 'true'}
    });
}
</script>
{{end}}