{% extends "base.html" %}
{% block title %}Admin — {{ g.name }}{% endblock %}

{% macro ucard(u) %}
<label class="wt-select-card" data-search="{{ (u.username ~ ' ' ~ (u.name or '') ~ ' ' ~ (u.email or ''))|lower }}">
  <input type="checkbox" name="members" value="{{ u.pk }}" {% if u.pk|string in g.users %}checked{% endif %}>
  <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.email %} · {{ u.email }}{% endif %}</span>
  </span>
  <span class="wt-select-card-chk">✓</span>
</label>
{% endmacro %}

{% block body %}
<p><a href="/admin/groups" class="wt-muted">← Grupper</a></p>
<h1>{{ g.name }}</h1>
<p class="wt-lead">Klik på brugerne der skal være medlem. Markerede er medlemmer.</p>

{% set people = users|rejectattr('type','in',['service_account','internal_service_account'])|list %}
{% set svcs = users|selectattr('type','in',['service_account','internal_service_account'])|list %}

<form method="post" action="/admin/groups/{{ g.pk }}">
  <div class="wt-field" style="max-width:22rem">
    <span class="wt-field-ico">⌕</span>
    <input id="ufilter" class="wt-input" type="search" placeholder="Søg brugere…" autocomplete="off" aria-label="Søg brugere">
  </div>
  <div class="wt-grid wt-grid--tight" id="ucards" style="margin-top:1rem">
    {% for u in people %}{{ ucard(u) }}{% endfor %}
  </div>
  {% if svcs %}
  <details style="margin-top:1.2rem">
    <summary class="wt-muted" style="cursor:pointer">Service-konti ({{ svcs|length }})</summary>
    <div class="wt-grid wt-grid--tight" style="margin-top:.6rem">{% for u in svcs %}{{ ucard(u) }}{% endfor %}</div>
  </details>
  {% endif %}
  <p style="margin-top:1.3rem"><button class="wt-btn wt-btn--primary" type="submit">Gem medlemmer</button></p>
</form>
<script>
(function(){
  var inp=document.getElementById('ufilter'); if(!inp) return;
  var cards=[].slice.call(document.querySelectorAll('#ucards .wt-select-card'));
  inp.addEventListener('input',function(){
    var q=inp.value.trim().toLowerCase();
    cards.forEach(function(c){ c.classList.toggle('hidden', !!q && c.getAttribute('data-search').indexOf(q)<0); });
  });
})();
</script>
{% endblock %}