{{define "title"}}
    Orders
{{end}}
{{define "main"}}
<main>
    <div class="search-container">
        <input
            type="search"
            name="q"
            hx-get="/orders/search"
            hx-trigger="keyup changed delay:500ms"
            hx-target="#results-table"
            hx-push-url="true"
            placeholder="Search orders..."
            >

        <div class="htmx-indicator">
            Searching...
        </div>

        <div id="results-table">
            {{template "orders-table" .}}
        </div>
    </div>
</main>
{{end}}

{{define "orders-table"}}
    <table id="orders_table">
        <tr>
            <th></th>
            <th>Name</th>
            <th>Surname</th>
            <th>Phone</th>
            <th>Location</th>
            <th>Date</th>
            <th>Accepted</th>
            <th>Status</th>
            <th>Total</th>
        </tr>
        {{range .}}
        <tr>
            <th><a href="/order/{{.ID}}">edit</a></th>
            <th>{{.Name}}</th>
            <th>{{.Surname}}</th>
            <th>{{.Phone}}</th>
            <th>{{.Location}}</th>
            <th>{{.Date.Format "2006-01-02"}}</th>
            <th>{{.Accepted.Format "2006-01-02"}}</th>
            <th>{{.Status}}</th>
            <th>{{.Total}}</th>
        </tr>
        {{end}}
    </table>
    {{end}}