{{template "base" .}}

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

{{define "dodatni-css"}}
<style>
    .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 class="kolona" style="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" class="nazad-link">
        <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 class="kolona" style="gap:12px;">
                <div>
                    <label class="polje-labela">
                        Naziv <span style="color:#dc2626;">*</span>
                    </label>
                    <input type="text" name="naziv" placeholder="npr. Memorija, Diskovi, Kablovi..."
                        style="width:100%;">
                </div>
                <div>
                    <label class="polje-labela">Kôd (prefiks šifre)</label>
                    <input type="text" name="kod" placeholder="npr. MEM (daje šifre MEM-0001)"
                        maxlength="10" style="width:100%;text-transform:uppercase;">
                    <div class="pomocni-tekst" style="margin-top:4px;">Samo slova i brojevi. Prazno = šifre kreću sa ART-.</div>
                </div>
                <div>
                    <label class="polje-labela">Opis</label>
                    <input type="text" name="opis" placeholder="Kratak opis kategorije..."
                        style="width:100%;">
                </div>
                <div>
                    <label class="polje-labela">Marža (%)</label>
                    <input type="number" name="marza" min="0" step="0.01"
                        placeholder="prazno = globalna marža" 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}}
                    {{if .Kod}}<span style="font-size:11px;font-family:monospace;color:var(--tekst-sporedni);background:var(--pozadina);border:0.5px solid var(--ivica);border-radius:4px;padding:1px 6px;margin-left:6px;">{{.Kod}}</span>{{end}}
                </div>
                {{if .Opis}}
                <div style="font-size:12px;color:var(--tekst-sporedni);margin-top:2px;">{{.Opis}}</div>
                {{end}}
            </div>
            {{if .Marza}}
            <span style="font-size:12px;color:var(--tekst-sporedni);white-space:nowrap;">marža {{.Marza}}%</span>
            {{end}}
            {{if index $.Dozvole "kategorija.izmeni"}}
            <button type="button" class="btn-primarno-malo" onclick="this.nextElementSibling.showModal()">Izmeni</button>
            {{/* nativni modal — isti obrazac kao u magacinu (top layer, centriran) */}}
            <dialog id="kat-{{.ID}}" class="premesti-modal" onclick="if(event.target===this)this.close()">
                <form method="dialog" class="premesti-zaglavlje">
                    <h3>Izmeni kategoriju</h3>
                    <button type="submit" class="premesti-zatvori" aria-label="Zatvori">&times;</button>
                </form>
                <form method="POST" action="/magacin/kategorije/izmeni/{{.ID}}" style="display:flex;flex-direction:column;gap:12px;padding:16px;">
                    <div>
                        <label class="polje-labela">Naziv <span style="color:#dc2626;">*</span></label>
                        <input type="text" name="naziv" value="{{.Naziv}}" required
                            style="width:100%;padding:8px 12px;border:0.5px solid var(--ivica);border-radius:8px;font-size:14px;background:var(--pozadina);color:var(--tekst-glavni);outline:none;">
                    </div>
                    <div>
                        <label class="polje-labela">Kôd (prefiks šifre)</label>
                        <input type="text" name="kod" value="{{.Kod}}" maxlength="10"
                            placeholder="npr. MEM"
                            style="width:100%;padding:8px 12px;border:0.5px solid var(--ivica);border-radius:8px;font-size:14px;background:var(--pozadina);color:var(--tekst-glavni);outline:none;text-transform:uppercase;">
                        {{if not .Kod}}<div class="pomocni-tekst" style="margin-top:4px;color:#f59e0b;">Kôd nije postavljen — artikli će koristiti prefiks ART-.</div>{{end}}
                    </div>
                    <div>
                        <label class="polje-labela">Opis</label>
                        <input type="text" name="opis" value="{{.Opis}}"
                            style="width:100%;padding:8px 12px;border:0.5px solid var(--ivica);border-radius:8px;font-size:14px;background:var(--pozadina);color:var(--tekst-glavni);outline:none;">
                    </div>
                    <div>
                        <label class="polje-labela">Marža (%)</label>
                        <input type="number" name="marza" min="0" step="0.01" value="{{if .Marza}}{{.Marza}}{{end}}"
                            placeholder="prazno = globalna marža"
                            style="width:100%;padding:8px 12px;border:0.5px solid var(--ivica);border-radius:8px;font-size:14px;background:var(--pozadina);color:var(--tekst-glavni);outline:none;">
                    </div>
                    <button type="submit" class="btn-primarno" style="align-self:flex-end;">Sačuvaj</button>
                </form>
            </dialog>
            {{end}}
            {{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}}