{% extends "dashboard/layout.html" %}
{% block title %}{{ _('My Teams – OnlineConvert') }}{% 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-4">
    <div>
        <h1 class="text-xl font-bold text-gray-900 dark:text-white"><i class="fa fa-users mr-2 text-purple-500"></i>{{ _('Teams') }}</h1>
        <p class="text-sm text-gray-500 dark:text-gray-400 mt-0.5">{{ _('Collaborate with your team — share files, manage members, and work together.') }}</p>
    </div>
    {% if can_create %}
    <button onclick="document.getElementById('modal-create-team').classList.remove('hidden')"
            class="px-4 py-2 rounded-lg bg-purple-600 hover:bg-purple-700 text-white text-sm font-semibold transition-all flex items-center gap-2">
        <i class="fa fa-plus"></i> {{ _('Create Team') }}
    </button>
    {% else %}
    <div class="flex flex-col items-end gap-1">
        <a href="{{ full_url('/pricing') }}" class="px-4 py-2 rounded-lg bg-amber-100 dark:bg-amber-900/30 text-amber-700 dark:text-amber-400 text-sm font-semibold hover:bg-amber-200 dark:hover:bg-amber-900/50 transition-all flex items-center gap-2">
            <i class="fa fa-arrow-up"></i> {{ _('Upgrade to Create Teams') }}
        </a>
        {% if max_teams == 0 %}
        <span class="text-xs text-gray-400">{{ _('Teams not available on your current plan') }}</span>
        {% else %}
        <span class="text-xs text-gray-400">{{ _('Team limit reached') }} ({{ owned_teams|length }}/{{ max_teams }})</span>
        {% endif %}
    </div>
    {% endif %}
</div>

{% if not owned_teams and not member_teams %}
<div class="rounded-2xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 py-16 text-center">
    <i class="fa fa-users text-4xl text-gray-300 dark:text-gray-600 mb-4"></i>
    <p class="text-gray-500 dark:text-gray-400 text-sm mb-2">{{ _('No teams yet.') }}</p>
    {% if can_create %}
    <p class="text-xs text-gray-400">{{ _('Create a team to start collaborating with others.') }}</p>
    {% else %}
    <p class="text-xs text-gray-400">{{ _('Upgrade your plan to create and join teams.') }}</p>
    {% endif %}
</div>
{% endif %}

{% if owned_teams %}
<div class="mb-6">
    <h2 class="text-sm font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-3">{{ _('Teams I Own') }}</h2>
    <div class="grid gap-4 sm:grid-cols-2">
        {% for team in owned_teams %}
        <div class="rounded-xl border border-purple-200 dark:border-purple-800 bg-white dark:bg-gray-900 p-5 hover:border-purple-400 dark:hover:border-purple-600 transition-all">
            <div class="flex items-start justify-between gap-3 mb-3">
                <div class="flex items-center gap-3">
                    <div class="w-10 h-10 rounded-xl bg-purple-100 dark:bg-purple-900/30 flex items-center justify-center flex-shrink-0">
                        <i class="fa fa-users text-purple-600 dark:text-purple-400"></i>
                    </div>
                    <div>
                        <h3 class="font-semibold text-gray-900 dark:text-white text-sm">{{ team.name }}</h3>
                        <p class="text-xs text-gray-400 mt-0.5">
                            {{ team.member_count }} {{ _('active member') if team.member_count == 1 else _('active members') }}
                            {% if team.sub_team_count %} · {{ team.sub_team_count }} {{ _('sub-team') if team.sub_team_count == 1 else _('sub-teams') }}{% endif %}
                        </p>
                    </div>
                </div>
                <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>
            </div>
            {% if team.plan_name %}
            <p class="text-xs text-indigo-600 dark:text-indigo-400 mb-3"><i class="fa fa-credit-card mr-1"></i>{{ _('Team Plan:') }} {{ team.plan_name }}</p>
            {% endif %}
            <div class="flex items-center gap-2">
                <a href="{{ full_url('/dashboard/teams/' ~ team.id) }}"
                   class="flex-1 text-center px-3 py-1.5 rounded-lg bg-purple-600 hover:bg-purple-700 text-white text-xs font-semibold transition-all">
                    <i class="fa fa-arrow-right mr-1"></i>{{ _('Open Team') }}
                </a>
                <form method="POST" action="{{ full_url('/dashboard/teams/' ~ team.id ~ '/delete') }}"
                      data-confirm="Delete team '{{ team.name|e }}' permanently?&#10;&#10;• All team members and invitations&#10;• All subteams and their members&#10;• All team messages and presence data&#10;• All shared file access granted within this team"  >
                    <button type="submit" class="px-2.5 py-1.5 rounded-lg bg-red-50 dark:bg-red-900/20 text-red-600 dark:text-red-400 text-xs hover:bg-red-100 dark:hover:bg-red-900/30 transition-all">
                        <i class="fa fa-trash"></i>
                    </button>
                </form>
            </div>
        </div>
        {% endfor %}
    </div>
</div>
{% endif %}

{% if member_teams %}
<div>
    <h2 class="text-sm font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-3">{{ _('Teams I\'m In') }}</h2>
    <div class="grid gap-4 sm:grid-cols-2">
        {% for team in member_teams %}
        <div class="rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 p-5 hover:border-purple-300 dark:hover:border-purple-700 transition-all">
            <div class="flex items-start justify-between gap-3 mb-3">
                <div class="flex items-center gap-3">
                    <div class="w-10 h-10 rounded-xl bg-gray-100 dark:bg-gray-800 flex items-center justify-center flex-shrink-0">
                        <i class="fa fa-users text-gray-500 dark:text-gray-400"></i>
                    </div>
                    <div>
                        <h3 class="font-semibold text-gray-900 dark:text-white text-sm">{{ team.name }}</h3>
                        <p class="text-xs text-gray-400 mt-0.5">{{ _('Joined as') }} {{ team.role }}</p>
                    </div>
                </div>
                <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> {{ team.role|capitalize }}
                </span>
            </div>
            <a href="{{ full_url('/dashboard/teams/' ~ team.id) }}"
               class="block text-center px-3 py-1.5 rounded-lg bg-gray-100 dark:bg-gray-800 hover:bg-purple-100 dark:hover:bg-purple-900/20 text-gray-700 dark:text-gray-300 hover:text-purple-700 dark:hover:text-purple-300 text-xs font-semibold transition-all">
                <i class="fa fa-arrow-right mr-1"></i>{{ _('Open Team') }}
            </a>
        </div>
        {% endfor %}
    </div>
</div>
{% endif %}

<!-- Create Team Modal -->
<div id="modal-create-team" 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-users mr-2 text-purple-500"></i>{{ _('Create New Team') }}</h3>
        <form method="POST" action="{{ full_url('/dashboard/teams/create') }}">
            <div class="space-y-4">
                <div>
                    <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">{{ _('Team Name *') }}</label>
                    <input type="text" name="name" required placeholder="{{ _('e.g. Marketing 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>
                {% if owned_teams %}
                <div>
                    <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">{{ _('Parent Team (optional — creates a sub-team)') }}</label>
                    <select name="parent_team_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 outline-none focus:ring-2 focus:ring-purple-400/40">
                        <option value="">{{ _('— No parent (top-level team) —') }}</option>
                        {% for team in owned_teams %}
                        <option value="{{ team.id }}">{{ team.name }}</option>
                        {% endfor %}
                    </select>
                </div>
                {% 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-plus mr-1"></i>{{ _('Create Team') }}
                </button>
                <button type="button" onclick="document.getElementById('modal-create-team').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>
{% endblock %}