{{template "base" .}}

{{define "naslov"}}Prometni list — NTech{{end}}

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

    <!-- filter perioda -->
    <div class="kartica animiraj">
        <form method="GET" action="/izvestaji/prometni-list" style="display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;">
            <div>
                <label class="polje-labela">Od datuma</label>
                <input type="date" name="od" value="{{.Od}}" style="width:160px;">
            </div>
            <div>
                <label class="polje-labela">Do datuma</label>
                <input type="date" name="do" value="{{.Do}}" style="width:160px;">
            </div>
            <button type="submit" class="btn-primarno">Prikaži</button>
            <a href="/izvestaji" class="btn-sekundarno">← Izveštaji</a>
        </form>
    </div>

    <!-- tabela promena -->
    <div class="kartica animiraj" style="padding:0;overflow:hidden;">
        <div style="padding:16px 20px;border-bottom:0.5px solid var(--ivica);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;">
            <span style="font-size:15px;font-weight:500;color:var(--tekst-glavni);">Prometni list magacina</span>
            <span style="font-size:12px;color:var(--tekst-slabi);">{{.Od}} — {{.Do}} &middot; {{.Ukupno}} promena</span>
        </div>

        {{if not .Promene}}
        <div style="padding:40px;text-align:center;color:var(--tekst-slabi);font-size:14px;">
            Nema promena u odabranom periodu.
        </div>
        {{else}}
        <div style="overflow-x:auto;">
            <table class="tabela">
                <thead>
                    <tr>
                        <th>Datum</th>
                        <th>Artikal</th>
                        <th>Šifra</th>
                        <th>Vrsta</th>
                        <th style="text-align:right;">Promena</th>
                        <th style="text-align:right;">Pre</th>
                        <th style="text-align:right;">Posle</th>
                        <th>Napomena</th>
                    </tr>
                </thead>
                <tbody>
                {{range .Promene}}
                <tr>
                    <td style="white-space:nowrap;font-size:12px;color:var(--tekst-slabi);">
                        {{.Datum.Format "02.01.2006. 15:04"}}
                    </td>
                    <td style="font-weight:500;">{{.ArtikalNaziv}}</td>
                    <td style="font-family:monospace;font-size:12px;color:var(--tekst-slabi);">{{if .ArtikalSifra}}{{.ArtikalSifra}}{{else}}—{{end}}</td>
                    <td>
                        {{if eq .TipPromene "ulaz_nabavka"}}
                            <span class="bedz" style="background:rgba(34,197,94,0.12);color:#22c55e;">Ulaz</span>
                        {{else if eq .TipPromene "izlaz_prodaja"}}
                            <span class="bedz" style="background:rgba(59,130,246,0.12);color:#3b82f6;">Prodaja</span>
                        {{else if eq .TipPromene "izlaz_servis"}}
                            <span class="bedz" style="background:rgba(249,115,22,0.12);color:#f97316;">Servis</span>
                        {{else if eq .TipPromene "povracaj"}}
                            <span class="bedz" style="background:rgba(168,85,247,0.12);color:#a855f7;">Povraćaj</span>
                        {{else if eq .TipPromene "korekcija"}}
                            <span class="bedz" style="background:rgba(156,163,175,0.12);color:#9ca3af;">Korekcija</span>
                        {{else}}
                            <span class="bedz">{{.TipPromene}}</span>
                        {{end}}
                    </td>
                    <td style="text-align:right;font-family:monospace;font-weight:600;{{if gt .PromenaKolicine 0}}color:#22c55e;{{else}}color:#dc2626;{{end}}">
                        {{if gt .PromenaKolicine 0}}+{{end}}{{.PromenaKolicine}}
                    </td>
                    <td style="text-align:right;font-family:monospace;color:var(--tekst-slabi);">{{.StanjePre}}</td>
                    <td style="text-align:right;font-family:monospace;font-weight:500;">{{.StanjePosle}}</td>
                    <td style="font-size:12px;color:var(--tekst-slabi);">{{.Napomena}}</td>
                </tr>
                {{end}}
                </tbody>
            </table>
        </div>
        {{end}}
    </div>

</div>
{{end}}