{% extends "base.html" %}
{% block title %}Admin — invitationer{% endblock %}
{% block body %}
<p><a href="/admin" class="wt-muted">← Admin</a></p>
<h1>Invitationer</h1>
<p class="wt-lead">Lav et link og send det til personen. De vælger selv brugernavn, navn, e-mail og adgangskode, og lander i de grupper du vælger her. Brugernavn og e-mail kan ikke ændres bagefter.</p>
{% if saved %}<div class="wt-flash">{{ saved }}</div>{% endif %}

{% if nyt %}
<section class="wt-card" style="margin:1rem 0;padding:1rem 1.2rem;border:2px solid var(--color-accent, #38bdf8)">
  <strong>Invitationen er klar.</strong> Den virker i {{ nyt.rest }}{% if nyt.engangs %} og kan kun bruges af én person{% endif %}.
  <div style="display:flex;gap:.5rem;margin-top:.7rem;flex-wrap:wrap">
    <input id="nytlink" class="wt-input" style="flex:1;min-width:16rem" readonly value="{{ nyt.url }}">
    <button class="wt-btn wt-btn--primary" type="button" data-kopier="nytlink">Kopiér link</button>
  </div>
  <p class="wt-muted" style="margin:.5rem 0 0">Grupper: {{ nyt.gruppenavne|join(", ") }}</p>
</section>
{% endif %}

<form method="post" action="/admin/invitations" style="margin:1.2rem 0 2rem">
  <h2 style="font-size:1.1rem">Ny invitation</h2>
  <label style="display:block;max-width:26rem;margin:.6rem 0">Hvem er den til? <span class="wt-muted">(kun til dig selv, så du kan kende den i listen)</span>
    <input class="wt-input" name="label" autocomplete="off" placeholder="fx Mormor"></label>

  <p style="margin:.9rem 0 .4rem"><strong>Grupper de skal med i</strong></p>
  <div class="wt-grid wt-grid--tight">
    {% for g in grupper %}
    <label class="wt-select-card">
      <input type="checkbox" name="grupper" value="{{ g.pk }}" {% if g.name == "Familie" %}checked{% endif %}>
      <span class="wt-select-card-ini">{{ g.name[0]|upper }}</span>
      <span class="wt-select-card-body">
        <span class="wt-select-card-name">{{ g.name }}</span>
        <span class="wt-select-card-sub">{{ g.members }} medlemmer{% if g.name == "authentik Admins" %} · ⚠️ fuld admin-adgang{% endif %}</span>
      </span>
      <span class="wt-select-card-chk">✓</span>
    </label>
    {% endfor %}
  </div>

  <div style="display:flex;gap:1.2rem;align-items:end;flex-wrap:wrap;margin-top:1rem">
    <label>Linket virker i
      <select class="wt-input" name="minutter">
        {% for m, t in varigheder %}<option value="{{ m }}" {% if m == 20160 %}selected{% endif %}>{{ t }}</option>{% endfor %}
      </select></label>
    <label style="display:flex;gap:.4rem;align-items:center"><input type="checkbox" name="engangs" value="1" checked> Kun én person kan bruge linket</label>
    <button class="wt-btn wt-btn--primary" type="submit">Lav invitation</button>
  </div>
</form>

<h2 style="font-size:1.1rem">Aktive invitationer</h2>
{% if invitationer %}
<table class="wt-table">
  <thead><tr><th>Til</th><th>Grupper</th><th>Udløber om</th><th>Brug</th><th></th></tr></thead>
  <tbody>
  {% for i in invitationer %}
    <tr {% if i.udloebet %}class="wt-muted"{% endif %}>
      <td><strong>{{ i.name.rsplit("-", 1)[0] }}</strong></td>
      <td>{{ i.gruppenavne|join(", ") }}</td>
      <td>{{ i.rest }}</td>
      <td>{{ "Én person" if i.engangs else "Flere" }}</td>
      <td style="white-space:nowrap">
        {% if not i.udloebet %}<input id="l-{{ i.pk }}" type="hidden" value="{{ i.url }}"><button class="wt-btn" type="button" data-kopier="l-{{ i.pk }}">Kopiér</button>{% endif %}
        <form method="post" action="/admin/invitations/{{ i.pk }}/slet" style="display:inline" onsubmit="return confirm('Tilbagekald invitationen? Linket holder op med at virke.')">
          <button class="wt-btn wt-btn--danger" type="submit">{{ "Slet" if i.udloebet else "Tilbagekald" }}</button></form>
      </td>
    </tr>
  {% endfor %}
  </tbody>
</table>
{% else %}
<p class="wt-muted">Ingen aktive invitationer.</p>
{% endif %}
<script>
(function(){
  document.querySelectorAll('[data-kopier]').forEach(function(b){
    b.addEventListener('click', function(){
      var v = document.getElementById(b.getAttribute('data-kopier')).value;
      var ok = function(){ var t=b.textContent; b.textContent='Kopieret ✓'; setTimeout(function(){ b.textContent=t; }, 1600); };
      if (navigator.clipboard) { navigator.clipboard.writeText(v).then(ok, function(){ prompt('Kopiér linket:', v); }); }
      else { prompt('Kopiér linket:', v); }
    });
  });
})();
</script>
{% endblock %}