{{template "base" .}}

{{define "naslov"}}{{if .Izmena}}Izmena troška{{else}}Nov trošak{{end}} — NTech{{end}}

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

    <a href="/troskovi" 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 troškove
    </a>

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

    <form method="POST" action="{{if .Izmena}}/troskovi/izmeni/{{.Trosak.ID}}{{else}}/troskovi/novi{{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 troška{{else}}Nov trošak{{end}}</span>
            </div>

            <div class="kolona" style="gap:14px;">
                <div class="forma-grid-2">
                    <div>
                        <label class="polje-labela">Naziv troška</label>
                        <input type="text" name="naziv" value="{{.Trosak.Naziv}}" style="width:100%;"
                            placeholder="npr. Prevoz">
                    </div>
                    <div>
                        <label class="polje-labela">Šifra</label>
                        <input type="text" name="sifra" value="{{.Trosak.Sifra}}" style="width:100%;"
                            placeholder="npr. TRO-001">
                    </div>
                </div>

                <div class="forma-grid-2">
                    <div>
                        <label class="polje-labela">Podrazumevana cena (din)</label>
                        <input type="number" name="cena" min="0" step="0.01"
                            value="{{if .Trosak.Cena}}{{.Trosak.Cena}}{{end}}" placeholder="0" style="width:100%;">
                    </div>
                    <div></div>
                </div>

                <div>
                    <label class="polje-labela">Opis</label>
                    <textarea name="opis" rows="2" placeholder="Kratak opis troška..."
                        style="width:100%;resize:vertical;">{{.Trosak.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="/troskovi" class="btn-sekundarno">Odustani</a>
                <button type="submit" class="btn-primarno">Sačuvaj trošak</button>
            </div>
        </div>
    </form>

</div>
{{end}}