{% extends "base.html" %}
{% from '_upsell.html' import crown_badge, max_badge, beta_pill %}
{% 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">{% trans count=members | length %}{{ count }} member{% pluralize %}{{ count }} members{% endtrans %}</span>
    </div>
    <div class="divide-y divide-gray-100 dark:divide-gray-700">
      {% for m in members %}
      <div class="px-6 py-4">
        {# flex-wrap, not a fixed row: with the role select and the remove button
           present the controls have nowhere to go on a phone and overlap the
           email/last-login block. Wrapping drops them to a second line. #}
        <div class="flex flex-wrap items-center gap-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 %}
                {% set last_login_date = m.last_login_at|localdt('%b %d, %Y') %}
                {% trans last_login_date=last_login_date %}Last login {{ last_login_date }}{% endtrans %}
              {% 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>

          {# Signature toggle #}
          <button type="button"
                  onclick="document.getElementById('sig-{{ m.id }}').classList.toggle('hidden')"
                  class="p-1.5 rounded-lg text-gray-400 hover:text-brand-600 dark:hover:text-brand-400 hover:bg-brand-50 dark:hover:bg-brand-500/10 transition-colors flex-shrink-0"
                  title="{{ _('Edit signature') }}">
            <span class="material-symbols-outlined text-sm">signature</span>
          </button>

          {# 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 %(email)s from the team?', email=m.email) | tojson }})">
              <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>

        {# Per-user signature editor (collapsed by default) #}
        <div id="sig-{{ m.id }}" class="hidden mt-3 ml-13 pl-1">
          <form method="post" action="{{ url_for('settings_team_member_signature', user_id=m.id) }}">
            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
            <label class="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">{{ _("Reply signature") }}</label>
            {% set sig_name = m.email.split('@')[0] | title %}
            <textarea name="signature" rows="3"
                      placeholder="{{ _('e.g. Best regards,&#10;%(name)s', name=sig_name) }}"
                      class="w-full 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 placeholder-gray-400 dark:placeholder-gray-500 focus:ring-2 focus:ring-brand-500 outline-none resize-none">{{ m.signature }}</textarea>
            <div class="flex justify-end mt-2">
              <button type="submit"
                      class="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-lg bg-brand-600 text-white hover:bg-brand-700 transition-colors">
                <span class="material-symbols-outlined text-xs">save</span>
                {{ _("Save signature") }}
              </button>
            </div>
          </form>
        </div>
      </div>
      {% endfor %}
    </div>
  </div>

  {# Invite form — MAX plan required #}
  <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>
    {% if has_feature('team') %}
    <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>
    {% else %}
    <div class="flex items-center gap-3 p-4 rounded-lg bg-gray-50 dark:bg-gray-700/50 border border-gray-200 dark:border-gray-600">
      <span class="material-symbols-outlined text-gray-400 dark:text-gray-500 text-2xl flex-shrink-0">lock</span>
      <div class="flex-1 min-w-0">
        <p class="text-sm font-medium text-gray-700 dark:text-gray-300">{{ _("Team collaboration requires the MAX plan") }}</p>
        <p class="text-xs text-gray-500 dark:text-gray-400 mt-0.5">{{ _("Upgrade to MAX for unlimited team members with role-based access.") }}</p>
      </div>
      <button type="button" onclick='showUpgradeModal("max", {{ _("Team Invites")|tojson }})'
              class="inline-flex items-center gap-1.5 px-3 py-2 text-sm font-medium rounded-lg border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors flex-shrink-0">
        {{ _("Upgrade to MAX") }}{{ max_badge() }}
      </button>
    </div>
    {% endif %}
  </div>
</div>
{% endblock %}