neiam /fieri-forever

{% extends "root.html" %}

{% block content %}
<div class="space-y-6 text-left">
  <h2 class="text-2xl font-bold text-accent">Invites</h2>
  <p class="opacity-70 text-sm">
    Generate an invite link to bring someone onto {{ app_name }}. Share the URL —
    they can register through it directly, and join any areas you add to it.
    (Already have an account? Invite them from an area's Members page instead.)
  </p>

  <form method="post" action="/invites" class="card bg-base-200 p-4 grid grid-cols-1 md:grid-cols-3 gap-2 items-end">
    <label class="form-control md:col-span-1">
      <span class="label-text text-xs">Restrict to email (optional)</span>
      <input class="input input-bordered input-sm" type="email" name="email" placeholder="friend@example.com"/>
    </label>
    <label class="form-control md:col-span-1">
      <span class="label-text text-xs">Days valid</span>
      <input class="input input-bordered input-sm" type="number" min="1" name="days" placeholder="7"/>
    </label>
    <button class="btn btn-primary btn-sm md:col-span-1" type="submit">Generate invite</button>
    {% if admin_areas %}
    <fieldset class="md:col-span-3 space-y-1">
      <legend class="label-text text-xs mb-1">Also join these areas (ones you administer)</legend>
      {% for a in admin_areas %}
      <div class="flex items-center gap-2">
        <label class="label cursor-pointer gap-2 py-0">
          <input type="checkbox" class="checkbox checkbox-sm" name="area" value="{{ a.id }}"/>
          <span>{{ a.name }}</span>
        </label>
        <select name="role_{{ a.id }}" class="select select-bordered select-xs py-0" aria-label="Role in {{ a.name }}">
          {% for r in roles %}<option value="{{ r }}" {% if r == "voter" %}selected{% endif %}>as {{ r }}</option>{% endfor %}
        </select>
      </div>
      {% endfor %}
    </fieldset>
    {% endif %}
  </form>

  {% if invites | length == 0 %}
    <p class="opacity-70 text-sm">You haven't created any invites yet.</p>
  {% else %}
  <div class="overflow-x-auto">
    <table class="table table-sm">
      <thead>
        <tr><th>Status</th><th>Email</th><th>Areas</th><th>Expires</th><th>Invite link</th></tr>
      </thead>
      <tbody>
        {% for inv in invites %}
        {% set expired = (inv.expires_at | string) < (now | string) %}
        <tr class="{% if inv.is_used or expired %}opacity-50{% endif %}">
          <td>
            {% if inv.is_used %}<span class="badge badge-neutral badge-sm">Used</span>
            {% elif expired %}<span class="badge badge-warning badge-sm">Expired</span>
            {% else %}<span class="badge badge-success badge-sm">Active</span>{% endif %}
          </td>
          <td>{{ inv.email or "—" }}</td>
          <td class="text-xs">
            {% for a in inv.areas %}{{ a.name }} <span class="opacity-60">({{ a.role }})</span>{% if not loop.last %}, {% endif %}{% else %}—{% endfor %}
          </td>
          <td><code class="text-xs">{{ inv.expires_at }}</code></td>
          <td>
            {% if inv.is_used or expired %}
              <code class="text-xs opacity-60">{{ inv.token }}</code>
            {% else %}
              <input class="input input-bordered input-xs w-full" readonly
                     value="/register?token={{ inv.token }}" onclick="this.select()"/>
            {% endif %}
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
  {% endif %}
</div>
{% endblock %}