package fact

import "fmt"

templ (p *FactoidPlugin) factIndex() {
    <div class="grid-container">
        <div class="grid-x">
            <div class="cell">
                <h2>Factoid</h2>
            </div>
        </div>
        <form
            hx-post="/factoid/search"
            hx-target="#results">
        <div class="grid-x grid-margin-x">
            <div class="cell auto">
                <input type="text"
                    name="query"
                    class="form-control"
                    placeholder="Query..."
                 />
             </div>
             <div class="cell small-1">
                <button class="button">Search</button>
            </div>
        </div>
        </form>
        <div class="grid-x" id="results">
        </div>
    </div>
}

templ (p *FactoidPlugin) searchResults(facts []*Factoid) {
    <table class="table">
        <thead>
        <tr>
            <th>Fact</th>
            <th>Tidbit</th>
            <th>Owner</th>
            <th>Count</th>
        </tr>
        </thead>
        <tbody>
        for _, f := range facts {
            @p.searchResult(f)
        }
        </tbody>
    </table>
}

templ (p *FactoidPlugin) searchResult(fact *Factoid) {
    <tr>
        <td>{ fact.Fact }</td>
        <td>{ fact.Tidbit }</td>
        <td>{ fact.Owner }</td>
        <td>{ fmt.Sprint(fact.Count) }</td>
    </tr>
}