neiam /fieri-forever

{% extends "root.html" %}

{% block content %}
{% set is_admin = role == "admin" %}
<div class="space-y-4">
  <a href="/areas/{{ area.id }}" class="btn btn-ghost btn-sm">&larr; {{ area.name }}</a>
  <h2 class="text-2xl font-bold text-accent">Members of {{ area.name }}</h2>

  {% if notice %}
  {% set messages = {
    "invited": ["success", "Invitation sent. They'll see it on their home page."],
    "cancelled": ["info", "Invitation withdrawn."],
    "updated": ["success", "Role updated."],
    "removed": ["info", "Removed from the area."],
    "no-such-user": ["warning", "Nobody has that username."],
    "already-member": ["info", "They're already a member."],
    "last-admin": ["warning", "An area needs at least one admin. Make someone else admin first."],
  } %}
  {% if messages[notice] %}
  <div class="alert alert-{{ messages[notice][0] }} text-sm">{{ messages[notice][1] }}</div>
  {% endif %}
  {% endif %}

  <p class="text-xs opacity-70">
    <strong>Voters</strong> rank, start and vote on lunches, and log visits.
    <strong>Editors</strong> also add and edit restaurants.
    <strong>Admins</strong> also rename the area and manage who's in it.
  </p>

  <div class="overflow-x-auto border border-base-300 rounded-box">
    <table class="table table-sm">
      <thead><tr><th>Member</th><th>Role</th><th></th></tr></thead>
      <tbody>
        {% for m in members %}
        <tr>
          <td>
            {{ m.username }}{% if m.me %} <span class="opacity-60">(you)</span>{% endif %}
            {% if m.link == "friends" %}<span class="badge badge-ghost badge-sm" title="Friend"><i class="fas fa-user-group"></i></span>{% endif %}
          </td>
          <td>
            {% if is_admin %}
            <form method="post" action="/areas/{{ area.id }}/members/{{ m.id }}/role" class="join">
              <select name="role" class="select select-bordered select-xs py-0 join-item" aria-label="Role for {{ m.username }}">
                {% for r in roles %}<option value="{{ r }}" {% if r == m.role %}selected{% endif %}>{{ r }}</option>{% endfor %}
              </select>
              <button class="btn btn-xs join-item" type="submit">Set</button>
            </form>
            {% else %}
            <span class="badge badge-outline badge-sm">{{ m.role }}</span>
            {% endif %}
          </td>
          <td class="text-right">
            {% if m.me %}
              {% if not m.last_admin %}
              <form method="post" action="/areas/{{ area.id }}/members/{{ m.id }}/remove" class="inline">
                <button class="btn btn-ghost btn-xs" type="submit" hx-confirm="Leave {{ area.name }}? You'll lose access until someone invites you back.">Leave</button>
              </form>
              {% endif %}
            {% elif is_admin and not m.last_admin %}
              <form method="post" action="/areas/{{ area.id }}/members/{{ m.id }}/remove" class="inline">
                <button class="btn btn-ghost btn-xs text-error" type="submit" hx-confirm="Remove {{ m.username }} from {{ area.name }}?">Remove</button>
              </form>
            {% endif %}
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>

  {% if is_admin %}
  <section class="card bg-base-200 p-4 space-y-3">
    <h3 class="font-semibold">Invite someone</h3>
    <form method="post" action="/areas/{{ area.id }}/members/invite" class="flex flex-wrap gap-2 items-end">
      <label class="form-control">
        <span class="label-text text-xs">Username</span>
        <input class="input input-bordered input-sm" type="text" name="username" required/>
      </label>
      <label class="form-control">
        <span class="label-text text-xs">As</span>
        <select name="role" class="select select-bordered select-sm py-0">
          {% for r in roles %}<option value="{{ r }}" {% if r == "voter" %}selected{% endif %}>{{ r }}</option>{% endfor %}
        </select>
      </label>
      <button class="btn btn-primary btn-sm" type="submit"><i class="fas fa-paper-plane"></i> Invite</button>
    </form>
    <p class="text-xs opacity-70">
      They'll see the invitation on their home page and can accept or decline.
      No account yet? Make a sign-up link on <a class="link" href="/invites">Invites</a>, which can include this area.
    </p>

    {% if suggestions %}
    <div class="space-y-1">
      <p class="text-xs opacity-70">Friends not here yet:</p>
      <div class="flex flex-wrap gap-2">
        {% for s in suggestions %}
        <form method="post" action="/areas/{{ area.id }}/members/invite">
          <input type="hidden" name="user_id" value="{{ s.id }}"/>
          <input type="hidden" name="role" value="voter"/>
          <button class="btn btn-xs btn-outline" type="submit"><i class="fas fa-plus"></i> {{ s.username }}</button>
        </form>
        {% endfor %}
      </div>
    </div>
    {% endif %}

    {% if invitations %}
    <div class="space-y-1">
      <p class="text-xs opacity-70">Waiting on:</p>
      <ul class="text-sm space-y-1">
        {% for i in invitations %}
        <li class="flex items-center gap-2">
          {{ i.username }} <span class="badge badge-outline badge-sm">{{ i.role }}</span>
          <form method="post" action="/areas/{{ area.id }}/invitations/{{ i.user_id }}/cancel">
            <button class="btn btn-ghost btn-xs" type="submit">withdraw</button>
          </form>
        </li>
        {% endfor %}
      </ul>
    </div>
    {% endif %}
  </section>
  {% endif %}
</div>
{% endblock %}