{{define "customer-table"}}
<div class="table-container">
    <table class="table is-fullwidth is-striped is-hoverable">
        <thead>
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Trading Name</th>
                <th>ABN</th>
                <th>Payment Terms</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
            {{range .Customers}}
            <tr>
                <td>{{.ID}}</td>
                <td>
                    <a href="/customers/{{.ID}}">{{.Name}}</a>
                </td>
                <td>{{.TradingName}}</td>
                <td>{{.Abn}}</td>
                <td>{{.PaymentTerms}}</td>
                <td>
                    <div class="buttons are-small">
                        <a href="/customers/{{.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="/customers/{{.ID}}" 
                                hx-confirm="Are you sure you want to delete this customer?"
                                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="6" class="has-text-centered">
                    <p class="has-text-grey">No customers found</p>
                </td>
            </tr>
            {{end}}
        </tbody>
    </table>
</div>

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