{% extends "base.html" %}
{% block title %}Team{% endblock %}
{% block content %}
<div class="p-3 sm:p-6">
  <h2 class="text-xl font-bold text-gray-900 dark:text-gray-100 mb-6">Team</h2>

  {# Flash messages #}
  {% with messages = get_flashed_messages(with_categories=true) %}
    {% for category, message in messages %}
      <div class="mb-4 px-4 py-3 rounded-lg text-sm font-medium
        {% if category == 'success' %}bg-green-50 dark:bg-green-500/10 text-green-800 dark:text-green-300 border border-green-200 dark:border-green-500/30
        {% else %}bg-red-50 dark:bg-red-500/10 text-red-800 dark:text-red-300 border border-red-200 dark:border-red-500/30{% endif %}">
        {{ message }}
      </div>
    {% endfor %}
  {% endwith %}

  {# Members table #}
  <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 overflow-hidden mb-6">
    <div class="px-6 py-4 border-b border-gray-100 dark:border-gray-700 flex items-center justify-between">
      <h3 class="text-base font-semibold text-gray-900 dark:text-gray-100 flex items-center gap-2">
        <span class="material-symbols-outlined text-brand-600 dark:text-brand-400">group</span>
        Members
      </h3>
      <span class="text-xs text-gray-500 dark:text-gray-400">{{ members | length }} member{{ 's' if members | length != 1 }}</span>
    </div>
    <div class="divide-y divide-gray-100 dark:divide-gray-700">
      {% for m in members %}
      <div class="flex items-center gap-4 px-6 py-4">
        {# Avatar initials #}
        <div class="w-9 h-9 rounded-full bg-brand-100 dark:bg-brand-500/20 flex items-center justify-center flex-shrink-0">
          <span class="text-sm font-semibold text-brand-700 dark:text-brand-300">{{ m.email[0].upper() }}</span>
        </div>

        {# Email + meta #}
        <div class="flex-1 min-w-0">
          <p class="text-sm font-medium text-gray-900 dark:text-gray-100 truncate">
            {{ m.email }}
            {% if m.is_self %}<span class="ml-1.5 text-xs text-gray-400 dark:text-gray-500">(you)</span>{% endif %}
          </p>
          <p class="text-xs text-gray-500 dark:text-gray-400 mt-0.5">
            {% if m.last_login_at %}
              Last login {{ m.last_login_at.strftime('%b %d, %Y') }}
            {% elif not m.email_verified %}
              Invite pending
            {% else %}
              Never logged in
            {% endif %}
          </p>
        </div>

        {# Role badge #}
        <div class="flex-shrink-0">
          {% if m.role == 'admin' %}
            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-indigo-100 dark:bg-indigo-500/20 text-indigo-700 dark:text-indigo-300">Admin</span>
          {% elif m.role == 'platform_admin' %}
            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-violet-100 dark:bg-violet-500/20 text-violet-700 dark:text-violet-300">Platform Admin</span>
          {% else %}
            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300">Agent</span>
          {% endif %}
        </div>

        {# Actions (hidden for self and platform_admin) #}
        {% if not m.is_self and m.role != 'platform_admin' %}
        <div class="flex items-center gap-2 flex-shrink-0">
          {# Change role form #}
          <form method="post" action="{{ url_for('settings_team_change_role', user_id=m.id) }}">
            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
            <select name="role" onchange="this.form.submit()"
                    class="text-xs border border-gray-200 dark:border-gray-600 rounded-lg px-2 py-1.5 bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-200 focus:ring-2 focus:ring-brand-500 outline-none cursor-pointer">
              <option value="admin" {% if m.role == 'admin' %}selected{% endif %}>Admin</option>
              <option value="agent" {% if m.role == 'agent' %}selected{% endif %}>Agent</option>
            </select>
          </form>

          {# Remove button #}
          <form method="post" action="{{ url_for('settings_team_remove_member', user_id=m.id) }}"
                onsubmit="return confirm('Remove {{ m.email }} from the team?')">
            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
            <button type="submit"
                    class="p-1.5 rounded-lg text-gray-400 hover:text-red-500 dark:hover:text-red-400 hover:bg-red-50 dark:hover:bg-red-500/10 transition-colors"
                    title="Remove member">
              <span class="material-symbols-outlined text-sm">person_remove</span>
            </button>
          </form>
        </div>
        {% endif %}
      </div>
      {% endfor %}
    </div>
  </div>

  {# Invite form #}
  <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6">
    <h3 class="text-base font-semibold text-gray-900 dark:text-gray-100 flex items-center gap-2 mb-4">
      <span class="material-symbols-outlined text-brand-600 dark:text-brand-400">person_add</span>
      Invite a team member
    </h3>
    <form method="post" action="{{ url_for('settings_team_invite') }}">
      <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
      <div class="flex gap-3 flex-wrap">
        <input type="email" name="email" required placeholder="colleague@example.com"
               class="flex-1 min-w-48 text-sm border border-gray-200 dark:border-gray-600 rounded-lg px-3 py-2 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-brand-500 outline-none">
        <select name="role" class="text-sm border border-gray-200 dark:border-gray-600 rounded-lg px-3 py-2 bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-200 focus:ring-2 focus:ring-brand-500 outline-none">
          <option value="agent">Agent</option>
          <option value="admin">Admin</option>
        </select>
        <button type="submit" class="inline-flex items-center gap-1.5 px-4 py-2 text-sm font-medium rounded-lg bg-brand-600 text-white hover:bg-brand-700 transition-colors">
          <span class="material-symbols-outlined text-sm">send</span>
          Send invite
        </button>
      </div>
    </form>
  </div>
</div>
{% endblock %}