{% extends "settings_base.html" %}{% block title %}organization{% endblock %}
{% block heading %}Organization{% endblock %}
{% block lede %}Everyone who can reach this workspace's memory. Invite people from
the organization switcher in the top bar; they appear here once they accept.
{% endblock %}

{% block settings %}
<div class="panel">
  <div class="panel-head"><h2>Members</h2><span class="spacer"></span>
    <span class="stamp" id="count"></span></div>
  <div class="scroll"><table><thead><tr>
    <th></th><th>name</th><th>email</th><th>role</th><th>joined</th>
  </tr></thead><tbody id="rows"></tbody></table></div>
</div>

<script>
async function pageInit() {
  const rows = await api("/v1/console/members");
  document.getElementById("count").textContent =
    `${rows.length} member${rows.length === 1 ? "" : "s"}`;
  document.getElementById("rows").innerHTML = rows.map(m => `
    <tr><td style="width:34px">${m.image_url
          ? `<img src="${esc(m.image_url)}" width="26" height="26"
                  style="border-radius:50%;display:block">` : ""}</td>
        <td>${esc(m.name ?? "—")}</td>
        <td class="muted">${esc(m.email ?? "—")}</td>
        <td>${tag(m.role.endsWith("admin") ? "warn" : "", m.role.replace("org:", ""))}</td>
        <td class="stamp">${esc(m.joined_at.slice(0, 10))}</td></tr>`).join("")
    || `<tr><td colspan="5"><div class="empty"><div class="big">nobody mirrored yet</div>
        <p>Membership arrives by webhook from the identity provider. Invite someone
           and this fills in once they accept.</p></div></td></tr>`;
}
</script>
{% endblock %}