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

{{define "content"}}
<div class="level">
    <div class="level-left">
        <div class="level-item">
            <h1 class="title">Customers</h1>
        </div>
    </div>
    <div class="level-right">
        <div class="level-item">
            <a href="/customers/new" class="button is-primary">
                <span class="icon">
                    <i class="fas fa-plus"></i>
                </span>
                <span>New Customer</span>
            </a>
        </div>
    </div>
</div>

<!-- Search Box -->
<div class="box">
    <div class="field has-addons">
        <div class="control has-icons-left is-expanded">
            <input class="input" type="text" placeholder="Search customers..." 
                   name="search" id="customer-search"
                   hx-get="/customers/search" 
                   hx-trigger="keyup changed delay:500ms" 
                   hx-target="#customer-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('customer-search').value=''">
                Clear
            </button>
        </div>
    </div>
</div>

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