{{template "base" .}}

{{define "naslov"}}Kategorije — NTech{{end}}

{{define "sadrzaj"}}
<div style="display:flex;flex-direction:column;gap:16px;">

    {{if .Sacuvano}}
    <div class="poruka-uspeh">Kategorija je uspešno sačuvana.</div>
    {{end}}
    {{if .Obrisana}}
    <div class="poruka-uspeh">Kategorija je uspešno obrisana.</div>
    {{end}}

    <!-- nazad dugme -->
    <a href="/magacin" style="display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--tekst-sporedni);text-decoration:none;">
        <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"><polyline points="15 18 9 12 15 6"/></svg>
        Nazad na magacin
    </a>

    <!-- forma za novu kategoriju -->
    <div class="kartica">
        <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);">Nova kategorija</span>
        </div>
        <form method="POST" action="/magacin/kategorije/dodaj">
            <div style="display:flex;flex-direction:column;gap:12px;">
                <div>
                    <label style="font-size:13px;color:var(--tekst-sporedni);display:block;margin-bottom:6px;">
                        Naziv <span style="color:#dc2626;">*</span>
                    </label>
                    <input type="text" name="naziv" placeholder="npr. Memorija, Diskovi, Kablovi..."
                        style="width:100%;">
                </div>
                <div>
                    <label style="font-size:13px;color:var(--tekst-sporedni);display:block;margin-bottom:6px;">Opis</label>
                    <input type="text" name="opis" placeholder="Kratak opis kategorije..."
                        style="width:100%;">
                </div>
                <div style="display:flex;justify-content:flex-end;">
                    <button type="submit"
                        style="padding:8px 20px;background:var(--sb-akcent);color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:500;cursor:pointer;">
                        Dodaj kategoriju
                    </button>
                </div>
            </div>
        </form>
    </div>

    <!-- lista kategorija -->
    <div class="kartica" style="padding:0;overflow:hidden;">
        <div style="padding:14px 16px;border-bottom:0.5px solid var(--ivica);">
            <span style="font-size:14px;font-weight:500;color:var(--tekst-glavni);">Postojeće kategorije</span>
        </div>
        {{range .Kategorije}}
        <div style="display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:0.5px solid var(--ivica);">
            <div style="flex:1;">
                <div style="font-size:14px;color:var(--tekst-glavni);">{{.Naziv}}</div>
                {{if .Opis}}
                <div style="font-size:12px;color:var(--tekst-sporedni);margin-top:2px;">{{.Opis}}</div>
                {{end}}
            </div>
            <a href="/magacin/kategorije/obrisi/{{.ID}}"
                onclick="return confirm('Da li ste sigurni da želite da obrišete ovu kategoriju?')"
                style="padding:4px 10px;background:#dc2626;color:#fff;border-radius:6px;font-size:12px;text-decoration:none;white-space:nowrap;">
                Obriši
            </a>
        </div>
        {{else}}
        <div style="padding:24px;text-align:center;font-size:14px;color:var(--tekst-sporedni);">
            Nema kategorija. Dodaj prvu kategoriju iznad.
        </div>
        {{end}}
    </div>

</div>
{{end}}