{{define "time-input"}}
<span style="display:inline-flex; align-items:center; gap:4px;">
    <select class="form-input" style="width:68px; padding-left:8px; padding-right:4px; text-align:center;"></select>
    <span style="font-weight:600; color:var(--text-muted);">:</span>
    <select class="form-input" style="width:68px; padding-left:8px; padding-right:4px; text-align:center;"></select>
    <input type="hidden" name="{{.name}}" value="{{.value}}">
</span>
<script>
(function() {
    const wrap = document.currentScript.previousElementSibling;
    const [hSel, mSel] = wrap.querySelectorAll('select');
    const hidden = wrap.querySelector('input[type="hidden"]');
    const parts = (hidden.value || '12:00').split(':');
    const initH = parseInt(parts[0], 10) || 0;
    const initM = parseInt(parts[1], 10) || 0;
    for (let h = 0; h < 24; h++) {
        const o = new Option(String(h).padStart(2, '0'), h);
        if (h === initH) o.selected = true;
        hSel.appendChild(o);
    }
    for (let m = 0; m < 60; m++) {
        const o = new Option(String(m).padStart(2, '0'), m);
        if (m === initM) o.selected = true;
        mSel.appendChild(o);
    }
    function sync() {
        hidden.value = String(+hSel.value).padStart(2, '0') + ':' + String(+mSel.value).padStart(2, '0');
    }
    hSel.addEventListener('change', sync);
    mSel.addEventListener('change', sync);
})();
</script>
{{end}}