{% extends "base.html" %}
{% block title %}Team{% endblock %}
{% block content %}
{% from '_limit.html' import limit, paused, locked %}
{{ limit(seats_used, plan.team_seats, 'seats', 'Invites are refused and members beyond the limit are viewers until you upgrade.') }}
<div class="hdr"><div><h1>Team</h1><p class="sub" style="margin:0">{{ seats_used }}/{{ plan.team_seats if plan.team_seats < 999 else '∞' }} seats · workspace owned by {{ ws.email }}</p></div></div>
{% if user.workspace_id %}<div class="flash info">You are a <b>{{ user.role }}</b> in {{ ws.email }}'s workspace. <form method="post" action="/app/team/leave" class="inline" onsubmit="return confirm('Leave this workspace?')"><input type="hidden" name="csrf" value="{{ csrf }}"><button class="btn sm">Leave workspace</button></form></div>{% endif %}
<div class="grid g2" style="align-items:start">
<div class="panel">
  <h2>Members</h2>
  <div class="tbl"><table>
    <tr><td><b>{{ ws.email }}</b></td><td><span class="pill brand">owner</span></td><td></td></tr>
    {% for m in members %}<tr><td>{{ m.email }}{% if m.role_backup %} <span class="pill err" title="Was {{ m.role_backup }}; over the plan's seat limit">viewer · plan</span>{% endif %}<div class="small dim">joined {{ m.created_at|dt }} · last login {{ m.last_login_at|timeago }}</div></td>
      <td>{% if user.role in ('owner','admin') %}<form method="post" action="/app/team/members/{{ m.id }}/role" class="inline"><input type="hidden" name="csrf" value="{{ csrf }}"><select name="role" style="width:auto;padding:4px 8px;font-size:12.5px" onchange="this.form.submit()">{% for r in roles %}<option value="{{ r }}" {% if m.role == r %}selected{% endif %}>{{ r }}</option>{% endfor %}</select></form>{% else %}<span class="pill">{{ m.role }}</span>{% endif %}</td>
      <td style="text-align:right">{% if user.role in ('owner','admin') %}<form method="post" action="/app/team/members/{{ m.id }}/remove" class="inline" onsubmit="return confirm('Remove {{ m.email }}?')"><input type="hidden" name="csrf" value="{{ csrf }}"><button class="btn sm danger">Remove</button></form>{% endif %}</td></tr>{% endfor %}
  </table></div>
  <h3 style="margin-top:20px">What each role can do</h3>
  <div class="tbl"><table class="cmp"><thead><tr><th></th><th>Owner</th><th>Admin</th><th>Member</th><th>Viewer</th></tr></thead><tbody>
    <tr><td>View monitors, incidents, reports</td><td class="y">✓</td><td class="y">✓</td><td class="y">✓</td><td class="y">✓</td></tr>
    <tr><td>Create / edit monitors, channels, status pages</td><td class="y">✓</td><td class="y">✓</td><td class="y">✓</td><td class="n">—</td></tr>
    <tr><td>Acknowledge incidents, run checks</td><td class="y">✓</td><td class="y">✓</td><td class="y">✓</td><td class="n">—</td></tr>
    <tr><td>Invite / remove members</td><td class="y">✓</td><td class="y">✓</td><td class="n">—</td><td class="n">—</td></tr>
    <tr><td>Billing and plan</td><td class="y">✓</td><td class="n">—</td><td class="n">—</td><td class="n">—</td></tr>
  </tbody></table></div>
</div>
{% if user.role in ('owner','admin') %}
<div>
  <div class="panel" style="margin-bottom:16px">
    <h2>Invite someone</h2>
    <form method="post" action="/app/team/invite">
      <input type="hidden" name="csrf" value="{{ csrf }}">
      <div class="row"><label>Role</label><select name="role"><option value="member">Member · can edit monitors and pages</option><option value="viewer">Viewer · read-only</option><option value="admin">Admin · can also manage the team</option></select></div>
      {% if email_enabled %}<div class="row"><label>Email <span class="muted">(optional)</span></label><input type="email" name="email" placeholder="colleague@company.com"><div class="help">Leave blank to get a link you can share yourself.</div></div>{% else %}<div class="help" style="margin-bottom:12px">You'll get a link to share (valid 7 days, up to 5 people). Everyone gets their own login; no password sharing.</div>{% endif %}
      <button class="btn primary">{% if email_enabled %}Send invite{% else %}Create invite link{% endif %}</button>
    </form>
  </div>
  <div class="panel"><h2>Pending invites</h2>
    {% if invites %}<div class="tbl"><table>{% for i in invites %}<tr><td><code class="k">{{ base_url }}/invite/{{ i.token }}</code><div class="small dim">{{ i.role }} · {{ i.uses_left }} use{{ 's' if i.uses_left != 1 }} left · expires {{ i.expires_at|dt }}</div></td><td style="text-align:right"><form method="post" action="/app/team/invites/{{ i.id }}/revoke" class="inline"><input type="hidden" name="csrf" value="{{ csrf }}"><button class="btn sm danger">Revoke</button></form></td></tr>{% endfor %}</table></div>{% else %}<p class="muted small">None.</p>{% endif %}</div>
</div>
{% endif %}
</div>
{% endblock %}