{{template "base" .}}

{{define "naslov"}}{{if .Izmena}}Izmena usluge{{else}}Nova usluga{{end}} — NTech{{end}}

{{define "sadrzaj"}}
<div class="kolona" style="gap:16px;max-width:680px;">

    <a href="/usluge" class="nazad-link" hx-boost="true" hx-target="#glavni-sadrzaj" hx-select="#glavni-sadrzaj" hx-swap="outerHTML">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="15 18 9 12 15 6"/></svg>
        Nazad na usluge
    </a>

    {{if .Greska}}
    <div class="poruka-greska">{{.Greska}}</div>
    {{end}}

    <form method="POST" action="{{if .Izmena}}/usluge/izmeni/{{.Usluga.ID}}{{else}}/usluge/nova{{end}}">
        <input type="hidden" name="_csrf" value="{{.CsrfToken}}">
        <div class="kartica animiraj">
            <div style="margin-bottom:16px;padding-bottom:12px;border-bottom:0.5px solid var(--ivica);">
                <span style="font-size:15px;font-weight:500;color:var(--tekst-glavni);">{{if .Izmena}}Izmena usluge{{else}}Nova usluga{{end}}</span>
            </div>

            <div class="kolona" style="gap:14px;">
                <div class="forma-grid-2">
                    <div>
                        <label class="polje-labela">Naziv usluge</label>
                        <input type="text" name="naziv" value="{{.Usluga.Naziv}}" style="width:100%;"
                            placeholder="npr. Čišćenje laptopa">
                    </div>
                    <div>
                        <label class="polje-labela">Šifra</label>
                        <input type="text" name="sifra" value="{{.Usluga.Sifra}}" style="width:100%;"
                            placeholder="npr. USL-001">
                    </div>
                </div>

                <div class="forma-grid-3">
                    <div>
                        <label class="polje-labela">Jedinica mere</label>
                        {{$jm := .Usluga.JedinicaMere}}
                        <select name="jedinica_mere" style="width:100%;">
                            <option value="usluga" {{if eq $jm "usluga"}}selected{{end}}>usluga (fiksno)</option>
                            <option value="sat" {{if eq $jm "sat"}}selected{{end}}>sat</option>
                            <option value="kom" {{if eq $jm "kom"}}selected{{end}}>kom</option>
                        </select>
                    </div>
                    <div>
                        <label class="polje-labela">Cena usluge (din)</label>
                        <input type="number" name="cena" min="0" step="0.01"
                            value="{{if .Usluga.Cena}}{{.Usluga.Cena}}{{end}}" placeholder="0" style="width:100%;">
                    </div>
                    <div>
                        <label class="polje-labela">PDV stopa</label>
                        {{$pdv := .Usluga.PdvStopa}}
                        <select name="pdv_stopa" style="width:100%;">
                            <option value="20" {{if eq $pdv 20.0}}selected{{end}}>20%</option>
                            <option value="10" {{if eq $pdv 10.0}}selected{{end}}>10%</option>
                            <option value="0" {{if eq $pdv 0.0}}selected{{end}}>0%</option>
                        </select>
                    </div>
                </div>

                <div>
                    <label class="polje-labela">Opis</label>
                    <textarea name="opis" rows="2" placeholder="Kratak opis usluge..."
                        style="width:100%;resize:vertical;">{{.Usluga.Opis}}</textarea>
                </div>
            </div>

            <div style="display:flex;justify-content:flex-end;gap:10px;margin-top:20px;">
                <a hx-boost="true" hx-target="#glavni-sadrzaj" hx-select="#glavni-sadrzaj" hx-swap="outerHTML" href="/usluge" class="btn-sekundarno">Odustani</a>
                <button type="submit" class="btn-primarno">Sačuvaj uslugu</button>
            </div>
        </div>
    </form>

</div>
{{end}}