{{define "title"}}Products - CMC Sales{{end}}

{{define "content"}}
<div class="level">
    <div class="level-left">
        <div class="level-item">
            <h1 class="title">Products</h1>
        </div>
    </div>
    <div class="level-right">
        <div class="level-item">
            <a href="/products/new" class="button is-primary">
                <span class="icon">
                    <i class="fas fa-plus"></i>
                </span>
                <span>New Product</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 products..." 
                           name="search" id="product-search"
                           hx-get="/products/search" 
                           hx-trigger="keyup changed delay:500ms" 
                           hx-target="#product-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('product-search').value=''; document.getElementById('product-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="category" 
                                hx-get="/products/filter" 
                                hx-trigger="change" 
                                hx-target="#product-table-container">
                            <option value="">All Categories</option>
                            <option value="1">Category 1</option>
                            <option value="2">Category 2</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Product Table Container -->
<div id="product-table-container">
    {{template "product-table" .}}
</div>
{{end}}