{{define "purchase-order-table"}}
<div class="table-container">
    <table class="table is-fullwidth is-striped is-hoverable">
        <thead>
            <tr>
                <th>PO Number</th>
                <th>Issue Date</th>
                <th>Dispatch Date</th>
                <th>Ordered From</th>
                <th>Description</th>
                <th>Status</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
            {{range .PurchaseOrders}}
            <tr>
                <td>
                    <a href="/purchase-orders/{{.ID}}">{{.Title}}</a>
                </td>
                <td>{{formatDate .IssueDate}}</td>
                <td>{{formatDate .DispatchDate}}</td>
                <td>{{truncate .OrderedFrom 30}}</td>
                <td>{{truncate .Description 50}}</td>
                <td>
                    {{if .DateArrived}}
                        <span class="tag is-success">Arrived</span>
                    {{else if .DispatchDate}}
                        <span class="tag is-warning">Dispatched</span>
                    {{else}}
                        <span class="tag is-info">Pending</span>
                    {{end}}
                </td>
                <td>
                    <div class="buttons are-small">
                        <a href="/purchase-orders/{{.ID}}/edit" class="button is-info is-outlined">
                            <span class="icon">
                                <i class="fas fa-edit"></i>
                            </span>
                        </a>
                        <button class="button is-danger is-outlined" 
                                hx-delete="/purchase-orders/{{.ID}}" 
                                hx-confirm="Are you sure you want to delete this purchase order?"
                                hx-target="closest tr"
                                hx-swap="outerHTML">
                            <span class="icon">
                                <i class="fas fa-trash"></i>
                            </span>
                        </button>
                    </div>
                </td>
            </tr>
            {{else}}
            <tr>
                <td colspan="7" class="has-text-centered">
                    <p class="has-text-grey">No purchase orders found</p>
                </td>
            </tr>
            {{end}}
        </tbody>
    </table>
</div>

<!-- Pagination -->
{{if .PurchaseOrders}}
<nav class="pagination is-centered" role="navigation" aria-label="pagination">
    <a class="pagination-previous" {{if eq .Page 1}}disabled{{end}}
       hx-get="/purchase-orders?page={{.PrevPage}}" 
       hx-target="#po-table-container">Previous</a>
    <a class="pagination-next" {{if not .HasMore}}disabled{{end}}
       hx-get="/purchase-orders?page={{.NextPage}}" 
       hx-target="#po-table-container">Next</a>
    <ul class="pagination-list">
        <li><span class="pagination-ellipsis">Page {{.Page}}</span></li>
    </ul>
</nav>
{{end}}
{{end}}