{% extends "base.html" %}
{% block title %}Admin — brugere{% endblock %}
{% block body %}
<h1>Brugere</h1>
<p class="wt-lead">Opret og administrér brugere. Adgang til services styres via <strong>grupper</strong>.</p>
{% if saved %}<div class="wt-flash">{{ saved }}</div>{% endif %}

<details style="margin:1rem 0">
  <summary class="wt-btn wt-btn--primary" style="display:inline-block">+ Opret ny bruger</summary>
  <form method="post" action="/admin/users" class="wt-stat" style="display:block;margin-top:.8rem">
    <div style="display:grid;gap:.7rem;grid-template-columns:repeat(auto-fit,minmax(12rem,1fr))">
      <label>Brugernavn<input name="username" required autocomplete="off"></label>
      <label>Navn<input name="name" autocomplete="off"></label>
      <label>Email<input name="email" type="email" autocomplete="off"></label>
      <label>Adgangskode<input name="password" type="text" autocomplete="new-password" placeholder="(valgfri)"></label>
    </div>
    <p class="wt-muted" style="margin:.9rem 0 .4rem;font-size:.85rem">Adgang (grupper) — sæt flueben for de services brugeren skal kunne tilgå:</p>
    <div style="display:grid;gap:.3rem .9rem;grid-template-columns:repeat(auto-fill,minmax(11rem,1fr))">
      {% for grp in groups %}
      <label style="display:flex;gap:.4rem;align-items:center;font-size:.9rem"><input type="checkbox" name="groups" value="{{ grp.pk }}" style="width:auto"> {{ grp.name }}</label>
      {% endfor %}
    </div>
    <p style="margin-top:1rem"><button class="wt-btn wt-btn--primary" type="submit">Opret bruger</button></p>
  </form>
</details>

<div class="wt-toolbar">
  <div class="wt-field" style="flex:1;min-width:12rem"><span class="wt-field-ico">⌕</span>
    <input id="ufilter" class="wt-input" type="search" placeholder="Søg brugere…" autocomplete="off"></div>
  <div class="wt-segment" id="typetoggle" role="group" aria-label="Brugertype">
    <button type="button" data-type="person" class="is-on">Personer</button>
    <button type="button" data-type="service">Service-konti</button>
    <button type="button" data-type="all">Alle</button>
  </div>
</div>

<div class="wt-grid wt-grid--tight" id="ucards" style="margin-top:1rem">
  {% for u in users %}
  {% set svc = u.type in ['service_account','internal_service_account'] %}
  <a class="wt-select-card{% if not u.active %} dim{% endif %}" href="/admin/users/{{ u.pk }}"
     data-type="{{ 'service' if svc else 'person' }}"
     data-search="{{ (u.username ~ ' ' ~ (u.name or '') ~ ' ' ~ (u.email or ''))|lower }}">
    <span class="wt-select-card-ini">{{ (u.username or '?')[0]|upper }}</span>
    <span class="wt-select-card-body">
      <span class="wt-select-card-name">{{ u.name or u.username }}</span>
      <span class="wt-select-card-sub" title="{{ u.username }}{% if u.email %} · {{ u.email }}{% endif %}">{{ u.username }}{% if u.group_names %} · {{ u.group_names|length }} grupper{% endif %}{% if not u.active %} · inaktiv{% endif %}</span>
    </span>
    <span class="unav">→</span>
  </a>
  {% endfor %}
</div>
<p id="unone" class="wt-muted" style="display:none;margin-top:1rem">Ingen brugere matcher.</p>

<script>
(function(){
  var inp=document.getElementById('ufilter'), tt=document.getElementById('typetoggle');
  var cards=[].slice.call(document.querySelectorAll('#ucards .wt-select-card'));
  var none=document.getElementById('unone'), type='person';
  function apply(){
    var q=(inp.value||'').trim().toLowerCase(), shown=0;
    cards.forEach(function(c){
      var okType=(type==='all')||c.getAttribute('data-type')===type;
      var okSearch=!q||c.getAttribute('data-search').indexOf(q)>-1;
      var hit=okType&&okSearch; c.classList.toggle('hidden',!hit); if(hit) shown++;
    });
    none.style.display=shown?'none':'block';
  }
  inp.addEventListener('input',apply);
  tt.addEventListener('click',function(e){var b=e.target.closest('button[data-type]'); if(!b)return;
    type=b.getAttribute('data-type');
    tt.querySelectorAll('button').forEach(function(x){x.classList.toggle('is-on',x===b);}); apply();});
  apply();
})();
</script>
{% endblock %}