package admin

import "fmt"

templ (a *AdminPlugin) page() {
    <div class="grid-container">
        <form>
        <div class="grid-x grid-margin-x align-bottom">
            <h2>App Pass</h2>
        </div>
        <div class="grid-x grid-margin-x align-bottom">
            <div class="cell auto">
                <label for="password">Password:
                    <input type="text" name="password"></input>
                </label>
            </div>
            <div class="cell auto">
                <label for="secret">Secret:
                    <input type="text" name="secret"></input>
                </label>
            </div>
            <div class="cell auto">
                <button hx-post="/apppass/api" hx-target="#data" class="button">List</button>
                <button hx-put="/apppass/api" hx-target="#data" class="submit success button">New</button>
            </div>
        </div>

        <div class="grid-x">
            <div class="cell" id="data"></div>
        </div>
        </form>
    </div>
}

templ (a *AdminPlugin) showPassword(entry PassEntry) {
    <div><span style="margin-right: 2em">ID</span><span>{ fmt.Sprintf(" %d", entry.ID) }</span></div>
    <div><span style="margin-right: 2em">Password</span><span> { entry.Secret }:{ entry.Pass }</span></div>
}

templ (a *AdminPlugin) entries(items []PassEntry) {
        <div>
            if len(items) == 0 {
                <span>No items</span>
            }
            <ul>
                for _, entry := range items {
                    <li>
                        <button href="#"
                            class="button alert tiny"
                            style="vertical-align: baseline"
                            hx-delete="/apppass/api"
                            hx-confirm={ fmt.Sprintf("Are you sure you want to delete %d?", entry.ID) }
                            hx-target="#data"
                            name="id" value={ fmt.Sprintf("%d", entry.ID) }>X</button>
                            { fmt.Sprintf("%d", entry.ID) }
                    </li>
                }
            </ul>
        </div>
}

templ renderError(err error) {
    <div>{ err.Error() }</div>
}

templ vars(items []ConfigEntry) {
        <div class="container">
            <h2>Variables</h2>
            <table class="hover striped">
                <thead>
                <tr>
                    <th>Key</th>
                    <th>Value</th>
                </tr>
                </thead>
                <tbody>
                for _, item := range items {
                    <tr>
                        <td>{ item.Key }</td><td>{ item.Value }</td>
                    </tr>
                }
                if len(items) == 0 {
                    <tr>
                        <td colspan="2">No data</td>
                    </tr>
                }
                </tbody>
            </table>
        </div>
}