{{define "title"}}Purchase Orders - CMC Sales{{end}}

{{define "content"}}
<div class="level">
    <div class="level-left">
        <div class="level-item">
            <h1 class="title">Purchase Orders</h1>
        </div>
    </div>
    <div class="level-right">
        <div class="level-item">
            <a href="/purchase-orders/new" class="button is-primary">
                <span class="icon">
                    <i class="fas fa-plus"></i>
                </span>
                <span>New Purchase Order</span>
            </a>
        </div>
    </div>
</div>

<!-- Search and Filter Box -->
<div class="box">
    <div class="columns">
        <div class="column">
            <div class="field has-addons">
                <div class="control has-icons-left is-expanded">
                    <input class="input" type="text" placeholder="Search purchase orders..." 
                           name="search" id="po-search"
                           hx-get="/purchase-orders/search" 
                           hx-trigger="keyup changed delay:500ms" 
                           hx-target="#po-table-container">
                    <span class="icon is-left">
                        <i class="fas fa-search"></i>
                    </span>
                </div>
                <div class="control">
                    <button class="button is-info" onclick="document.getElementById('po-search').value=''; document.getElementById('po-search').dispatchEvent(new Event('keyup'))">
                        Clear
                    </button>
                </div>
            </div>
        </div>
        <div class="column is-narrow">
            <div class="field">
                <div class="control">
                    <div class="select">
                        <select name="status" 
                                hx-get="/purchase-orders/filter" 
                                hx-trigger="change" 
                                hx-target="#po-table-container">
                            <option value="">All Status</option>
                            <option value="pending">Pending</option>
                            <option value="dispatched">Dispatched</option>
                            <option value="arrived">Arrived</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Purchase Order Table Container -->
<div id="po-table-container">
    {{template "purchase-order-table" .}}
</div>
{{end}}