{{define "product-table"}}
<div class="table-container">
    <table class="table is-fullwidth is-striped is-hoverable">
        <thead>
            <tr>
                <th>ID</th>
                <th>Title</th>
                <th>Item Code</th>
                <th>Description</th>
                <th>Model Number</th>
                <th>Stock Type</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
            {{range .Products}}
            <tr>
                <td>{{.ID}}</td>
                <td>
                    <a href="/products/{{.ID}}">{{.Title}}</a>
                </td>
                <td>
                    <span class="tag is-info">{{.ItemCode}}</span>
                </td>
                <td>{{truncate .Description 50}}</td>
                <td>{{if .ModelNumber.Valid}}{{.ModelNumber.String}}{{else}}<span class="has-text-grey">-</span>{{end}}</td>
                <td>
                    {{if .Stock}}
                        <span class="tag is-success">Stock</span>
                    {{else}}
                        <span class="tag is-warning">Indent</span>
                    {{end}}
                </td>
                <td>
                    <div class="buttons are-small">
                        <a href="/products/{{.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="/products/{{.ID}}" 
                                hx-confirm="Are you sure you want to delete this product?"
                                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 products found</p>
                </td>
            </tr>
            {{end}}
        </tbody>
    </table>
</div>

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