{% extends "base.html" %}
{% block title %}Team Members — ComplyForm Dashboard{% endblock %}
{% block content %}
<div class="max-w-3xl mx-auto px-4 py-6">
  <div class="flex items-center justify-between mb-6">
    <h1 class="text-xl font-semibold" style="color: var(--text-primary);">Team Members</h1>
    <a href="/dashboard/settings" class="text-sm" style="color: var(--accent);">Back to Settings</a>
  </div>

  <p class="text-sm mb-4" style="color: var(--text-secondary);">
    {{ active_count }} of {{ member_limit if member_limit else '∞' }} members used
  </p>

  {% if can_invite %}
  <section class="mb-8 p-4 rounded-lg" style="background: var(--bg-surface); border: 1px solid var(--border-default);">
    <h2 class="text-lg font-semibold mb-3" style="color: var(--text-primary);">Invite Member</h2>
    <form hx-post="/dashboard/settings/members/invite"
          hx-target="#members-list"
          hx-swap="outerHTML"
          class="flex gap-3 items-end">
      <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
      <div class="flex-1">
        <label class="block text-xs mb-1" style="color: var(--text-secondary);">Email</label>
        <input type="email" name="email" required
               class="w-full px-3 py-1.5 rounded text-sm"
               style="background: var(--bg-surface-hover); color: var(--text-primary); border: 1px solid var(--border-default);">
      </div>
      <div>
        <label class="block text-xs mb-1" style="color: var(--text-secondary);">Role</label>
        <select name="role"
                class="px-3 py-1.5 rounded text-sm"
                style="background: var(--bg-surface-hover); color: var(--text-primary); border: 1px solid var(--border-default);">
          <option value="admin">Admin</option>
          <option value="viewer">Viewer</option>
        </select>
      </div>
      <button type="submit"
              class="px-4 py-1.5 rounded text-sm font-medium"
              style="background: var(--accent); color: white;">
        Invite
      </button>
    </form>
  </section>
  {% endif %}

  <div id="members-list">
    <section class="p-4 rounded-lg" style="background: var(--bg-surface); border: 1px solid var(--border-default);">
      <h2 class="text-lg font-semibold mb-3" style="color: var(--text-primary);">Members</h2>
      <table class="w-full text-sm">
        <thead>
          <tr style="color: var(--text-secondary); border-bottom: 1px solid var(--border-default);">
            <th class="text-left py-2">Email</th>
            <th class="text-left py-2">Role</th>
            <th class="text-left py-2">Status</th>
            <th class="text-left py-2">Joined</th>
            <th class="text-right py-2">Actions</th>
          </tr>
        </thead>
        <tbody>
          {% for m in members %}
          <tr style="border-bottom: 1px solid var(--border-default);">
            <td class="py-2" style="color: var(--text-primary);">{{ m.email }}</td>
            <td class="py-2">
              <span class="px-2 py-0.5 rounded text-xs font-medium"
                    style="background: var(--bg-surface-hover); color: var(--text-secondary);">
                {{ m.role }}
              </span>
            </td>
            <td class="py-2" style="color: var(--text-secondary);">{{ m.status }}</td>
            <td class="py-2" style="color: var(--text-secondary);">{{ m.accepted_at or m.invited_at }}</td>
            <td class="py-2 text-right">
              {% if m.role != 'owner' and can_invite %}
                {% if m.status == 'pending' %}
                <button hx-post="/dashboard/settings/members/{{ m.email_hash }}/resend"
                        class="text-xs px-2 py-1 rounded mr-1"
                        style="color: var(--accent); border: 1px solid var(--border-default);">
                  Resend
                </button>
                {% endif %}
                <select hx-put="/dashboard/settings/members/{{ m.email_hash }}/role"
                        hx-target="#members-list" hx-swap="outerHTML"
                        name="role" class="text-xs px-1 py-0.5 rounded mr-1"
                        style="background: var(--bg-surface-hover); color: var(--text-primary); border: 1px solid var(--border-default);">
                  <option value="admin" {% if m.role == 'admin' %}selected{% endif %}>Admin</option>
                  <option value="viewer" {% if m.role == 'viewer' %}selected{% endif %}>Viewer</option>
                </select>
                <button hx-delete="/dashboard/settings/members/{{ m.email_hash }}"
                        hx-target="#members-list" hx-swap="outerHTML"
                        hx-confirm="Remove {{ m.email }}?"
                        class="text-xs px-2 py-1 rounded"
                        style="color: #dc2626; border: 1px solid var(--border-default);">
                  Remove
                </button>
              {% endif %}
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </section>
  </div>
</div>
{% endblock %}