{{template "base" .}}

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

{{define "dodatni-css"}}
<style>
    .poruka-animacija { animation: slideDown 0.3s ease forwards; }
    .kat-forma-kartica { animation-delay: 0.04s; }
    .kat-red:nth-child(1) { animation-delay: 0.12s; }
    .kat-red:nth-child(2) { animation-delay: 0.18s; }
    .kat-red:nth-child(3) { animation-delay: 0.24s; }
    .kat-red:nth-child(4) { animation-delay: 0.30s; }
    .kat-red:nth-child(5) { animation-delay: 0.36s; }
    .kat-red:nth-child(6) { animation-delay: 0.42s; }
    .kat-red:nth-child(7) { animation-delay: 0.48s; }
    .kat-red:nth-child(8) { animation-delay: 0.54s; }
</style>
{{end}}

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

    {{if .Sacuvano}}
    <div class="poruka-uspeh poruka-animacija">Kategorija je uspešno sačuvana.</div>
    {{end}}
    {{if .Obrisana}}
    <div class="poruka-uspeh poruka-animacija">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>

    {{if index $.Dozvole "kategorija.dodaj"}}
    <!-- forma za novu kategoriju -->
    <div class="kartica kat-forma-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);">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>
    {{end}}

    <!-- 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 class="kat-red animiraj" 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>
            {{if index $.Dozvole "kategorija.obrisi"}}
            <a href="/magacin/kategorije/obrisi/{{.ID}}" class="btn-obrisi-malo"
                data-potvrda="Da li ste sigurni da želite da obrišete ovu kategoriju?">
                Obriši
            </a>
            {{end}}
        </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}}