<%- include('../partials/shell-open') %>
<div class="topbar">
  <div><div class="eyebrow">Access</div><h1>Team</h1></div>
  <button class="btn" data-action="invite">Invite someone</button>
</div>
<div class="content">
  <div class="card" style="margin-bottom:20px">
    <div class="card-head"><h2>Members</h2></div>
    <table>
      <thead><tr><th>Name</th><th>Email</th><th>Role</th><th class="hide-sm">Last signed in</th><th></th></tr></thead>
      <tbody>
      <% members.forEach(function(m){ %>
        <tr>
          <td><strong><%= m.name %></strong><%= m.totp_enabled ? ' · 2FA' : '' %></td>
          <td class="mono" style="font-size:13px"><%= m.email %></td>
          <td>
            <% if (m.role === 'superadmin' || m.id === user.id) { %>
              <span class="pill type"><%= m.role %></span>
            <% } else { %>
              <select style="width:auto;font-size:13px;padding:4px 8px"
                      data-role-for="<%= m.id %>">
                <% ['owner','editor','viewer'].forEach(function(r){ %>
                  <option value="<%= r %>" <%= m.role === r ? 'selected' : '' %>><%= r %></option>
                <% }); %>
              </select>
            <% } %>
          </td>
          <td class="hide-sm mono" style="font-size:12px;color:var(--muted)">
            <%= m.last_login_at ? new Date(m.last_login_at).toISOString().slice(0,16).replace('T',' ') : 'Never' %>
          </td>
          <td style="text-align:right">
            <% if (m.id !== user.id) { %>
              <button class="btn ghost sm" data-reset-for="<%= m.id %>">Reset password</button>
            <% } %>
          </td>
        </tr>
      <% }); %>
      </tbody>
    </table>
  </div>

  <% if (pending.length) { %>
  <div class="card">
    <div class="card-head"><h2>Pending invitations</h2></div>
    <table>
      <thead><tr><th>Email</th><th>Role</th><th>Expires</th></tr></thead>
      <tbody>
      <% pending.forEach(function(p){ %>
        <tr><td class="mono" style="font-size:13px"><%= p.email %></td>
            <td><span class="pill type"><%= p.role %></span></td>
            <td class="mono" style="font-size:12px;color:var(--muted)">
              <%= new Date(p.expires_at).toISOString().slice(0,16).replace('T',' ') %></td></tr>
      <% }); %>
      </tbody>
    </table>
  </div>
  <% } %>
</div>
<script src="/js/team.js"></script>
<%- include('../partials/shell-close') %>
