<!-- htmlhint doctype-first:false -->
<!-- Loop through teams -->
{% for team in data %}
<div
    class="team-card bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-lg p-4 shadow-sm hover:shadow-md transition-shadow relative"
    data-relationship="{{ team.relationship|default('none') }}"
    data-team-id="{{ team.id }}"
    data-team-name="{{ team.name|escape }}">
    <div class="absolute top-4 right-4 text-xs font-mono text-gray-400">
        #{{ (pagination.page - 1) * pagination.per_page + loop.index }}
    </div>
    <div class="flex justify-between items-start mb-3">
        <div class="flex-1">
            <div class="flex items-center gap-3 mb-2 flex-wrap">
                <h4 class="team-name text-lg font-medium text-gray-900 dark:text-white">🏢 {{ team.name|escape }}</h4>

                <!-- Relationship badge -->
                {% if team.relationship == 'personal' %}
                <span class="relationship-badge inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-300">PERSONAL</span>
                {% elif team.relationship == 'owner' %}
                <span class="relationship-badge inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300">OWNER</span>
                {% elif team.relationship == 'member' %}
                <span class="relationship-badge inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300">MEMBER</span>
                {% elif team.relationship == 'public' %}
                <span class="relationship-badge inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-300">CAN JOIN</span>
                {% else %}
                <!-- Fallback to active/inactive for admin view -->
                {% if team.is_active %}
                <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300">ACTIVE</span>
                {% else %}
                <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-300">INACTIVE</span>
                {% endif %}
                {% endif %}

                <span
                    class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-300">{{
                    team.visibility|upper }}</span>
                <span class="text-sm text-gray-500 dark:text-gray-400">{{ team.member_count|default(0) }} members</span>
            </div>

            <p class="team-description text-sm text-gray-600 dark:text-gray-400">
                {% if team.relationship == 'personal' %}
                Your personal team • Private workspace
                {% elif team.relationship == 'owner' %}
                You own this team
                {% elif team.relationship == 'member' %}
                You are a member • Owner: {{ team.created_by|default('Unknown') }}
                {% elif team.relationship == 'public' %}
                Public team • Owner: {{ team.created_by|default('Unknown') }}
                {% else %}
                {{ (team.description | decode_html)|truncate(80) if team.description else "No description" }}
                {% endif %}
            </p>
        </div>
    </div>

    <!-- Actions based on relationship -->
    <div class="flex flex-wrap gap-2 mt-3">
        {% if team.relationship == 'personal' %}
        <span class="px-3 py-1 text-sm font-medium text-gray-500 dark:text-gray-400 bg-gray-100 dark:bg-gray-700 rounded-md">
            Personal workspace - no actions available
        </span>
        {% elif team.relationship == 'owner' %}
        <button data-team-id="{{ team.id }}" data-action-click="manageTeamMembersSafe" data-arg0="this"
            class="px-3 py-1 text-sm font-medium text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 border border-blue-300 dark:border-blue-600 hover:border-blue-500 dark:hover:border-blue-400 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
            Manage Members
        </button>
        <button data-team-id="{{ team.id }}" data-action-click="editTeamSafe" data-arg0="this"
            class="px-3 py-1 text-sm font-medium text-green-600 dark:text-green-400 hover:text-green-800 dark:hover:text-green-300 border border-green-300 dark:border-green-600 hover:border-green-500 dark:hover:border-green-400 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500">
            Edit Settings
        </button>
        {% if team.visibility == 'public' %}
        <button data-team-id="{{ team.id }}" data-action-click="viewJoinRequestsSafe" data-arg0="this"
            class="px-3 py-1 text-sm font-medium text-purple-600 dark:text-purple-400 hover:text-purple-800 dark:hover:text-purple-300 border border-purple-300 dark:border-purple-600 hover:border-purple-500 dark:hover:border-purple-400 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500">
            Join Requests
        </button>
        {% endif %}
        <button data-team-id="{{ team.id }}" data-team-name="{{ team.name|escape }}" data-action-click="deleteTeamSafe" data-arg0="this"
            class="px-3 py-1 text-sm font-medium text-red-600 dark:text-red-400 hover:text-red-800 dark:hover:text-red-300 border border-red-300 dark:border-red-600 hover:border-red-500 dark:hover:border-red-400 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500">
            Delete Team
        </button>
        {% elif team.relationship == 'member' %}
        <button data-team-id="{{ team.id }}" data-team-name="{{ team.name|escape }}" data-action-click="leaveTeamSafe" data-arg0="this"
            class="px-3 py-1 text-sm font-medium text-orange-600 dark:text-orange-400 hover:text-orange-800 dark:hover:text-orange-300 border border-orange-300 dark:border-orange-600 hover:border-orange-500 dark:hover:border-orange-400 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-orange-500">
            Leave Team
        </button>
        {% elif team.relationship == 'public' %}
        {% if team.pending_request %}
        <span class="px-3 py-1 text-sm font-medium text-yellow-600 dark:text-yellow-400 bg-yellow-100 dark:bg-yellow-900 rounded-md border border-yellow-300 dark:border-yellow-600">
            ⏳ Requested to Join
        </span>
        <button data-action-click="cancelJoinRequest" data-arg0="{{ team.id|tojson_attr }}" data-arg1="{{ team.pending_request.id|tojson_attr }}"
            class="px-3 py-1 text-sm font-medium text-red-600 dark:text-red-400 hover:text-red-800 dark:hover:text-red-300 border border-red-300 dark:border-red-600 hover:border-red-500 dark:hover:border-red-400 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500">
            Cancel Request
        </button>
        {% else %}
        <button data-team-id="{{ team.id }}" data-team-name="{{ team.name|escape }}" data-action-click="requestToJoinTeamSafe" data-arg0="this"
            class="px-3 py-1 text-sm font-medium text-indigo-600 dark:text-indigo-400 hover:text-indigo-800 dark:hover:text-indigo-300 border border-indigo-300 dark:border-indigo-600 hover:border-indigo-500 dark:hover:border-indigo-400 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
            Request to Join
        </button>
        {% endif %}
        {% else %}
        <!-- Fallback actions for admin view without relationship -->
        <button data-team-id="{{ team.id }}" data-action-click="manageTeamMembersSafe" data-arg0="this"
            class="px-3 py-1 text-sm font-medium text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 border border-blue-300 dark:border-blue-600 hover:border-blue-500 dark:hover:border-blue-400 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
            Manage Members
        </button>
        <button data-team-id="{{ team.id }}" data-action-click="editTeamSafe" data-arg0="this"
            class="px-3 py-1 text-sm font-medium text-green-600 dark:text-green-400 hover:text-green-800 dark:hover:text-green-300 border border-green-300 dark:border-green-600 hover:border-green-500 dark:hover:border-green-400 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500">
            Edit Settings
        </button>
        <button data-team-id="{{ team.id }}" data-team-name="{{ team.name|escape }}" data-action-click="deleteTeamSafe" data-arg0="this"
            class="px-3 py-1 text-sm font-medium text-red-600 dark:text-red-400 hover:text-red-800 dark:hover:text-red-300 border border-red-300 dark:border-red-600 hover:border-red-500 dark:hover:border-red-400 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500">
            Delete Team
        </button>
        {% endif %}
    </div>
</div>
{% endfor %}

{% if not data %}
<div class="text-center py-12">
    <p class="text-gray-500 dark:text-gray-400">No teams found. Create your first team using the button above.</p>
</div>
{% endif %}

<!-- Out-of-band swap for pagination controls -->
<div id="teams-pagination-controls" hx-swap-oob="true">
    {% set base_url = root_path + '/admin/teams/partial' %}
    {% set hx_target = '#unified-teams-list' %}
    {% set hx_swap = 'outerHTML' %}
    {% set hx_indicator = '#teams-loading' %}
    {% set table_name = 'teams' %}
    {# Use query_params from context, default to empty dict if not provided #}
    {% if query_params is not defined %}{% set query_params = {} %}{% endif %}
    {% include 'pagination_controls.html' %}
</div>
