{% extends "base.html" %}
{% block title %}Adgang — {{ app.name }}{% endblock %}

{% macro gcard(g) %}
<label class="ucard" data-search="{{ g.name|lower }}">
  <input type="checkbox" name="groups" value="{{ g.pk }}" {% if g.pk|string in app.groups %}checked{% endif %}>
  <span class="uini">👥</span>
  <span class="ubody">
    <span class="uname">{{ g.name }}{% if g.pk|string == admin_pk %} <span class="muted" style="font-weight:400">· admin</span>{% endif %}</span>
    <span class="usub">{{ g.members }} medlem{{ 'mer' if g.members != 1 }}</span>
  </span>
  <span class="uchk">✓</span>
</label>
{% endmacro %}

{% macro pcard(u) %}
<label class="ucard" data-search="{{ (u.username ~ ' ' ~ (u.name or '') ~ ' ' ~ (u.email or ''))|lower }}">
  <input type="checkbox" name="users" value="{{ u.pk }}" {% if u.pk|string in app.users %}checked{% endif %}>
  <span class="uini">{{ (u.username or '?')[0]|upper }}</span>
  <span class="ubody">
    <span class="uname">{{ u.name or u.username }}</span>
    <span class="usub" title="{{ u.username }}{% if u.email %} · {{ u.email }}{% endif %}">{{ u.username }}{% if u.email %} · {{ u.email }}{% endif %}</span>
  </span>
  <span class="uchk">✓</span>
</label>
{% endmacro %}

{% block body %}
<p><a href="/admin/access" class="muted">← Adgang til services</a></p>
<h1>{{ app.name }}</h1>
<p class="lead">Vælg de grupper og brugere der skal have adgang.
  <strong>Ingen markering = åben for alle</strong> autentificerede brugere.</p>

{% if not app.groups and not app.users and not app.n_other %}
<div class="err">Denne service er i dag <strong>åben for alle</strong> der er logget ind.
  Markerer du nogen her, bliver adgangen <strong>begrænset</strong> til kun de valgte.</div>
{% endif %}
{% if app.n_other %}
<div class="err">Bemærk: servicen har {{ app.n_other }} ekstra regel (policy/negate) som styres i Authentik
  og ikke kan ændres her — de bevares uændret.</div>
{% endif %}

{% 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/access/{{ app.slug }}" id="accform"
      data-sensitive="{{ '1' if sensitive else '0' }}"
      data-orig="{{ (orig_groups + orig_users)|join(',') }}">
  <div class="filter" style="max-width:22rem">
    <span class="mag">⌕</span>
    <input id="ufilter" type="search" placeholder="Søg grupper og brugere…" autocomplete="off" aria-label="Søg">
  </div>

  <h2>Grupper</h2>
  <div class="ucards" data-pool>
    {% for g in groups %}{{ gcard(g) }}{% endfor %}
  </div>

  <h2>Enkeltbrugere</h2>
  <div class="ucards" data-pool>
    {% for u in people %}{{ pcard(u) }}{% endfor %}
  </div>
  {% if svcs %}
  <details style="margin-top:1rem">
    <summary class="muted" style="cursor:pointer">Service-konti ({{ svcs|length }})</summary>
    <div class="ucards" data-pool>{% for u in svcs %}{{ pcard(u) }}{% endfor %}</div>
  </details>
  {% endif %}

  <p style="margin-top:1.4rem"><button class="btn" type="submit">Gem adgang</button>
    <a href="/admin/access" class="btn secondary">Annullér</a></p>
</form>

<!-- bekræft-modal: vises kun når en følsom (kun-mig / kun-admins) service udvides -->
<div id="confirm" class="modal-overlay" hidden>
  <div class="modal-box" role="dialog" aria-modal="true" aria-labelledby="cf-h">
    <h3 id="cf-h" style="margin:.2rem 0 .6rem">Udvide adgangen?</h3>
    <p class="muted" style="margin:0 0 1.2rem">Denne service er i dag begrænset til
      {% if sensitive %}{{ 'kun administratorer' if app.groups else 'kun dig' }}{% endif %}.
      Du er ved at give <strong>flere</strong> adgang. Er du sikker?</p>
    <div style="display:flex;gap:.6rem;justify-content:flex-end">
      <button type="button" class="btn secondary" id="cf-cancel">Annullér</button>
      <button type="button" class="btn danger" id="cf-ok">Bekræft</button>
    </div>
  </div>
</div>

<style>
  .btn.danger { background:#e5484d; color:#fff; }
  .btn.danger:hover { filter:brightness(1.08); }
  .modal-overlay { position:fixed; inset:0; z-index:120; display:flex; align-items:center; justify-content:center;
    background:color-mix(in srgb,var(--bg) 55%,transparent); backdrop-filter:blur(4px); padding:1rem; }
  .modal-overlay[hidden] { display:none; }
  .modal-box { width:min(28rem,calc(100vw - 2rem)); background:var(--surface); border:1px solid var(--border);
    border-radius:1rem; padding:1.4rem 1.5rem; box-shadow:0 24px 64px rgb(0 0 0 / .45); }
</style>
<script>
(function(){
  var form=document.getElementById('accform'),
      inp=document.getElementById('ufilter'),
      modal=document.getElementById('confirm');
  // filter
  if(inp){ var cards=[].slice.call(document.querySelectorAll('[data-pool] .ucard'));
    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); }); }); }
  // confirm-on-widen
  var sensitive=form.getAttribute('data-sensitive')==='1';
  var orig=(form.getAttribute('data-orig')||'').split(',').filter(Boolean);
  var origSet={}; orig.forEach(function(v){ origSet[v]=1; });
  function selected(){ return [].slice.call(form.querySelectorAll('input:checked')).map(function(i){return i.value;}); }
  function widened(){ return selected().some(function(v){ return !origSet[v]; }); }
  var confirmed=false;
  form.addEventListener('submit',function(e){
    if(confirmed || !sensitive || !widened()) return;   // normal submit
    e.preventDefault(); modal.hidden=false;
  });
  document.getElementById('cf-cancel').addEventListener('click',function(){ modal.hidden=true; });
  modal.addEventListener('click',function(e){ if(e.target===modal) modal.hidden=true; });
  document.getElementById('cf-ok').addEventListener('click',function(){
    confirmed=true; modal.hidden=true; form.submit(); });
})();
</script>
{% endblock %}