package view

import (
    "stevenlr.com/timer/model"
    "fmt"
)

templ timer(t model.Timer) {
    <p class="timer-row">
        <a href={ templ.URL(fmt.Sprint("/timer/", t.Id)) }>{ t.Name }</a>
        -
        <a
            href="javascript:void(0);"
            hx-delete={ fmt.Sprint("/timer/", t.Id) }
            hx-target="closest .timer-row"
        >Delete</a>
    </p>
}

templ TimerCreateForm(timerName string, err string) {
    <form
        hx-put="/timer"
        hx-target="closest .timers-list"
        hx-target-error="this"
    >
        <p>
            <input type="text" name="timerName" value={ timerName } placeholder="Name" />
            <input type="number" name="days" placeholder="Days" style="width: 5em;" />
            <input type="number" name="hours" placeholder="Hours" style="width: 5em;" />
            <button type="submit">Create</button>
        </p>
        if err != "" {
            <p class="error">{ err }</p>
        }
    </form>
}

templ TimersList(timers []model.Timer) {
    <div class="timers-list">
        <h1>Timers</h1>
        for _, t := range timers {
            @timer(t)
        }
        <h4>Create timer</h4>
        @TimerCreateForm("", "")
    </div>
}