{% extends "dashboard/layout.html" %}
{% block title %}{{ team.name }} – {{ _('Team Dashboard') }}{% endblock %}
{% set active_page = 'teams' %}

{% block dashboard_content %}
<div class="mb-5 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
    <div>
        <div class="flex items-center gap-2 mb-1">
            <a href="{{ full_url('/dashboard/teams') }}" class="text-xs text-gray-400 hover:text-purple-600 dark:hover:text-purple-400 transition-all"><i class="fa fa-arrow-left mr-1"></i>{{ _('Teams') }}</a>
            <span class="text-gray-300 dark:text-gray-600">/</span>
            <span class="text-xs text-gray-600 dark:text-gray-400">{{ team.name }}</span>
        </div>
        <h1 class="text-xl font-bold text-gray-900 dark:text-white flex items-center gap-2">
            <i class="fa fa-users text-purple-500"></i> {{ team.name }}
        </h1>
        <div class="flex items-center gap-2 mt-1 flex-wrap">
            {% if is_owner %}<span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[10px] font-semibold bg-purple-100 dark:bg-purple-900/30 text-purple-700 dark:text-purple-300"><i class="fa fa-crown text-[9px]"></i> {{ _('Owner') }}</span>{% elif is_admin %}<span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[10px] font-semibold bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300"><i class="fa fa-shield-halved text-[9px]"></i> {{ _('Admin') }}</span>{% else %}<span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[10px] font-semibold bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400"><i class="fa fa-user text-[9px]"></i> {{ _('Member') }}</span>{% endif %}
            {% if team_plan %}<span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[10px] font-semibold bg-indigo-100 dark:bg-indigo-900/30 text-indigo-700 dark:text-indigo-300"><i class="fa fa-credit-card text-[9px]"></i> {{ team_plan.name }}</span>{% endif %}
            <span class="text-xs text-gray-400">{{ _('Created') }} {{ team.created_at[:10] }}</span>
        </div>
    </div>
    {% if is_admin %}
    <div class="flex gap-2">
        <button onclick="document.getElementById('modal-invite').classList.remove('hidden')"
                class="px-3 py-2 rounded-lg bg-purple-600 hover:bg-purple-700 text-white text-sm font-semibold transition-all flex items-center gap-1.5">
            <i class="fa fa-user-plus text-xs"></i> {{ _('Invite Member') }}
        </button>
        {% if sub_teams|length == 0 and is_owner %}
        <button onclick="document.getElementById('modal-create-sub').classList.remove('hidden')"
                class="px-3 py-2 rounded-lg bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-700 dark:text-gray-300 text-sm font-medium transition-all flex items-center gap-1.5">
            <i class="fa fa-sitemap text-xs"></i> {{ _('Add Sub-team') }}
        </button>
        {% endif %}
    </div>
    {% endif %}
</div>

<div class="grid grid-cols-1 lg:grid-cols-3 gap-5">

    <!-- Left: Members + Files -->
    <div class="lg:col-span-2 space-y-5">

        <!-- Sub-teams -->
        {% if sub_teams %}
        <div class="rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 overflow-hidden">
            <div class="px-5 py-3 border-b border-gray-100 dark:border-gray-800 flex items-center gap-2 bg-gray-50 dark:bg-gray-800/50">
                <i class="fa fa-sitemap text-purple-500 text-sm"></i>
                <span class="text-sm font-semibold text-gray-700 dark:text-gray-300">{{ _('Sub-Teams') }}</span>
                <span class="ml-auto text-xs text-gray-400">{{ sub_teams|length }}</span>
            </div>
            <div class="divide-y divide-gray-100 dark:divide-gray-800">
                {% for st in sub_teams %}
                <a href="{{ full_url('/dashboard/teams/' ~ st.id) }}" class="flex items-center gap-3 px-5 py-3 hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-all">
                    <div class="w-8 h-8 rounded-lg bg-purple-50 dark:bg-purple-900/20 flex items-center justify-center flex-shrink-0">
                        <i class="fa fa-users text-purple-500 text-xs"></i>
                    </div>
                    <span class="text-sm text-gray-800 dark:text-gray-200 font-medium">{{ st.name }}</span>
                    <i class="fa fa-chevron-right text-gray-400 text-xs ml-auto"></i>
                </a>
                {% endfor %}
            </div>
        </div>
        {% endif %}

        <!-- Members -->
        <div class="rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 overflow-hidden">
            <div class="px-5 py-3 border-b border-gray-100 dark:border-gray-800 flex items-center gap-2 bg-gray-50 dark:bg-gray-800/50">
                <i class="fa fa-users text-purple-500 text-sm"></i>
                <span class="text-sm font-semibold text-gray-700 dark:text-gray-300">{{ _('Members') }}</span>
                <span class="ml-auto text-xs text-gray-400">
                    {{ members|selectattr('status','eq','active')|list|length }} {{ _('active') }}
                    {% set pending = members|selectattr('status','eq','pending')|list|length %}
                    {% if pending %} · {{ pending }} {{ _('pending') }}{% endif %}
                </span>
            </div>

            <!-- Owner row -->
            <div class="px-5 py-3 border-b border-gray-100 dark:divide-gray-800 bg-purple-50/40 dark:bg-purple-900/10 flex items-center gap-3">
                <div class="w-8 h-8 rounded-full bg-purple-100 dark:bg-purple-900/40 flex items-center justify-center text-purple-700 dark:text-purple-300 text-xs font-bold flex-shrink-0">
                    <i class="fa fa-crown text-[10px]"></i>
                </div>
                <div class="flex-1 min-w-0">
                    <span class="text-sm font-medium text-gray-800 dark:text-gray-200">
                        {% if user.id == team.owner_user_id %}{{ user.username }} ({{ _('you') }}){% else %}{{ _('Team Owner') }}{% endif %}
                    </span>
                    <span class="ml-2 text-xs text-purple-600 dark:text-purple-400 font-medium">{{ _('Owner') }}</span>
                </div>
                <span class="w-2.5 h-2.5 rounded-full bg-green-400 flex-shrink-0" title="{{ _('Owner') }}"></span>
            </div>

            <div class="divide-y divide-gray-100 dark:divide-gray-800">
                {% for m in members %}
                <div class="px-5 py-3 {% if m.status == 'pending' %}opacity-70{% endif %}">
                    <div class="flex items-center gap-3">
                        <div class="w-8 h-8 rounded-full bg-gray-100 dark:bg-gray-800 flex items-center justify-center text-gray-600 dark:text-gray-400 text-xs font-bold flex-shrink-0">
                            {{ (m.username or m.invited_email or '?')[0]|upper }}
                        </div>
                        <div class="flex-1 min-w-0">
                            <div class="flex items-center gap-2 flex-wrap">
                                <span class="text-sm font-medium text-gray-800 dark:text-gray-200 truncate">
                                    {{ m.username or m.invited_email }}
                                </span>
                                {% if m.user_id == user.id %}<span class="text-xs text-gray-400">({{ _('you') }})</span>{% endif %}
                                <span class="text-[10px] px-1.5 py-0.5 rounded font-semibold
                                    {% if m.role == 'admin' %}bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300
                                    {% else %}bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400{% endif %}">
                                    {{ m.role }}
                                </span>
                                {% if m.status == 'pending' %}
                                <span class="text-[10px] px-1.5 py-0.5 rounded font-semibold bg-amber-100 dark:bg-amber-900/30 text-amber-600 dark:text-amber-400">{{ _('Pending') }}</span>
                                {% else %}
                                <span class="w-2 h-2 rounded-full flex-shrink-0 {% if m.is_online %}bg-green-400{% else %}bg-gray-300 dark:bg-gray-600{% endif %}" title="{% if m.is_online %}{{ _('Online') }}{% else %}{{ _('Offline') }}{% endif %}"></span>
                                {% endif %}
                            </div>
                            {% if m.status == 'active' %}
                            <div class="flex items-center gap-2 mt-0.5 flex-wrap text-[10px] text-gray-400">
                                {% if m.perms.view_files %}<span class="flex items-center gap-0.5"><i class="fa fa-eye text-green-500"></i> {{ _('View') }}</span>{% endif %}
                                {% if m.perms.download %}<span class="flex items-center gap-0.5"><i class="fa fa-download text-blue-500"></i> {{ _('Download') }}</span>{% endif %}
                                {% if m.perms.share %}<span class="flex items-center gap-0.5"><i class="fa fa-share-nodes text-indigo-500"></i> {{ _('Share') }}</span>{% endif %}
                                {% if m.perms.delete %}<span class="flex items-center gap-0.5"><i class="fa fa-trash text-red-500"></i> {{ _('Delete') }}</span>{% endif %}
                            </div>
                            {% endif %}
                        </div>

                        {% if is_admin and m.user_id != team.owner_user_id and m.user_id != user.id %}
                        <div class="flex items-center gap-1 flex-shrink-0">
                            {% if m.status == 'active' %}
                            <button onclick="openPermModal({{ m.id }}, '{{ m.role }}', {{ m.perms|tojson|e }})"
                                    class="px-2 py-1 rounded text-xs bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-600 dark:text-gray-400 transition-all" title="{{ _('Edit permissions') }}">
                                <i class="fa fa-sliders"></i>
                            </button>
                            <form method="POST" action="{{ full_url('/dashboard/teams/' ~ team.id ~ '/members/' ~ m.id ~ '/remove') }}"
                                  data-confirm="Remove '{{ (m.username or m.invited_email)|e }}' from this team?&#10;&#10;• Revoke their access to all shared files in this team&#10;• Remove their active session in this team&#10;&#10;Note: Their website account stays active."  >
                                <button type="submit" class="px-2 py-1 rounded text-xs bg-red-50 dark:bg-red-900/20 hover:bg-red-100 dark:hover:bg-red-900/30 text-red-600 dark:text-red-400 transition-all" title="{{ _('Remove') }}">
                                    <i class="fa fa-user-minus"></i>
                                </button>
                            </form>
                            {% else %}
                            <form method="POST" action="{{ full_url('/dashboard/teams/' ~ team.id ~ '/members/' ~ m.id ~ '/cancel-invite') }}"
                                  data-confirm="{{ _('Cancel this invitation?') }}&#10;&#10;• The invited person will no longer be able to join this team&#10;• Their invitation email link will stop working">
                                <button type="submit" class="px-2 py-1 rounded text-xs bg-amber-50 dark:bg-amber-900/20 hover:bg-amber-100 text-amber-700 dark:text-amber-400 text-xs transition-all">
                                    <i class="fa fa-ban mr-1"></i>{{ _('Cancel') }}
                                </button>
                            </form>
                            <form method="POST" action="{{ full_url('/dashboard/teams/' ~ team.id ~ '/invite') }}">
                                <input type="hidden" name="email" value="{{ m.invited_email }}">
                                <input type="hidden" name="role" value="{{ m.role }}">
                                <button type="submit" class="px-2 py-1 rounded text-xs bg-blue-50 dark:bg-blue-900/20 hover:bg-blue-100 text-blue-700 dark:text-blue-400 transition-all">
                                    <i class="fa fa-paper-plane mr-1"></i>{{ _('Resend') }}
                                </button>
                            </form>
                            {% endif %}
                        </div>
                        {% endif %}
                    </div>
                </div>
                {% else %}
                <div class="px-5 py-8 text-center text-sm text-gray-400">{{ _('No members yet. Invite someone to get started.') }}</div>
                {% endfor %}
            </div>
        </div>

        <!-- Team Files -->
        {% if is_admin or my_permissions.get('view_files') %}
        <div class="rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 overflow-hidden">
            <div class="px-5 py-3 border-b border-gray-100 dark:border-gray-800 flex items-center gap-2 bg-gray-50 dark:bg-gray-800/50">
                <i class="fa fa-folder-open text-blue-500 text-sm"></i>
                <span class="text-sm font-semibold text-gray-700 dark:text-gray-300">{{ _('Team Files') }}</span>
                <span class="ml-2 text-xs text-gray-400">{{ total_files }}</span>
                <form method="get" class="ml-auto flex items-center gap-2">
                    <input type="text" name="q" value="{{ q }}" placeholder="{{ _('Search files…') }}"
                           class="text-xs px-2 py-1 rounded border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-200 w-40 focus:outline-none focus:ring-1 focus:ring-blue-400">
                    <button type="submit" class="text-xs px-2 py-1 rounded bg-blue-500 text-white hover:bg-blue-600 transition-all"><i class="fa fa-search"></i></button>
                    {% if q %}<a href="?" class="text-xs px-2 py-1 rounded border border-gray-300 dark:border-gray-600 text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-700 transition-all">{{ _('Clear') }}</a>{% endif %}
                </form>
            </div>

            {% if files %}
            <div class="divide-y divide-gray-100 dark:divide-gray-800">
                {% for f in files %}
                {% set is_my_file = (f.user_id == user.id) %}
                {% set can_transfer = is_admin or is_my_file %}
                <div class="px-5 py-3 hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-all">
                    <div class="flex items-center gap-3 justify-between">
                        <div class="flex items-center gap-3 min-w-0">
                            <div class="w-8 h-8 rounded-lg bg-blue-50 dark:bg-blue-900/30 flex items-center justify-center flex-shrink-0">
                                <i class="fa fa-file-zipper text-blue-500 text-xs"></i>
                            </div>
                            <div class="min-w-0">
                                <div class="text-sm font-medium text-gray-800 dark:text-gray-200 truncate max-w-[200px]">{{ f.file_name or _('Unnamed') }}</div>
                                <div class="flex items-center gap-1 flex-wrap mt-0.5">
                                    <span class="text-xs font-medium px-1.5 py-0.5 rounded bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-400 uppercase">{{ f.input_format or '?' }}</span>
                                    <i class="fa fa-arrow-right text-gray-400 text-[10px]"></i>
                                    <span class="text-xs font-medium px-1.5 py-0.5 rounded bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400 uppercase">{{ f.output_format or '?' }}</span>
                                    <span class="text-[10px] text-gray-400">{{ _('by') }} {{ f.file_owner_name }}</span>
                                    {% if f.share_count %}
                                    <span class="text-[10px] px-1.5 py-0.5 rounded bg-indigo-100 dark:bg-indigo-900/30 text-indigo-600 dark:text-indigo-400"><i class="fa fa-share-nodes mr-0.5"></i>{{ f.share_count }}</span>
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                        <div class="flex items-center gap-1.5 flex-shrink-0">
                            <span class="text-xs text-gray-400">{{ f.created_at[:10] if f.created_at else '' }}</span>
                            {% if f.job_id and f.status not in ['deleted', 'expired'] %}
                            {% if is_admin or my_permissions.get('download') %}
                            <a href="/output/{{ f.job_id }}" class="px-2 py-1 rounded text-xs bg-green-50 dark:bg-green-900/20 text-green-700 dark:text-green-400 hover:bg-green-100 dark:hover:bg-green-900/30 transition-all" title="{{ _('View') }}">
                                <i class="fa fa-eye"></i>
                            </a>
                            {% endif %}
                            {% if is_admin or my_permissions.get('share') %}
                            <a href="/share/{{ f.job_id }}" class="px-2 py-1 rounded text-xs bg-indigo-50 dark:bg-indigo-900/20 text-indigo-700 dark:text-indigo-400 hover:bg-indigo-100 dark:hover:bg-indigo-900/30 transition-all" title="{{ _('Share') }}">
                                <i class="fa fa-share-nodes"></i>
                            </a>
                            {% endif %}
                            {% if can_transfer and f.status not in ['deleted'] %}
                            <button onclick="openTransferModal('{{ f.job_id }}', '{{ f.file_name|e }}')"
                                    class="px-2 py-1 rounded text-xs bg-purple-50 dark:bg-purple-900/20 text-purple-700 dark:text-purple-400 hover:bg-purple-100 dark:hover:bg-purple-900/30 transition-all" title="{{ _('Transfer ownership') }}">
                                <i class="fa fa-right-left"></i>
                            </button>
                            {% endif %}
                            {% endif %}
                        </div>
                    </div>
                </div>
                {% endfor %}
            </div>

            {% if total_pages > 1 %}
            <div class="px-5 py-3 border-t border-gray-100 dark:border-gray-800 flex items-center justify-between">
                <span class="text-xs text-gray-400">{{ _('Page %(p)s of %(t)s', p=page, t=total_pages) }}</span>
                <div class="flex gap-2">
                    {% if page > 1 %}<a href="?page={{ page-1 }}{% if q %}&q={{ q|urlencode }}{% endif %}" class="px-3 py-1 rounded border border-gray-300 dark:border-gray-600 text-xs hover:bg-gray-100 dark:hover:bg-gray-700 transition-all">← {{ _('Prev') }}</a>{% endif %}
                    {% if page < total_pages %}<a href="?page={{ page+1 }}{% if q %}&q={{ q|urlencode }}{% endif %}" class="px-3 py-1 rounded border border-gray-300 dark:border-gray-600 text-xs hover:bg-gray-100 dark:hover:bg-gray-700 transition-all">{{ _('Next') }} →</a>{% endif %}
                </div>
            </div>
            {% endif %}

            {% else %}
            <div class="py-10 text-center text-sm text-gray-400">
                <i class="fa fa-folder-open text-2xl text-gray-300 dark:text-gray-600 mb-2 block"></i>
                {% if q %}{{ _('No files matching "%(q)s".', q=q) }}{% else %}{{ _('No team files yet.') }}{% endif %}
            </div>
            {% endif %}
        </div>
        {% endif %}

        <!-- Team Billing (owner only) -->
        {% if is_owner %}
        <div class="rounded-xl border border-indigo-200 dark:border-indigo-800 bg-white dark:bg-gray-900 overflow-hidden">
            <div class="px-5 py-3 border-b border-indigo-100 dark:border-indigo-800 flex items-center gap-2 bg-indigo-50/40 dark:bg-indigo-900/10">
                <i class="fa fa-credit-card text-indigo-500 text-sm"></i>
                <span class="text-sm font-semibold text-gray-700 dark:text-gray-300">{{ _('Team Billing Plan') }}</span>
                {% if team_plan %}
                <span class="ml-auto text-xs px-2 py-0.5 rounded-full bg-indigo-100 dark:bg-indigo-900/30 text-indigo-700 dark:text-indigo-400 font-medium">{{ team_plan.name }}</span>
                {% endif %}
            </div>
            <div class="p-5">
                {% if team_plan %}
                <p class="text-sm text-gray-600 dark:text-gray-400 mb-3">
                    {{ _('This team has a dedicated') }} <strong>{{ team_plan.name }}</strong> {{ _('plan active.') }}
                    {% if team.stripe_subscription_id %}
                    <span class="text-xs text-green-600 dark:text-green-400 ml-1"><i class="fa fa-check-circle"></i> {{ _('Stripe subscription active') }}</span>
                    {% endif %}
                </p>
                <form method="POST" action="{{ full_url('/dashboard/teams/' ~ team.id ~ '/clear-plan') }}">
                    <button type="submit" class="text-xs px-3 py-1.5 rounded-lg border border-red-300 dark:border-red-700 text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20 transition-all">
                        <i class="fa fa-times mr-1"></i>{{ _('Remove team plan (revert to personal)') }}
                    </button>
                </form>
                {% else %}
                <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
                    {{ _('This team currently uses your personal plan limits. Subscribe to a dedicated team plan to expand member capacity, file limits, and sharing features for all team members.') }}
                </p>
                <div class="grid grid-cols-1 gap-2">
                    {% for p in all_plans %}
                    {% if p.price_monthly > 0 %}
                    <div class="px-4 py-3 rounded-lg border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800/50">
                        <div class="flex items-center justify-between mb-2">
                            <div>
                                <div class="text-sm font-semibold text-gray-800 dark:text-gray-200">{{ p.name }}</div>
                                <div class="text-xs text-gray-500">${{ "%.2f"|format(p.price_monthly) }}/{{ _('month') }}</div>
                            </div>
                        </div>
                        <div class="flex items-center gap-2 flex-wrap">
                            <form method="POST" action="{{ full_url('/dashboard/teams/' ~ team.id ~ '/subscribe/stripe/' ~ p.id) }}">
                                <button type="submit" class="px-3 py-1.5 rounded-lg bg-indigo-600 hover:bg-indigo-700 text-white text-xs font-semibold transition-all">
                                    <i class="fa fa-credit-card mr-1"></i>{{ _('Pay with Stripe') }}
                                </button>
                            </form>
                            {% if p.paypal_plan_id %}
                            <form method="POST" action="{{ full_url('/dashboard/teams/' ~ team.id ~ '/subscribe/paypal/' ~ p.id) }}">
                                <button type="submit" class="px-3 py-1.5 rounded-lg bg-blue-500 hover:bg-blue-600 text-white text-xs font-semibold transition-all">
                                    <i class="fab fa-paypal mr-1"></i>{{ _('Pay with PayPal') }}
                                </button>
                            </form>
                            {% endif %}
                        </div>
                    </div>
                    {% endif %}
                    {% endfor %}
                </div>
                {% endif %}
                {% if max_members > 0 %}
                <p class="mt-3 text-xs text-gray-400"><i class="fa fa-users mr-1"></i>{{ _('Member limit:') }} {{ members|selectattr('status','eq','active')|list|length }}/{{ max_members }}</p>
                {% endif %}
            </div>
        </div>
        {% endif %}

    </div>

    <!-- Right: Chat Panel -->
    <div class="space-y-5">
        <div class="rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 overflow-hidden flex flex-col" style="height:520px">
            <div class="px-4 py-3 border-b border-gray-100 dark:border-gray-800 flex items-center gap-2 bg-gray-50 dark:bg-gray-800/50 flex-shrink-0">
                <i class="fa fa-comments text-blue-500 text-sm"></i>
                <span class="text-sm font-semibold text-gray-700 dark:text-gray-300">{{ _('Team Chat') }}</span>
                <div class="ml-auto flex items-center gap-1.5">
                    <span class="w-2 h-2 rounded-full bg-green-400" id="sse-indicator" title="{{ _('Connecting...') }}"></span>
                    <span class="text-[10px] text-gray-400" id="sse-status">{{ _('Connecting...') }}</span>
                </div>
            </div>

            <div id="chat-messages" class="flex-1 overflow-y-auto p-4 space-y-3">
                {% for msg in messages %}
                <div class="{% if msg.message_type == 'system' %}text-center{% endif %}" id="msg-{{ msg.id }}">
                    {% if msg.message_type == 'system' %}
                    <span class="text-[10px] text-gray-400 italic">{{ msg.message }}</span>
                    {% else %}
                    <div class="flex items-start gap-2 {% if msg.user_id == user.id %}flex-row-reverse{% endif %}">
                        <div class="w-6 h-6 rounded-full bg-indigo-100 dark:bg-indigo-900/40 flex items-center justify-center text-indigo-700 dark:text-indigo-300 text-[10px] font-bold flex-shrink-0">
                            {{ (msg.username or '?')[0]|upper }}
                        </div>
                        <div class="max-w-[80%]">
                            <div class="text-[10px] text-gray-400 mb-0.5 {% if msg.user_id == user.id %}text-right{% endif %}">
                                {{ msg.username or _('Unknown') }} · {{ msg.created_at[11:16] if msg.created_at else '' }}
                            </div>
                            <div class="px-3 py-2 rounded-xl text-sm {% if msg.user_id == user.id %}bg-indigo-600 text-white rounded-tr-none{% else %}bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-200 rounded-tl-none{% endif %}">
                                {{ msg.message }}
                            </div>
                        </div>
                    </div>
                    {% endif %}
                </div>
                {% endfor %}
            </div>

            <div class="px-4 py-3 border-t border-gray-100 dark:border-gray-800 flex-shrink-0">
                <form id="chat-form" class="flex gap-2">
                    <input type="text" id="chat-input" placeholder="{{ _('Send a message…') }}"
                           class="flex-1 px-3 py-1.5 rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-sm outline-none focus:ring-2 focus:ring-indigo-400/40"
                           autocomplete="off" maxlength="1000">
                    <button type="submit" class="px-3 py-1.5 rounded-lg bg-indigo-600 hover:bg-indigo-700 text-white text-sm font-semibold transition-all flex items-center gap-1">
                        <i class="fa fa-paper-plane text-xs"></i>
                    </button>
                </form>
            </div>
        </div>

        <!-- Online presence -->
        <div class="rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 overflow-hidden">
            <div class="px-4 py-3 border-b border-gray-100 dark:border-gray-800 flex items-center gap-2 bg-gray-50 dark:bg-gray-800/50">
                <span class="w-2 h-2 rounded-full bg-green-400"></span>
                <span class="text-sm font-semibold text-gray-700 dark:text-gray-300">{{ _('Online Now') }}</span>
            </div>
            <div id="presence-list" class="p-3 space-y-1.5">
                {% for m in members if m.is_online and m.status == 'active' %}
                <div class="flex items-center gap-2" data-uid="{{ m.user_id }}">
                    <span class="w-2 h-2 rounded-full bg-green-400 flex-shrink-0"></span>
                    <span class="text-sm text-gray-700 dark:text-gray-300">{{ m.username or m.invited_email }}</span>
                </div>
                {% else %}
                <p class="text-xs text-gray-400 italic py-2">{{ _('No members currently online.') }}</p>
                {% endfor %}
            </div>
        </div>
    </div>
</div>

<!-- Invite Member Modal -->
<div id="modal-invite" class="hidden fixed inset-0 z-50 flex items-center justify-center bg-black/50 py-8">
    <div class="bg-white dark:bg-gray-900 rounded-2xl shadow-xl p-6 max-w-md w-full mx-4 border border-gray-200 dark:border-gray-700">
        <h3 class="text-lg font-bold text-gray-900 dark:text-white mb-4"><i class="fa fa-user-plus mr-2 text-purple-500"></i>{{ _('Invite Member') }}</h3>
        <form method="POST" action="{{ full_url('/dashboard/teams/' ~ team.id ~ '/invite') }}">
            <div class="space-y-4">
                <div>
                    <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">{{ _('Email Address *') }}</label>
                    <input type="email" name="email" required placeholder="user@example.com"
                           class="w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-sm outline-none focus:ring-2 focus:ring-purple-400/40">
                </div>
                <div>
                    <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">{{ _('Role') }}</label>
                    <select name="role" class="w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-sm outline-none focus:ring-2 focus:ring-purple-400/40">
                        <option value="member">{{ _('Member — Standard access') }}</option>
                        <option value="admin">{{ _('Admin — Can invite and manage members') }}</option>
                    </select>
                </div>
                {% if max_members > 0 %}
                <p class="text-xs text-gray-400">{{ _('Members:') }} {{ members|selectattr('status','eq','active')|list|length }}/{{ max_members }}</p>
                {% endif %}
            </div>
            <div class="flex gap-3 mt-5">
                <button type="submit" class="flex-1 px-4 py-2 rounded-lg bg-purple-600 hover:bg-purple-700 text-white text-sm font-semibold transition-all">
                    <i class="fa fa-paper-plane mr-1"></i>{{ _('Send Invite') }}
                </button>
                <button type="button" onclick="document.getElementById('modal-invite').classList.add('hidden')"
                        class="px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 transition-all">
                    {{ _('Cancel') }}
                </button>
            </div>
        </form>
    </div>
</div>

<!-- Create Sub-team Modal -->
<div id="modal-create-sub" class="hidden fixed inset-0 z-50 flex items-center justify-center bg-black/50 py-8">
    <div class="bg-white dark:bg-gray-900 rounded-2xl shadow-xl p-6 max-w-md w-full mx-4 border border-gray-200 dark:border-gray-700">
        <h3 class="text-lg font-bold text-gray-900 dark:text-white mb-4"><i class="fa fa-sitemap mr-2 text-purple-500"></i>{{ _('Create Sub-Team') }}</h3>
        <form method="POST" action="{{ full_url('/dashboard/teams/create') }}">
            <input type="hidden" name="parent_team_id" value="{{ team.id }}">
            <div>
                <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">{{ _('Sub-Team Name *') }}</label>
                <input type="text" name="name" required placeholder="{{ _('e.g. Design Sub-team') }}"
                       class="w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-sm outline-none focus:ring-2 focus:ring-purple-400/40">
            </div>
            <div class="flex gap-3 mt-5">
                <button type="submit" class="flex-1 px-4 py-2 rounded-lg bg-purple-600 hover:bg-purple-700 text-white text-sm font-semibold transition-all">
                    <i class="fa fa-plus mr-1"></i>{{ _('Create') }}
                </button>
                <button type="button" onclick="document.getElementById('modal-create-sub').classList.add('hidden')"
                        class="px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 transition-all">
                    {{ _('Cancel') }}
                </button>
            </div>
        </form>
    </div>
</div>

<!-- Permissions Modal -->
<div id="modal-perm" class="hidden fixed inset-0 z-50 flex items-center justify-center bg-black/50 py-8">
    <div class="bg-white dark:bg-gray-900 rounded-2xl shadow-xl p-6 max-w-md w-full mx-4 border border-gray-200 dark:border-gray-700">
        <h3 class="text-lg font-bold text-gray-900 dark:text-white mb-4"><i class="fa fa-sliders mr-2 text-blue-500"></i>{{ _('Member Permissions') }}</h3>
        <form id="perm-form" method="POST">
            <div class="space-y-3">
                <div>
                    <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">{{ _('Role') }}</label>
                    <select name="role" id="perm-role" class="w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-sm">
                        <option value="member">{{ _('Member') }}</option>
                        <option value="admin">{{ _('Admin') }}</option>
                    </select>
                </div>
                <div class="space-y-2 pt-2 border-t border-gray-100 dark:border-gray-800">
                    <p class="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide">{{ _('Permissions') }}</p>
                    <label class="flex items-center gap-2 text-sm text-gray-700 dark:text-gray-300 cursor-pointer">
                        <input type="checkbox" name="view_files" id="perm-view" class="rounded"> {{ _('View team files') }}
                    </label>
                    <label class="flex items-center gap-2 text-sm text-gray-700 dark:text-gray-300 cursor-pointer">
                        <input type="checkbox" name="download" id="perm-download" class="rounded"> {{ _('Download files') }}
                    </label>
                    <label class="flex items-center gap-2 text-sm text-gray-700 dark:text-gray-300 cursor-pointer">
                        <input type="checkbox" name="share" id="perm-share" class="rounded"> {{ _('Share files') }}
                    </label>
                    <label class="flex items-center gap-2 text-sm text-gray-700 dark:text-gray-300 cursor-pointer">
                        <input type="checkbox" name="delete" id="perm-delete" class="rounded"> {{ _('Delete files') }}
                    </label>
                </div>
            </div>
            <div class="flex gap-3 mt-5">
                <button type="submit" class="flex-1 px-4 py-2 rounded-lg bg-blue-600 hover:bg-blue-700 text-white text-sm font-semibold transition-all">{{ _('Save') }}</button>
                <button type="button" onclick="document.getElementById('modal-perm').classList.add('hidden')"
                        class="px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 transition-all">{{ _('Cancel') }}</button>
            </div>
        </form>
    </div>
</div>

<!-- Transfer Ownership Modal -->
<div id="modal-transfer" class="hidden fixed inset-0 z-50 flex items-center justify-center bg-black/50 py-8">
    <div class="bg-white dark:bg-gray-900 rounded-2xl shadow-xl p-6 max-w-md w-full mx-4 border border-gray-200 dark:border-gray-700">
        <h3 class="text-lg font-bold text-gray-900 dark:text-white mb-1"><i class="fa fa-right-left mr-2 text-purple-500"></i>{{ _('Transfer File Ownership') }}</h3>
        <p class="text-xs text-gray-400 mb-4" id="transfer-filename"></p>
        <form id="transfer-form" method="POST">
            <div>
                <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">{{ _('Transfer to member') }}</label>
                <select name="new_owner_user_id" class="w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white text-sm">
                    {% for m in members if m.status == 'active' and m.user_id %}
                    <option value="{{ m.user_id }}">{{ m.username or m.invited_email }}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="flex gap-3 mt-5">
                <button type="submit" class="flex-1 px-4 py-2 rounded-lg bg-purple-600 hover:bg-purple-700 text-white text-sm font-semibold transition-all">{{ _('Transfer') }}</button>
                <button type="button" onclick="document.getElementById('modal-transfer').classList.add('hidden')"
                        class="px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 transition-all">{{ _('Cancel') }}</button>
            </div>
        </form>
    </div>
</div>

<script>
(function(){
    var teamId = {{ team.id }};
    var userId = {{ user.id }};

    /* --- Permissions modal --- */
    window.openPermModal = function(memberId, role, perms) {
        var f = document.getElementById('perm-form');
        f.action = '/dashboard/teams/' + teamId + '/members/' + memberId + '/permissions';
        document.getElementById('perm-role').value = role || 'member';
        document.getElementById('perm-view').checked = !!(perms && perms.view_files);
        document.getElementById('perm-download').checked = !!(perms && perms.download);
        document.getElementById('perm-share').checked = !!(perms && perms.share);
        document.getElementById('perm-delete').checked = !!(perms && perms['delete']);
        document.getElementById('modal-perm').classList.remove('hidden');
    };

    /* --- Transfer modal --- */
    window.openTransferModal = function(jobId, fileName) {
        var f = document.getElementById('transfer-form');
        f.action = '/dashboard/teams/' + teamId + '/files/' + encodeURIComponent(jobId) + '/transfer';
        document.getElementById('transfer-filename').textContent = fileName || jobId;
        document.getElementById('modal-transfer').classList.remove('hidden');
    };

    /* --- Chat --- */
    var chatMessages = document.getElementById('chat-messages');
    var chatForm = document.getElementById('chat-form');
    var chatInput = document.getElementById('chat-input');

    function scrollChatBottom() {
        if (chatMessages) chatMessages.scrollTop = chatMessages.scrollHeight;
    }
    scrollChatBottom();

    chatForm && chatForm.addEventListener('submit', function(e){
        e.preventDefault();
        var msg = chatInput.value.trim();
        if (!msg) return;
        chatInput.value = '';
        fetch('/dashboard/teams/' + teamId + '/chat', {
            method: 'POST',
            headers: {'Content-Type': 'application/x-www-form-urlencoded'},
            body: 'message=' + encodeURIComponent(msg),
            credentials: 'include'
        }).catch(function(){});
    });

    /* --- Presence ping --- */
    function pingPresence() {
        fetch('/dashboard/teams/' + teamId + '/ping', {method: 'POST', credentials: 'include'}).catch(function(){});
    }
    pingPresence();
    setInterval(pingPresence, 30000);

    /* --- SSE --- */
    var sseIndicator = document.getElementById('sse-indicator');
    var sseStatus = document.getElementById('sse-status');

    function setSSEStatus(status, color) {
        if (sseIndicator) sseIndicator.className = 'w-2 h-2 rounded-full ' + color;
        if (sseStatus) sseStatus.textContent = status;
    }

    function appendMessage(data) {
        if (!chatMessages) return;
        if (document.getElementById('msg-' + data.id)) return;
        var isMine = data.user_id === userId;
        var div = document.createElement('div');
        div.id = 'msg-' + data.id;

        if (data.message_type === 'system') {
            div.className = 'text-center';
            div.innerHTML = '<span class="text-[10px] text-gray-400 italic">' + _esc(data.message) + '</span>';
        } else {
            div.className = '';
            var align = isMine ? 'flex-row-reverse' : '';
            var bubble = isMine
                ? 'bg-indigo-600 text-white rounded-tr-none'
                : 'bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-200 rounded-tl-none';
            var nameAlign = isMine ? 'text-right' : '';
            div.innerHTML = '<div class="flex items-start gap-2 ' + align + '">'
                + '<div class="w-6 h-6 rounded-full bg-indigo-100 dark:bg-indigo-900/40 flex items-center justify-center text-indigo-700 dark:text-indigo-300 text-[10px] font-bold flex-shrink-0">' + (data.username || '?')[0].toUpperCase() + '</div>'
                + '<div class="max-w-[80%]">'
                + '<div class="text-[10px] text-gray-400 mb-0.5 ' + nameAlign + '">' + _esc(data.username || 'Unknown') + ' · ' + (data.created_at || '').slice(11,16) + '</div>'
                + '<div class="px-3 py-2 rounded-xl text-sm ' + bubble + '">' + _esc(data.message) + '</div>'
                + '</div>'
                + '</div>';
        }
        chatMessages.appendChild(div);
        scrollChatBottom();
    }

    function updatePresence(online) {
        var list = document.getElementById('presence-list');
        if (!list) return;
        list.innerHTML = '';
        if (!online || online.length === 0) {
            list.innerHTML = '<p class="text-xs text-gray-400 italic py-2">No members currently online.</p>';
            return;
        }
        online.forEach(function(u) {
            var d = document.createElement('div');
            d.className = 'flex items-center gap-2';
            d.setAttribute('data-uid', u.user_id);
            d.innerHTML = '<span class="w-2 h-2 rounded-full bg-green-400 flex-shrink-0"></span>'
                + '<span class="text-sm text-gray-700 dark:text-gray-300">' + _esc(u.username) + '</span>';
            list.appendChild(d);
        });
    }

    function _esc(s) {
        return String(s || '').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
    }

    var evtSource = null;
    function connectSSE() {
        setSSEStatus('Connecting...', 'bg-yellow-400');
        evtSource = new EventSource('/dashboard/teams/' + teamId + '/events', {withCredentials: true});
        evtSource.onopen = function() { setSSEStatus('Live', 'bg-green-400'); };
        evtSource.onerror = function() {
            setSSEStatus('Reconnecting...', 'bg-red-400');
            evtSource.close();
            setTimeout(connectSSE, 5000);
        };
        evtSource.onmessage = function(e) {
            try {
                var data = JSON.parse(e.data);
                if (data.type === 'message') appendMessage(data);
                else if (data.type === 'presence') updatePresence(data.online);
                else if (data.type === 'connected') setSSEStatus('Live', 'bg-green-400');
            } catch(err) {}
        };
    }
    connectSSE();

    window.addEventListener('beforeunload', function() {
        if (evtSource) evtSource.close();
    });
})();
</script>
{% endblock %}