{{template "base" .}}

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

{{define "dodatni-css"}}
<style>
    .poruka-animacija { animation: slideDown 0.3s ease forwards; }

    .korisnici-tabela tbody tr:nth-child(1)  { animation-delay: 0.04s; }
    .korisnici-tabela tbody tr:nth-child(2)  { animation-delay: 0.08s; }
    .korisnici-tabela tbody tr:nth-child(3)  { animation-delay: 0.12s; }
    .korisnici-tabela tbody tr:nth-child(4)  { animation-delay: 0.16s; }
    .korisnici-tabela tbody tr:nth-child(5)  { animation-delay: 0.20s; }
    .korisnici-tabela tbody tr:nth-child(6)  { animation-delay: 0.24s; }
    .korisnici-tabela tbody tr:nth-child(7)  { animation-delay: 0.28s; }
    .korisnici-tabela tbody tr:nth-child(8)  { animation-delay: 0.32s; }
    .korisnici-tabela tbody tr:nth-child(9)  { animation-delay: 0.36s; }
    .korisnici-tabela tbody tr:nth-child(10) { animation-delay: 0.40s; }

    .nova-forma-kartica { animation-delay: 0.30s; }
</style>
{{end}}

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

    <!-- lista korisnika -->
    <div class="kartica animiraj" style="padding:0;overflow:hidden;">
        <div style="padding:16px 20px;border-bottom:0.5px solid var(--ivica);">
            <span style="font-size:15px;font-weight:500;color:var(--tekst-glavni);">Korisnici sistema</span>
        </div>
        <div style="overflow-x:auto;">
            <table class="korisnici-tabela" style="width:100%;border-collapse:collapse;">
                <thead>
                    <tr style="border-bottom:0.5px solid var(--ivica);">
                        <th style="padding:10px 20px;text-align:left;font-size:12px;font-weight:500;color:var(--tekst-sporedni);">Korisničko ime</th>
                        <th style="padding:10px 20px;text-align:left;font-size:12px;font-weight:500;color:var(--tekst-sporedni);">Uloga</th>
                        <th style="padding:10px 20px;text-align:center;font-size:12px;font-weight:500;color:var(--tekst-sporedni);">Status</th>
                        <th style="padding:10px 20px;text-align:center;font-size:12px;font-weight:500;color:var(--tekst-sporedni);">2FA</th>
                        <th style="padding:10px 20px;text-align:left;font-size:12px;font-weight:500;color:var(--tekst-sporedni);">Kreiran</th>
                        <th style="padding:10px 20px;text-align:right;font-size:12px;font-weight:500;color:var(--tekst-sporedni);">Akcije</th>
                    </tr>
                </thead>
                <tbody>
                    {{range .Korisnici}}
                    <tr class="animiraj" style="border-bottom:0.5px solid var(--ivica);">
                        <td style="padding:10px 20px;font-size:14px;font-weight:500;color:var(--tekst-glavni);">{{.KorisnickoIme}}</td>
                        <td style="padding:10px 20px;">
                            {{if eq .Uloga "superadmin"}}
                            <span style="font-size:13px;color:var(--tekst-sporedni);">Superadmin</span>
                            {{else if eq $.KorisnikUloga "superadmin"}}
                            <form method="POST" action="/admin/korisnici/{{.ID}}/uloga" style="display:inline;">
                                <select name="uloga" onchange="this.form.submit()"
                                    style="padding:4px 8px;border:0.5px solid var(--ivica);border-radius:6px;background:var(--pozadina);color:var(--tekst-glavni);font-size:12px;">
                                    <option value="admin" {{if eq .Uloga "admin"}}selected{{end}}>Admin</option>
                                    <option value="radnik" {{if eq .Uloga "radnik"}}selected{{end}}>Radnik</option>
                                </select>
                            </form>
                            {{else}}
                            <span style="font-size:13px;color:var(--tekst-sporedni);">
                                {{if eq .Uloga "admin"}}Admin{{else}}Radnik{{end}}
                            </span>
                            {{end}}
                        </td>
                        <td style="padding:10px 20px;text-align:center;">
                            {{if .Aktivan}}
                            <span style="display:inline-block;padding:2px 10px;border-radius:20px;background:#26a269;color:#ffffff;font-size:11px;font-weight:500;">Aktivan</span>
                            {{else}}
                            <span style="display:inline-block;padding:2px 10px;border-radius:20px;background:#ed333b;color:#000000;font-size:11px;font-weight:500;">Deaktiviran</span>
                            {{end}}
                        </td>
                        <td style="padding:10px 20px;text-align:center;">
                            {{if .TotpTajna}}
                            <span style="font-size:11px;color:#16a34a;">✓ Uključena</span>
                            {{else}}
                            <span style="font-size:11px;color:var(--tekst-sporedni);">—</span>
                            {{end}}
                        </td>
                        <td style="padding:10px 20px;font-size:13px;color:var(--tekst-sporedni);">
                            {{.DatumKreiranja.Format "02.01.2006."}}
                        </td>
                        <td style="padding:10px 20px;text-align:right;white-space:nowrap;">
                            <a href="/admin/korisnici/{{.ID}}/istorija"
                                style="display:inline-block;padding:5px 12px;border:0.5px solid var(--ivica);border-radius:6px;color:var(--tekst-sporedni);font-size:12px;text-decoration:none;margin-right:6px;">
                                Istorija prijava
                            </a>
                            {{if ne .KorisnickoIme $.KorisnikIme}}
                            <form method="POST" action="/admin/korisnici/{{.ID}}/aktivan" style="display:inline;">
                                <button type="submit"
                                    style="padding:5px 12px;border:0.5px solid var(--ivica);border-radius:6px;background:transparent;color:var(--tekst-sporedni);font-size:12px;cursor:pointer;">
                                    {{if .Aktivan}}Deaktiviraj{{else}}Aktiviraj{{end}}
                                </button>
                            </form>
                            {{if eq .Uloga "radnik"}}
                            <form method="POST" action="/admin/korisnici/{{.ID}}/obrisi" style="display:inline;"
                                  onsubmit="return confirm('Obrisati korisnika {{.KorisnickoIme}}? Ova radnja je trajna.')">
                                <button type="submit"
                                    style="padding:5px 12px;border:0.5px solid #fca5a5;border-radius:6px;background:transparent;color:#dc2626;font-size:12px;cursor:pointer;">
                                    Obriši
                                </button>
                            </form>
                            {{end}}
                            {{end}}
                        </td>
                    </tr>
                    {{end}}
                </tbody>
            </table>
        </div>
    </div>

    <!-- forma za novog korisnika -->
    <div class="kartica nova-forma-kartica animiraj">
        <div style="font-size:15px;font-weight:500;color:var(--tekst-glavni);margin-bottom:16px;padding-bottom:12px;border-bottom:0.5px solid var(--ivica);">
            Novi korisnik
        </div>
        <form method="POST" action="/admin/korisnici/novi">
            <div style="display:grid;grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));gap:14px;margin-bottom:16px;">
                <div>
                    <label style="font-size:13px;color:var(--tekst-sporedni);display:block;margin-bottom:6px;">Korisničko ime</label>
                    <input type="text" name="korisnicko_ime" required minlength="3" autocomplete="off"
                        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 style="font-size:13px;color:var(--tekst-sporedni);display:block;margin-bottom:6px;">Lozinka</label>
                    <input type="password" name="lozinka" required minlength="8" autocomplete="new-password"
                        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 style="font-size:13px;color:var(--tekst-sporedni);display:block;margin-bottom:6px;">Uloga</label>
                    <select name="uloga"
                        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;">
                        <option value="radnik">Radnik</option>
                        <option value="admin">Admin</option>
                    </select>
                </div>
            </div>
            <button type="submit"
                style="padding:9px 20px;background:var(--sb-akcent);color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:500;cursor:pointer;">
                Dodaj korisnika
            </button>
        </form>
    </div>

</div>
{{end}}